How to hide a parent Stack Navigator Header only in certain screens in React Native

Question

As per title, I would like to hide the header of a parent stack navigator from a children component, this is because there are certain screens where I would like to keep the parent header and some screens where I would not.

I'm aware that one could simply set the header property to null in the parent Stack Navigator but is there any way I could change that property from a children component, during runtime?

Here's the hierarchy of the navigators:

ParentStackNavigator
|
|__TabNavigator
   |__Other Screen
   |__MainScreen (Stack Navigator)
      |
      |__ScreenWithHeader
      |__ScreenWithoutHeader
         

The challenge is to hide the header in ParentStackNavigator when I'm in ScreenWithoutHeader but not when I'm in ScreenWithHeader. One solution that I could think of is to wrap the entire thing with a context but I'm hopeful that there's a better way.

Serial

Answer 1

If you want to hide header in a stack-navigator you must do this:

<Stack.Navigator screenOptions={{headerShown: false}}>

And if you want to hide heade in one screen only you have to do like this:

<Stack.Screen name={screens.Home} component={Home} options={{headerShown: false}} />

Hunfredo

This does not answer the question being asked. – Hobgoblin