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 (ie 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

这对我有用：

headerMode: 'none'

Answer 4

I have the same problem in "react-navigation": "^3.0.9" . What is the solution please ?

My code :

    const MontanteStack = createStackNavigator(
    {
        Montante: {
            screen: MontanteTab,
            navigationOptions: ({navigation}) => ({
                header: null,
            }),
        },
        PronosticsDetails: {
            screen: PronosticsDetailsScreen,
            navigationOptions: ({navigation}) => ({
                headerMode: 'screen',
                headerTitle: 'Pronostics détails',
                headerStyle: {
                    backgroundColor: '#000000',
                    textAlign: 'center',
                },
                headerTintColor: '#ffffff',
                headerTitleStyle: {
                    color: '#c7943e',
                    textAlign: 'center',
                    alignSelf: 'center',
                    justifyContent: 'center',
                    flex: 1,
                }
            }),
        },
    },
    {
        initialRouteName: 'Montante',
    }
);

export default createAppContainer(MontanteStack);

I would like hide the the topbar and the tabs because they are displayed above the title of PronosticsDetailsScreen

Answer 5

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

static navigationOptions = {
    header: null
}

Answer 6

This works for me to hide the navigation:

static navigationOptions = {
    header: null
 };