iOS ScrollView scroll bar position fix

README.md

@@ -1,3 +1,4 @@
+
 # The VA Mobile App
 This is the source code for the VA mobile app.
 
@@ -47,6 +48,18 @@ A common component to display a checkbox with text
 Examples: 
 - `<VASelector text={'Text to display'} selected={selected} setSelected={setSelected}/>`
 
+#### `<VAScrollView>`
+A common component that provides a scrollable view. Use this instead of ScrollView. This component is a wrapper for react-native ScrollView that has a scrollbar styling fix.
+
+Examples:
+```tsx
+  return (
+    <VAScrollView>
+      <Box />
+    </VAScrollView>
+  )
+```
+
 #### `<RadioGroup>`
 A common component to display radio button selectors for a list of selectable items
 

VAMobile/src/components/CommonErrorComponents/BasicError.tsx

@@ -1,7 +1,7 @@
-import { ScrollView, ViewStyle } from 'react-native'
+import { ViewStyle } from 'react-native'
 import React, { FC } from 'react'
 
-import { Box, ButtonTypesConstants, TextView, VAButton } from 'components'
+import { Box, ButtonTypesConstants, TextView, VAButton, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { testIdProps } from 'utils/accessibility'
 import { useTheme, useTranslation } from 'utils/hooks'
@@ -37,7 +37,7 @@ const BasicError: FC<BasicErrorProps> = ({ onTryAgain, messageText, buttonA11yHi
   }
 
   return (
-    <ScrollView contentContainerStyle={scrollStyles}>
+    <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
         {headerText && (
           <TextView {...testIdProps(headerA11yLabel ? headerA11yLabel : headerText)} variant="MobileBodyBold" accessibilityRole="header" textAlign="center">
@@ -49,7 +49,7 @@ const BasicError: FC<BasicErrorProps> = ({ onTryAgain, messageText, buttonA11yHi
           <VAButton onPress={onTryAgain} label={t('tryAgain')} buttonType={ButtonTypesConstants.buttonPrimary} a11yHint={buttonA11yHint} testID={t('tryAgain')} />
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/components/CommonErrorComponents/CallHelpCenter.tsx

@@ -1,7 +1,7 @@
-import { ScrollView, ViewStyle } from 'react-native'
+import { ViewStyle } from 'react-native'
 import React, { FC } from 'react'
 
-import { AlertBox, Box, ButtonTypesConstants, ClickForActionLink, LinkTypeOptionsConstants, TextView, VAButton } from 'components'
+import { AlertBox, Box, ButtonTypesConstants, ClickForActionLink, LinkTypeOptionsConstants, TextView, VAButton, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yHintProp } from 'utils/accessibility'
 import { useTheme, useTranslation } from 'utils/hooks'
@@ -29,7 +29,7 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({ onTryAgain }) => {
   const standardMarginBetween = theme.dimensions.standardMarginBetween
 
   return (
-    <ScrollView contentContainerStyle={scrollStyles}>
+    <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" {...containerStyles}>
         <AlertBox title={t('errors.callHelpCenter.notWorking')} titleA11yLabel={t('errors.callHelpCenter.notWorking.a11yLabel')} border="error" background="noCardBackground">
           <Box>
@@ -71,7 +71,7 @@ const CallHelpCenter: FC<CallHelpCenterProps> = ({ onTryAgain }) => {
           </Box>
         </AlertBox>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/components/LoadingComponent/LoadingComponent.tsx

@@ -1,5 +1,5 @@
-import { ActivityIndicator, ScrollView, ViewStyle } from 'react-native'
-import { Box, TextView } from 'components'
+import { ActivityIndicator, ViewStyle } from 'react-native'
+import { Box, TextView, VAScrollView } from 'components'
 import { useTheme } from 'utils/hooks'
 import React, { FC } from 'react'
 
@@ -16,7 +16,7 @@ const LoadingComponent: FC<LoadingComponentProps> = ({ text }) => {
   }
 
   return (
-    <ScrollView contentContainerStyle={scrollStyles}>
+    <VAScrollView contentContainerStyle={scrollStyles}>
       <Box justifyContent="center" mx={theme.dimensions.gutter} mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom}>
         <ActivityIndicator size="large" color={theme.colors.icon.spinner} />
         <Box mt={theme.dimensions.standardMarginBetween}>
@@ -25,7 +25,7 @@ const LoadingComponent: FC<LoadingComponentProps> = ({ text }) => {
           </TextView>
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/components/VAScrollView.tsx

@@ -0,0 +1,14 @@
+import { ScrollView, ScrollViewProps } from 'react-native'
+import React, { FC } from 'react'
+
+const VAScrollView: FC<ScrollViewProps> = (props) => {
+  return (
+    /**
+     * force scroll position by default to avoid visual bug where scrollbar appears in the center of a screen
+     * scrollIndicatorInsets is an iOS only prop, this bug only appears on iOS
+     */
+    <ScrollView scrollIndicatorInsets={{ right: 1 }} {...props} />
+  )
+}
+
+export default VAScrollView

VAMobile/src/components/index.ts

@@ -49,3 +49,4 @@ export { default as Carousel } from './Carousel'
 export * from './Carousel'
 export { default as FormWrapper } from './FormWrapper/FormWrapper'
 export * from './FormWrapper/FormWrapper'
+export { default as VAScrollView } from './VAScrollView'

VAMobile/src/screens/AppointmentsScreen/AppointmentsScreen.tsx

@@ -1,12 +1,12 @@
 import { DateTime } from 'luxon'
-import { ScrollView, ViewStyle } from 'react-native'
 import { StackScreenProps, createStackNavigator } from '@react-navigation/stack'
+import { ViewStyle } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { FC, ReactElement, useEffect, useState } from 'react'
 
 import { AppointmentsDateRange, prefetchAppointments } from 'store/actions'
 
-import { AlertBox, Box, ErrorComponent, SegmentedControl } from 'components'
+import { AlertBox, Box, ErrorComponent, SegmentedControl, VAScrollView } from 'components'
 import { AppointmentsStackParamList } from './AppointmentStackScreens'
 import { AppointmentsState, StoreState } from 'store/reducers'
 import { NAMESPACE } from 'constants/namespaces'
@@ -75,7 +75,7 @@ const AppointmentsScreen: FC<AppointmentsScreenProps> = ({}) => {
   }
 
   return (
-    <ScrollView {...testIdProps('Appointments-page')} contentContainerStyle={scrollStyles}>
+    <VAScrollView {...testIdProps('Appointments-page')} contentContainerStyle={scrollStyles}>
       <Box flex={1} justifyContent="flex-start">
         <Box mb={theme.dimensions.standardMarginBetween} mt={theme.dimensions.contentMarginTop} mx={theme.dimensions.gutter}>
           <SegmentedControl values={controlValues} titles={controlValues} onChange={setSelectedTab} selected={controlValues.indexOf(selectedTab)} accessibilityHints={a11yHints} />
@@ -86,7 +86,7 @@ const AppointmentsScreen: FC<AppointmentsScreenProps> = ({}) => {
           {selectedTab === t('appointmentsTab.upcoming') && <UpcomingAppointments />}
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/screens/AppointmentsScreen/PastAppointments/PastAppointmentDetails.tsx

@@ -1,12 +1,11 @@
-import { ScrollView } from 'react-native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { FC, useEffect } from 'react'
 
 import { AppointmentAttributes, AppointmentData, AppointmentLocation, AppointmentStatusConstants, AppointmentTypeConstants } from 'store/api/types'
 import { AppointmentsStackParamList } from '../AppointmentStackScreens'
 import { AppointmentsState, StoreState } from 'store/reducers'
-import { Box, TextArea, TextView } from 'components'
+import { Box, TextArea, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { getAppointment } from 'store/actions'
 import { testIdProps } from 'utils/accessibility'
@@ -38,7 +37,7 @@ const PastAppointmentDetails: FC<PastAppointmentDetailsProps> = ({ route }) => {
     appointmentType === AppointmentTypeConstants.VA_VIDEO_CONNECT_GFE || appointmentType === AppointmentTypeConstants.VA_VIDEO_CONNECT_HOME || appointmentIsCanceled
 
   return (
-    <ScrollView {...testIdProps('Past-appointment-details-page')}>
+    <VAScrollView {...testIdProps('Past-appointment-details-page')}>
       <Box mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom}>
         <TextArea>
           <Box mb={appointmentTypeAndDateIsLastItem ? 0 : theme.dimensions.standardMarginBetween}>
@@ -58,7 +57,7 @@ const PastAppointmentDetails: FC<PastAppointmentDetailsProps> = ({ route }) => {
           </TextArea>
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/screens/AppointmentsScreen/UpcomingAppointments/AppointmentCancellationConfirmation/AppointmentCancellationConfirmation.tsx

@@ -1,9 +1,8 @@
-import { ScrollView } from 'react-native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 import React, { FC, useEffect } from 'react'
 
 import { AppointmentsStackParamList } from '../../AppointmentStackScreens'
-import { Box, ButtonTypesConstants, ErrorComponent, TextView, VAButton } from 'components'
+import { Box, ButtonTypesConstants, ErrorComponent, TextView, VAButton, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { ScreenIDTypesConstants } from 'store/api/types/Screens'
 import { cancelAppointment } from 'store/actions'
@@ -36,7 +35,7 @@ const AppointmentCancellationConfirmation: FC<AppointmentCancellationConfirmatio
   }
 
   return (
-    <ScrollView {...testIdProps('Cancel-appointment-page')}>
+    <VAScrollView {...testIdProps('Cancel-appointment-page')}>
       <Box mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom} mx={theme.dimensions.gutter}>
         <TextView variant="MobileBodyBold" accessibilityRole="header">
           {t('upcomingAppointmentDetails.cancellationConfirmation.doYouWantToCancel')}
@@ -60,7 +59,7 @@ const AppointmentCancellationConfirmation: FC<AppointmentCancellationConfirmatio
           />
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/screens/AppointmentsScreen/UpcomingAppointments/PrepareForVideoVisit/PrepareForVideoVisit.tsx

@@ -1,9 +1,8 @@
-import { ScrollView } from 'react-native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 import React, { FC, useEffect } from 'react'
 
 import { AppointmentsStackParamList } from '../../AppointmentStackScreens'
-import { Box, TextArea, TextView } from 'components'
+import { Box, TextArea, TextView, VAScrollView } from 'components'
 import { HiddenTitle } from 'styles/common'
 import { NAMESPACE } from 'constants/namespaces'
 import { generateTestID } from 'utils/common'
@@ -27,7 +26,7 @@ const PrepareForVideoVisit: FC<PrepareForVideoVisitProps> = ({ navigation }) =>
   })
 
   return (
-    <ScrollView {...testIdProps(generateTestID(t('prepareForVideoVisit.title'), ''))}>
+    <VAScrollView {...testIdProps(generateTestID(t('prepareForVideoVisit.title'), ''))}>
       <Box mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom}>
         <TextArea>
           <TextView variant="MobileBodyBold" accessibilityRole="header">
@@ -67,7 +66,7 @@ const PrepareForVideoVisit: FC<PrepareForVideoVisitProps> = ({ navigation }) =>
           </TextView>
         </TextArea>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/screens/AppointmentsScreen/UpcomingAppointments/UpcomingAppointmentDetails.tsx

@@ -1,4 +1,4 @@
-import { Linking, ScrollView } from 'react-native'
+import { Linking } from 'react-native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { FC, ReactElement, useEffect } from 'react'
@@ -18,6 +18,7 @@ import {
   TextViewProps,
   VAButton,
   VAButtonProps,
+  VAScrollView,
 } from 'components'
 import {
   AppointmentAttributes,
@@ -282,7 +283,7 @@ const UpcomingAppointmentDetails: FC<UpcomingAppointmentDetailsProps> = ({ route
   }
 
   return (
-    <ScrollView {...testIdProps('Appointment-details-page')}>
+    <VAScrollView {...testIdProps('Appointment-details-page')}>
       <Box mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom}>
         {renderCancellationAlert()}
         <TextArea>
@@ -315,7 +316,7 @@ const UpcomingAppointmentDetails: FC<UpcomingAppointmentDetailsProps> = ({ route
           )}
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/screens/BiometricsPreferenceScreen/BiometricsPreferenceScreen.tsx

@@ -1,9 +1,8 @@
-import { ScrollView } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { FC } from 'react'
 
 import { AuthState, StoreState } from 'store/reducers'
-import { Box, ButtonTypesConstants, TextView, VAButton } from 'components'
+import { Box, ButtonTypesConstants, TextView, VAButton, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { getSupportedBiometricText } from 'utils/formattingUtils'
 import { setBiometricsPreference, setDisplayBiometricsPreferenceScreen } from 'store/actions'
@@ -30,7 +29,7 @@ const BiometricsPreferenceScreen: FC<SyncScreenProps> = () => {
   }
 
   return (
-    <ScrollView {...testIdProps('Biometrics-preference-page')}>
+    <VAScrollView {...testIdProps('Biometrics-preference-page')}>
       <Box mt={theme.dimensions.biometricsPreferenceMarginTop} mb={theme.dimensions.contentMarginBottom} mx={theme.dimensions.gutter}>
         <TextView variant="MobileBodyBold" accessibilityRole="header">
           {t('biometricsPreference.doYouWantToAllow', { biometricsText })}
@@ -55,7 +54,7 @@ const BiometricsPreferenceScreen: FC<SyncScreenProps> = () => {
           />
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/screens/ClaimsScreen/AppealDetailsScreen/AppealDetailsScreen.tsx

@@ -1,11 +1,10 @@
-import { ScrollView } from 'react-native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 import { filter, pluck } from 'underscore'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { FC, useEffect, useState } from 'react'
 
 import { AppealAttributesData, AppealData, AppealEventTypesConstants, AppealTypesConstants } from 'store/api/types'
-import { Box, ErrorComponent, LoadingComponent, SegmentedControl, TextArea, TextView } from 'components'
+import { Box, ErrorComponent, LoadingComponent, SegmentedControl, TextArea, TextView, VAScrollView } from 'components'
 import { ClaimsAndAppealsState, StoreState } from 'store/reducers'
 import { ClaimsStackParamList } from '../ClaimsStackScreens'
 import { NAMESPACE } from 'constants/namespaces'
@@ -87,7 +86,7 @@ const AppealDetailsScreen: FC<AppealDetailsScreenProps> = ({ route }) => {
   const formattedSubmittedDate = formatDateMMMMDDYYYY(getSubmittedDate())
 
   return (
-    <ScrollView {...testIdProps('Your-appeal: Appeal-details-page')}>
+    <VAScrollView {...testIdProps('Your-appeal: Appeal-details-page')}>
       <Box mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom}>
         <TextArea>
           <TextView variant="BitterBoldHeading" mb={theme.dimensions.condensedMarginBetween} accessibilityRole="header">
@@ -112,7 +111,7 @@ const AppealDetailsScreen: FC<AppealDetailsScreenProps> = ({ route }) => {
           {appeal && selectedTab === t('claimDetails.details') && <AppealDetails issues={getFilteredIssues()} />}
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }
 

VAMobile/src/screens/ClaimsScreen/ClaimDetailsScreen/ClaimDetailsScreen.tsx

@@ -1,10 +1,9 @@
-import { ScrollView } from 'react-native'
 import { StackScreenProps } from '@react-navigation/stack/lib/typescript/src/types'
 import { TFunction } from 'i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { FC, useEffect, useState } from 'react'
 
-import { Box, ErrorComponent, LoadingComponent, SegmentedControl, TextArea, TextView } from 'components'
+import { Box, ErrorComponent, LoadingComponent, SegmentedControl, TextArea, TextView, VAScrollView } from 'components'
 import { ClaimAttributesData, ClaimData } from 'store/api/types'
 import { ClaimsAndAppealsState, StoreState } from 'store/reducers'
 import { ClaimsStackParamList } from '../ClaimsStackScreens'
@@ -52,7 +51,7 @@ const ClaimDetailsScreen: FC<ClaimDetailsScreenProps> = ({ route }) => {
   const a11yHints = [t('claimDetails.viewYourClaim', { tabName: t('claimDetails.status') }), t('claimDetails.viewYourClaim', { tabName: t('claimDetails.details') })]
 
   return (
-    <ScrollView {...testIdProps('Your-claim: Claim-details-page')}>
+    <VAScrollView {...testIdProps('Your-claim: Claim-details-page')}>
       <Box mt={theme.dimensions.contentMarginTop} mb={theme.dimensions.contentMarginBottom}>
         <TextArea>
           <TextView variant="BitterBoldHeading" mb={theme.dimensions.condensedMarginBetween} accessibilityRole="header">
@@ -74,7 +73,7 @@ const ClaimDetailsScreen: FC<ClaimDetailsScreenProps> = ({ route }) => {
           {claim && selectedTab === t('claimDetails.details') && <ClaimDetails claim={claim} />}
         </Box>
       </Box>
-    </ScrollView>
+    </VAScrollView>
   )
 }