Hide parent tab bar when inside specific screen of child navigator

Question

So I have a parent tab bar like so:

const Tab = createMaterialTopTabNavigator();

function App() {
return(
  <NavigationContainer>
    <Tab.Navigator>
      <Tab.Screen name="Explore" component={HomeScreen} />
      <Tab.Screen name="Entered" component={EnteredScreen} />
    </Tab.Navigator>
  </NavigationContainer>
)
}

And then within the HomeScreen is another nav:

const Stack = createNativeStackNavigator();


function HomeScreen() {
return(
<NavigationContainer
  independent={true}
>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreenList} />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Navigator>
</NavigationContainer>
)
}

When I go to the DetailsScreen my original Tab.Navigator is still present (as expected) - how do I have it hide when I move to this particular screen?

score 0 · Answer 1 · answered Jun 08 '22 at 18:30

This documentation should help.

From the documentation:

Sometimes we may want to hide the tab bar in specific screens in a native stack navigator nested in a tab navigator. Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this:

    function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

With this structure, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens.

But if we want to show the tab bar only on the Home, Feed and Notifications screens, but not on the Profile and 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:

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

After re-organizing the navigation structure, now if we navigate to the Profile or Settings screens, the tab bar won't be visible over the screen anymore.

Florin Dobre · Answer 2 · 2022-11-15T20:51:47.090

0

The simplest way would be to use navigation.getParent().setOptions or navigation.getParent().getParent().setOptions in that specific screen as described here:

https://stackoverflow.com/a/70153935/1979861

edited Nov 15 '22 at 20:51

answered Nov 14 '22 at 15:11

Florin Dobre

9,872
3
59
93

Hide parent tab bar when inside specific screen of child navigator

2 Answers2