Hide parent's navigation header from the nested navigator

user_6654382 0
Viewed 1702

I'm developing my first react native app. I've an issue with the nested navigations in the app.

I've the following navigations:

  • Main App Navigator : createStackNavigator
    • Authentication Navigator : createStackNavigator
    • Bottom Bar Navigator : createBottomTabNavigator
      • Top Tab Navigator : createMaterialTopTabNavigator
        • My too nested Navigator : createStackNavigator

What i want ?

  • I'm trying to hide the BottomBar & TopTab Navigators headers form a screen in the last nested navigator.

What I did?

  • Ive tried to set the header as null in my nested nav, but thats hides the nested header not the parents headers.
  • I also tried to set the parents headers as nulls, but thats hide them from all screen.

I need to only hide them in this nested screen. Can I change the parents headers property from my nested React Class?enter image description here

react-navigation react-native-navigation react-native
1 Answers

Unfortunately, I didn't figure how to do that without using redux.

So I had to do a workaround.

I declared my Nested Navigator directly in the Main Navigator. "in the same level as Authentication & Bottom Bar Navigations" and set the header as null for this specific nav.

And then, navigate to that nested whenever i want.

Also, I had to add my custom icon to navigate the user back. because in our case there is no history in the new navigator in order to navigate back to.

so, i did like this:

static navigationOptions = ({ navigation }) => ({
headerLeft: (
  <Icon
    name="chevron-left"
    color="#fff"
    underlayColor="#4BA6F8"
    onPress={() => {
      const backAction = NavigationActions.back();
      navigation.dispatch(backAction);
    }}
  />
),

});

I know this is not the real answer for my question, but at least it solved my issue.

enter image description here

user_66543820
Related