React Navigation V5 Hide Bottom Tab in Specific Screens

I am creating a React Native app using React Navigation version 5, and I have a bottom tab navigator with a stack navigator nested inside each screen of the tab navigator. I only want the bottom tab bar to show when on the first page of each stack navigator. Here is a snack that displays my app’s basic navigation functionality: https://snack.expo.io/@brforest/hide-tab-1. Per the bottom tab documentation, there is a tabBarVisible options attribute, but:

Hiding tab bar can cause glitches and jumpy behavior. We recommend the tab navigator inside of a stack navigator instead.

The guide for nesting the tab navigator inside the stack navigator is here. I tried using this method, but I could only get it to work if I had only one stack navigator, but I need to have a stack navigator for each of the tab screens. Here is my (unsuccessful) attempt to use this method on the same app from the previous snack: https://snack.expo.io/@brforest/hide-tab-2. In this, I nested multiple tab navigators within a single stack navigator in an attempt to extrapolate the method suggested in the documentation. As you can see in this snack, the navigation within the stack does not work anymore, but the tabs still work.

To me, it makes much more sense to nest the stack navigators in the tab navigator (like I have in the first snack) than to try to nest the same tab navigator in a large stack navigators. However, I want to follow the documentation and find a way that does not cause “glitchy and jumpy behavior.” Any suggestions on how I should achieve my desired navigation functionality?

Thanks!

Answer

Like you mentioned if you only want the first screens in each stack to show the bottom tab bar then I suggest you use the second approach. Create a base stack navigator with the first screen being the tab navigator itself :

const TabScreens = ({navigation}) => { // Tab navigator with only the screens that require bottom tab bar
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: '#e91e63',
      }}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
        }}
      />
      <Tab.Screen
        name="Welcome"
        component={Welcome}
        options={{
          tabBarLabel: 'Welcome',
        }}
      />
    </Tab.Navigator>
  );
};

After creating the tab navigator, in the main renderer use:

    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Stack"
          component={TabScreens}
        />
        <Stack.Screen             // Add any number of extra screens that do not require the bottom tab here
         name="Other screen 1"
         component={OtherScreen1} />
        <Stack.Screen             
         name="Other screen 2"
         component={OtherScreen2} />
      </Stack.Navigator>
    </NavigationContainer>

This way you don’t have to fiddle with the bottom tab component. You can also navigate to and from any screens that part of the base stack navigator and those that are part of the Tab Navigator. The only caveat here is all the screens apart from the screens in the tab navigator will be mounted and unmounted each time you navigate there and back.