LargeNavButton
- Properties
- Example
- Source Code
- Accessibility
Name | Type | Default Value | Required | Description |
---|---|---|---|---|
title | string | Yes | string for header and used to create testID for accessibility | |
subText | string | No | string secondary text that seats on the second row | |
subTextA11yLabel | string | No | a11y string secondary text that seats on the second row | |
a11yHint | string | No | string for accessibility hint | |
onPress | () => void | Yes | function to be called when press occurs | |
showLoading | boolean | No | Show loading animation in place of subtext | |
testID | string | No | Optional test ID for button |
How to use the LargeNavButton component
<LargeNavButton
title={'appointments.title'}
subText={'appointments.subText'}
a11yHint={'appointments.a11yHint'}
onPress={() => {}}
/>
Full code for the LargeNavButton component
import React, { FC } from 'react'
import ContentLoader, { Rect } from 'react-content-loader/native'
import { useTranslation } from 'react-i18next'
import { Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
import { Box, TextView, VAIcon } from 'components'
import { NAMESPACE } from 'constants/namespaces'
import { a11yHintProp } from 'utils/accessibility'
import { useTheme } from 'utils/hooks'
import colors from '../styles/themes/VAColors'
const SkeletonLoader = () => {
const theme = useTheme()
return (
<ContentLoader
backgroundColor={theme.colors.background.skeletonLoader}
foregroundColor={theme.colors.background.skeletonLoaderSecondary}
speed={0.6}
width="150"
height="10">
<Rect width="100%" height="25" />
</ContentLoader>
)
}
interface HomeNavButtonProps {
/**string for header and used to create testID for accessibility*/
title: string
/**string secondary text that seats on the second row */
subText?: string
/**a11y string secondary text that seats on the second row */
subTextA11yLabel?: string
/**string for accessibility hint */
a11yHint?: string
/**function to be called when press occurs */
onPress: () => void
/** Show loading animation in place of subtext */
showLoading?: boolean
/** Optional test ID for button */
testID?: string
}
/**
* Reusable large navigation button
* @returns LargeNavButton component
*/
const LargeNavButton: FC<HomeNavButtonProps> = ({
title,
subText,
a11yHint,
onPress,
showLoading,
testID,
}: HomeNavButtonProps) => {
const theme = useTheme()
const { t } = useTranslation(NAMESPACE.COMMON)
const pressableStyle = ({ pressed }: PressableStateCallbackType): ViewStyle => ({
width: '100%',
backgroundColor: pressed ? theme.colors.background.listActive : theme.colors.background.textBox,
paddingVertical: theme.dimensions.cardPadding,
paddingHorizontal: theme.dimensions.buttonPadding,
marginBottom: theme.dimensions.condensedMarginBetween,
shadowColor: colors.black,
...Platform.select({
ios: {
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
},
android: {
elevation: 2,
},
}),
})
const accessibilityLabel = `${title} ${showLoading ? t('loadingActivity') : subText || ''}`.trim()
return (
<Pressable
style={pressableStyle}
onPress={onPress}
accessible={true}
accessibilityRole={'link'}
testID={testID}
accessibilityLabel={accessibilityLabel}
{...a11yHintProp(a11yHint || '')}>
<Box flexDirection="row">
<Box flex={1}>
<TextView variant="LargeNavButton">{title}</TextView>
{showLoading ? (
<TextView mt={30} flexDirection={'row'}>
<SkeletonLoader />
</TextView>
) : subText ? (
<TextView mt={20} variant={'LargeNavSubtext'}>
{subText}
</TextView>
) : (
<></>
)}
</Box>
<VAIcon
flexDirection="row"
alignItems="flex-end"
width={24}
height={24}
name="RightArrowInCircle"
fill={theme.colors.icon.largeNavButton}
fill2={theme.colors.icon.transparent}
ml={theme.dimensions.listItemDecoratorMarginLeft}
preventScaling={true}
/>
</Box>
</Pressable>
)
}
export default LargeNavButton