I am using official navigation reaction to handle my navigation. I have one main TabNavigator for all applications with two tabs (called HitchhikingMapNavigator
and SettingsNavigator
below), and each tab has invested 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 visibility of the headers in false everywhere, even in my view HitchhikingMapViewContainer
:
class HitchhikingMapView extends React.Component {
static navigationOptions = {
title: 'Map',
header: {
visible: false,
},
}
Still, the title bar is still visible:
If I do not insert navigators (i.e. if I put this code, skipping nested):
export default AppNavigator = TabNavigator({
hitchhikingMap: { screen: HitchhikingMapViewContainer },
settings: { screen: SettingsNavigator }
});
then the title will be correctly hidden.
So, the conclusion: I cannot make the title invisible when I have two nested navigators. Any ideas?