React-Navigation: Cannot hide header with nested navigators

Question

I'm using the official react-navigation to handle my navigation. I have one main TabNavigator for the whole app with two tabs (called HitchhikingMapNavigator and SettingsNavigator below), and each tab has a nested StackNavigator:

const HitchhikingMapNavigator = StackNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  spotDetails: { screen: SpotDetailsViewContainer }
}, {
  navigationOptions: {
    header: {
      visible: false
    }
  }
});

const SettingsNavigator = StackNavigator({
  // some other routes
});

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapNavigator },
  settings: { screen: SettingsNavigator }
}, {
  navigationOptions: {
    header: {
      visible: false,
    },
 },
});

As you can see, I put the headers' visilibility to false everywhere, even in my HitchhikingMapViewContainer's view:

class HitchhikingMapView extends React.Component {

  static navigationOptions = {
    title: 'Map',
    header: {
      visible: false,
    },
    //...other options
  }

And yet, the header bar is still visible:

If I don't nest the navigators (i.e. if I put this code, skipping the nested one):

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  settings: { screen: SettingsNavigator }
});

then the header is correctly hidden.

So conclusion: I can't make a header not visible when I have two nested navigators. Any ideas?

Donut · Accepted Answer · 2018-09-07 15:01:06Z

19

For those who are still looking for the answer, I will post it here.

So two solutions:

1st solution: use headerMode: 'none' in the StackNavigator. This will remove the header from ALL screens in the StackNavigator

2nd solution: use headerMode: 'screen' in the StackNavigator and add header: { visible: false } in the navigationOptions of the screens where you want to hide the header.

More info can be found here: https://reactnavigation.org/docs/en/stack-navigator.html

edited Sep 7, 2018 at 15:01

Donut

113k20 gold badges136 silver badges147 bronze badges

answered Apr 5, 2017 at 12:23

jeanpaul62

10.7k15 gold badges60 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrei Beziazychnyi Over a year ago

As for React Navigation 1.0.0-beta.11 header : { visible : false} doesn't work. Use header : null instead.

David Schumann · Accepted Answer · 2018-04-04 10:02:54Z

11

Starting from v1.0.0-beta.9, use the following,

static navigationOptions = {
    header: null
}

edited Apr 4, 2018 at 10:02

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered May 30, 2017 at 2:50

h--n

6,0514 gold badges34 silver badges33 bronze badges

Comments

David Schumann · Accepted Answer · 2018-04-04 09:10:20Z

3

This worked for me:

headerMode: 'none'

edited Apr 4, 2018 at 9:10

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Feb 24, 2017 at 19:49

Peter

392 bronze badges

3 Comments

Iliyass Hamza Over a year ago

doesn't work for me in "react-navigation": "^1.0.0-beta.7"

Daniel Arenas Over a year ago

I have "react-navigation": "^1.0.0-beta.9" and the method -> static navigationOptions = { header: false } work for me.

Guillaume Munsch Over a year ago

@DanielArenas You're my hero dude

David Schumann · Accepted Answer · 2018-04-04 09:32:17Z

1

This works for me to hide the navigation:

static navigationOptions = {
    header: null
 };

edited Apr 4, 2018 at 9:32

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Aug 9, 2017 at 8:03

ramkrishna samanta

111 bronze badge

Comments

David Schumann · Accepted Answer · 2018-04-04 09:47:26Z

1

This Worked for me, i am working on android side in react native version 0.45

static navigationOptions = {
    header: null
}

edited Apr 4, 2018 at 9:47

David Schumann

15k13 gold badges83 silver badges106 bronze badges

answered Jun 13, 2017 at 20:53

Atif Mukhtiar

1,25611 silver badges11 bronze badges

Collectives™ on Stack Overflow

React-Navigation: Cannot hide header with nested navigators

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related