Hide parent's navigation header from the nested navigator

Question

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?

Answer 1

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.