Remove top navigation bar for certain screens

Jed picture Jed · Sep 6, 2017 · Viewed 24.1k times · Source

Is there a way of removing the top navigation bar for specific screens only? I am using react-navigation.

I already tried the following:

header: { visible: false }

but it only hides the navbar. The space of the navbar is still cannot be used.

Thanks in advance!

Answer

rabbit87 picture rabbit87 · Sep 6, 2017

This is an example of how I did mine using StackNavigator:

const stackN = StackNavigator({
    Screen1 : {
      screen: Screen1,
      navigationOptions: {
        header: null,
      }
    },
    Home : {
      screen: HomeScreen,
      navigationOptions: ({navigation}) => ({
        title: 'Home',
        headerStyle: styles.headerStyle,
        headerTitle: <Text>Home</Text>,
        headerLeft : null,
        headerRight: null,
      })
    }, 
}, {headerMode: 'screen'})

So every screen have their own navigationOptions instead. There may be a way to share navigationOptions, but I haven't looked into it at the moment.