3

I'm trying to implement headers for components using a react-navigation drawer navigator, but using the createDrawerNavigator() method causes the header to be removed completely.

Using the official react-navigation v3 'simple-header-button' snack (at https://snack.expo.io/@react-navigation/simple-header-button-v3), the createStackNavigator() method renders the header fine, but just changing createStackNavigator() to createDrawerNavigator() removes it.

Not helpful that the documentation hasn't been changed from v2 to reflect any potential changes that are required that may be causing this, but clearly the method of applying headers is not the same between the two navigation approaches.

(Not included my own code because the official snack demonstrates this issue).

1 Answers1

0

If you want to add a drawerNavigator inside a stackNavigator, or anything in general, the easiest way to implement headers and customize them is to use the Header component by react-native-elements

Just add the component to each screen that you want the header on. Then you add header:null to your stackNavigator because otherwise two headers will be shown.

Example below:

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>
kivul
  • 1,148
  • 13
  • 28
  • This doesn't really solve the issue as to why the header doesn't show as it should with react-navigation. This should be handled by navigator configuration, and was the approach in question in my post. –  Feb 28 '19 at 11:01