CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
jeanpaul62
jeanpaul62

Reputation: 10561

React-Navigation: Cannot hide header with nested navigators

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:

screenshot

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?

Upvotes: 11

Views: 8042

Answers (5)

jeanpaul62
jeanpaul62

Reputation: 10561

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

Upvotes: 19

h--n
h--n

Reputation: 6023

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

static navigationOptions = {
    header: null
}

Upvotes: 11

Atif Mukhtiar
Atif Mukhtiar

Reputation: 1246

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

static navigationOptions = {
    header: null
}

Upvotes: 1

ramkrishna samanta
ramkrishna samanta

Reputation: 11

This works for me to hide the navigation:

static navigationOptions = {
    header: null
 };

Upvotes: 1

Peter
Peter

Reputation: 39

This worked for me:

headerMode: 'none'

Upvotes: 3

Related Questions