react-nativereact-navigation

Remove top navigation bar for certain screens


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!


Solution

  • 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.