Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 816
Jed Avatar asked Sep 06 '17 02:09

Jed


People also ask

How do I get rid of the top navigation bar?

Use navigationOptions: { headerShown: false } instead of navigationOptions: { header: null } to remove the top navigation bar. Save this answer.

How do I get rid of the header on a Navigator tab?

x) add this code snipet "options={{headerShown: false}}" in "<Tab. Screen />". It will delete header of each tab you add into. Save this answer.

How do I remove the top bar in react native?

React Native StatusBar Props It is used to hide and show the status bar. By default, it is false. If hidden = {false} it is visible, if hidden = {true}, it hide the status bar.


1 Answers

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.

like image 197
rabbit87 Avatar answered Oct 12 '22 23:10

rabbit87