multiline header - React Native

Question

I have a React Native App.
I want to add a subtitle below my header.

Something like this

Header Code:

static navigationOptions = ({ navigation }) => {

  return {
      title: localizedTitle(),
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: <BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    />,
                    
      headerRight: (<View></View>),
    }
  }

How can I implement this multiline header?

Update:
I tried 2 ways and both are so frustrating.

1st method:
the back button and user details are not aligned. the back button is moved up.

static navigationOptions = ({ navigation }) => {
  return {
      title: localizedTitle(),
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: HAGo_isUndercareMode() ? HAGo_getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: (
                  <View>
                   <HAGo_BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    /> 
                    { 
                    HAGo_isUndercareMode() ?
                    <View >
                    <View style={{flexDirection: 'row',  backgroundColor:'#008A20', width:500, alignItems:'center'}}>
                    <Image style={{ width:40, height:40, marginRight:15}} source={require('../HAGo/default_userIcon.png')} />
                    <Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
                    </View>
                    </View>
                    : null
                     }
                  </View>
                  ),
      headerRight: (<View></View>),
    }
  }

2nd method:
not able to align them to the left.

 static navigationOptions = ({ navigation }) => {

    return {
        headerTitle: () =>
          <View>
              <Text style={{color: '#fff', fontSize:normalizeFontSize(18), fontWeight:'bold'}} >{localizedTitle()}</Text>
              <View style={{flexDirection: 'row', justifyContent: 'flex-start'}}>
              <Image style={{ width:40, height:40, marginRight:15}} source={require('../HAGo/default_userIcon.png')} />
              <Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
              </View>
          </View>,
        headerTintColor: '#fff',
        headerStyle: {
          backgroundColor: HAGo_isUndercareMode() ? HAGo_getUndercareColor() : 'rgb(255,0,0)'
        },
        headerTitleStyle: { 
          fontWeight: 'bold',
          textAlign: 'center',
          fontSize: normalizeFontSize(18),
          flex: 1
        },
        headerLeft: <HAGo_BackButton
                      accessible={false}
                      testID='LeftButton'
                      accessibilityLabel="headerLeftButton"
                      />,
                      
        headerRight: (<View></View>),
      }
    }

Which method makes sense?? Please help.

2nd Update:

static navigationOptions = ({ navigation }) => {
  return {
      title: localizedTitle(),
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: (
                  <View>
                    <View style={{paddingTop: isUndercareMode() ? 45 : 0}} >
                   <BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    /> 
                    </View>
                    { 
                    isUndercareMode() ?
                    <Undercare />
                    : null
                     }
                  </View>
                  ),
      headerRight: (<View></View>),
    }
  }

Undercare component:

export default class Undercare extends React.Component {
    render() {
        return (
           <View>
               <View style={{flexDirection: 'row', width:500, height:58, alignItems:'center', paddingLeft:25, backgroundColor:'#008A20', paddingTop:15, paddingBottom:20, backgroundColor:'#008A20'}}>
                    <Image style={{ width:50, height:50, marginRight:20}} source={require('../HAGo/default_userIcon.png')} />
                    <Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
                </View>
           </View>
        )
    }
}

The back button is not correctly aligned with Notification centre title :/

Answer 1

You can create a custom header component and pass that as an option in order to overwrite the default header.

See this snack for a working example: https://snack.expo.io/@zayco/header-styles_custom

Replace all of the old header options with header

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        header: () => renderHeader()
        }}
    />
  </Stack.Navigator>
</NavigationContainer>

Add the function to render the custom header

const renderHeader = () => (
 <View style={styles.header}>
   <View style={styles.headerTop}>
     <View style={styles.headerLeft}>
       <Text>Back</Text>
     </View>
     <View style={styles.headerCenter}>
       <Text style={styles.headerTitle}>Notification Center</Text>
     </View>
     <View style={styles.headerRight} />
   </View>
   <View style={styles.subHeader}>
    <View style={styles.subHeaderLeft}>
     <Text>ICON</Text>
    </View>
    <View style={styles.subHeaderCenter}>
     <Text style={styles.subHeaderName}>CHUI, Tai Hung</Text>
    </View>
   </View>
 </View>
)

Add the styles used by the custom header. You can play around with the styles to fit your needs.

const styles = {
 header: {
  flex: 0,
  backgroundColor: 'green',
  marginTop: Platform.OS == "ios" ? 20 : 0, // only for IOS to give StatusBar Space
  padding: 10,
 },
 headerTop: {
  flexDirection: 'row',
 },
 headerLeft: {
  flex: 1,
  backgroundColor: 'red',
  justifyContent: 'center',
 },
 headerCenter: {
  flex: 6,
  alignItems: 'center',
 },
 headerTitle: {
  fontSize: 18,
  color: 'white',
  fontWeight: 'bold',
 },
  headerRight: {
  flex: 1,
 },
 subHeader: {
  flexDirection: 'row',
  paddingTop: 10,
 },
 subHeaderLeft: {
  backgroundColor: 'yellow',
  padding: 5,
 },
 subHeaderCenter: {
  justifyContent: 'center',
  alignItems: 'center',
 },
 subHeaderName: {
  color: 'white',
  marginLeft: 10,
 }
}

Answer 2

instead of using title use headerTitle in which you can add a component instead of a string.

static navigationOptions = ({ navigation }) => {

  return {
      headerTitle: () =>
        <View>
            <Text>{localizedTitle()}</Text>
            <Text>subtitle</Text>
        </View>,
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
      },
      headerTitleStyle: { 
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: normalizeFontSize(18),
        flex: 1
      },
      headerLeft: <BackButton
                    accessible={false}
                    testID='LeftButton'
                    accessibilityLabel="headerLeftButton"
                    />,
                    
      headerRight: (<View></View>),
    }
  }