Use react-navigation without header

Question

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?

I think it's not possible, because when you create new screen in `StackNavigation` you need to tell the screen that you don't want to show the header for the screen itself — flix, Jul 26 '18 at 02:29
Possible duplicate of [Hide header in stack navigator React navigation](https://stackoverflow.com/questions/44701245/hide-header-in-stack-navigator-react-navigation) — programmerJavaPL, Jul 26 '18 at 14:23
Check out the above linked possible duplicate for an up to date solution, or go to https://reactnavigation.org/docs/stack-navigator/#headershown — Wu Wei, Jan 22 '23 at 19:57

score 7 · Answer 1 · answered Jul 26 '18 at 02:44

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!

Raphael Estrada · Accepted Answer · 2018-07-26T03:03:37.993

3

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,
  }),

});

edited Jul 26 '18 at 03:03

answered Jul 26 '18 at 02:23

Raphael Estrada

1,109
11
18

score 0 · Answer 3 · answered Jul 26 '18 at 03:38

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',
    })

score 0 · Answer 4 · answered Jul 26 '18 at 08:19

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
   })
});

Use react-navigation without header

4 Answers4