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?

Answer 1

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

Answer 2

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

static navigationOptions = {
    header: null
}

Answer 3

This worked for me:

headerMode: 'none'