5

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.

Mohamadamin
  • 564
  • 5
  • 16
Jia Hui Tan
  • 51
  • 1
  • 2

1 Answers1

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}} />
Mohamadamin
  • 564
  • 5
  • 16