CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-v5react-navigation-stackreact-navigation-bottom-tab
bansalakshay8
bansalakshay8

Reputation: 43

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

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?

Upvotes: 0

Views: 365

Answers (1)

Erik Dreifaldt
Erik Dreifaldt

Reputation: 783

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"})

Upvotes: 1

Related Questions