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.
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}} />