HeaderTitle

Common component used for the navigation header title

Properties

Name	Type	Default Value	Required	Description
focusRef	Ref<View>		No	ref for this component
headerTitle	string		No	sets the header title
accessible	boolean	true	No	sets if it is accessible
testID	string		No	sets the test id
accessabilityLabel	string		No	sets the accessibility label

Example

How to use the HeaderTitle component

useEffect(() => {
    navigation.setOptions({
      // using react-navigation internal HeaderTitle component to easily maintain font and styling while being able to add an accessibilityLabel
      headerTitle: (header) => <HeaderTitle {...testIdProps('contactVA.title.a11yLabel')} headerTitle={header.children} />,
    })
})

Source Code

Full code for the HeaderTitle component

import React, { FC, Ref } from 'react'
import { StyleSheet, View } from 'react-native'

import { TextView } from 'components'
import { useTheme } from 'utils/hooks'

export type HeaderTitleProps = {
  /** ref for this component*/
  focusRef?: Ref<View>
  /**sets the header title*/
  headerTitle?: string
  /** sets if it is accessible*/
  accessible?: boolean
  /** sets the test id*/
  testID?: string
  /**sets the accessibility label*/
  accessabilityLabel?: string
}

/**Common component used for the navigation header title*/
const HeaderTitle: FC<HeaderTitleProps> = ({
  focusRef,
  headerTitle,
  testID,
  accessabilityLabel,
  accessible = true,
}) => {
  const {
    dimensions: { headerHeight },
  } = useTheme()

  const combinestyle = StyleSheet.flatten([{ height: headerHeight }, defaultStyle.headerText])
  return (
    <View
      ref={focusRef}
      accessibilityRole="header"
      accessible={accessible}
      style={combinestyle}
      testID={testID}
      accessibilityLabel={accessabilityLabel}>
      <TextView accessible={false} importantForAccessibility={'no'} color={'primaryContrast'} allowFontScaling={false}>
        {headerTitle}
      </TextView>
    </View>
  )
}

const defaultStyle = StyleSheet.create({
  headerText: {
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'row',
  },
})
export default HeaderTitle

Accessibility