Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens:
Settings, and your navigation structure looks like this:
With this structure, when we navigate to the
Settings screen, the tab bar will still stay visible over those screens.
But if we want to show the tab bar only on the
Notifications screens, but not on the
Settings screens, we'll need to change the navigation structure. The easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator:
After re-organizing the navigation structure, now if we navigate to the
Settings screens, the tab bar won't be visible over the screen anymore.
Some tab navigators such as bottom tab navigator also have a
tabBarVisible option which can be used to hide the tab bar based on instructions in the Screen options resolution guide. However, we don't recommend using it since showing/hiding the tab bar mid-navigation can affect the animation of the stack navigator causing glitchy behaviour.