How to handle bottom tab bar visibility in react navigation v5?

Question

I am using react navigation v5. I have bottom tab navigator with each tab having stack of screens inside it.

Home-Tab1,Tab2,Tab3
Tab1(stack)-A,B,C
Tab2(stack)-D,E,F
Tab3(stack)-G,H

How to handle tab visibility on screens that are inside the stack .(i.e. index>0 or except stack initial route screen). In above scenario, I want to hide bottomtabbar on B,C,E,F,H screens.

I read https://reactnavigation.org/docs/hiding-tabbar-in-screens. But I am unable to understand its implementation with multiple stacks. Has anybody implemented it with react navigation 5?

Answer 1

The mixing of places in the documentation might be somewhat confusing. It is simply a BottomTabNavigator with the pages you want the tabBar to be visible on nested inside of StackNavigator which contains the rest of the screens.

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="A" component={A} />
      <Tab.Screen name="D" component={D} />
      <Tab.Screen name="G" component={G} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="B" component={B} />
      <Stack.Screen name="C" component={C} />
      <Stack.Screen name="E" component={E} />
      <Stack.Screen name="F" component={F} />
      <Stack.Screen name="H" component={H} />
    </Stack.Navigator>
  );
}

Here HomeTabs() is a bottomTabNavigator which is nested in a stackNavigator. and to navigate between the screens call:

navigation.navigate("navigatorName",{screen: "screenName"})