CODEWITHSUNDEEP
react-nativereact-navigation
Some Guy
Some Guy

Reputation: 13578

Use react-navigation without header

Is there a way to tell the react-navigation library that I don't want to use headers in all the screens in my app?

Rather than setting navigationOptions = { header: null, } in every single screen, is there some navigator level setting I could set just once?

Upvotes: 3

Views: 3142

Answers (4)

Pheng Sengvuthy
Pheng Sengvuthy

Reputation: 260

If you want to apply all screens of a stack you don't want to show header, just do this.

export const stackScreens = StackNavigator(
{ 
   Screen1: { screen: Screen1 },
   Screen2: { screen: Screen2 }
}, 
{ 
   navigationOptions : ({ navigation }) => ({
     header: null
   })
});

Upvotes: 0

Aravind S
Aravind S

Reputation: 2395

You have an option to hide the navigation area in all screen. Update your code like this.

export const Root = StackNavigator({
      Login: {
        screen: Home,
      },
    },{
      mode: 'modal',
      navigationOptions: {
             header: null//Will hide header for all screens of current stack navigator, 
       },
      initialRouteName: 'Home',
    })

Upvotes: 0

Raphael Estrada
Raphael Estrada

Reputation: 1149

Set it as null on the navigationOptions like so:

export const StackRouter = StackNavigator({

  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  },
  Screen3: {
    screen: Screen3,
  },
  Screen4: {
    screen: Screen4,
  }
},
{
  headerMode: 'float',
  navigationOptions:({navigation}) => ({
    header: null,
  }),

});

Upvotes: 3

nahoang
nahoang

Reputation: 2474

This is the way which help you modify the header of React Navigation.

    export default createStackNavigator({
     Home: {
       screen: HomeScreen
     },
     Login: {
       screen: LoginScreen
    }
   },
  {
   initialRouteName: 'Home',
   mode: 'modal',
   headerMode: 'none'
  })

Look at the code, you can see it has a object to configure everything you want in React Navigation.

Check this link out for understanding it.!

Cheer!

Upvotes: 7

Related Questions