Hide bottom navigation for inner screens in react navigation v5.x

Question

I am leveling up on react native and I am working on a project. So, I want to hide the bottom navigation on inners screens like

- Dashboard
--- home <- hide bottom navigation
--- moment <- hide bottom navigation
--- period <- hide bottom navigation
--- contact <- hide bottom navigation
- Calendar
- Notification
- User

I have tried using tabBarVisible: false on Dashboard screen options but it hides the bottom navigation on Dashboard screen instead of the inner screen. Please what is the best way to hide the bottom navigation on inner screens?

here is my navigation code:

BOTTOM NAVIGATION

const BottomNavigation = () => (
  <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
    <Tab.Screen
      name={ScreenName.dashboard}
      options={{tabBarLabel: 'Dashboard'}}
      component={HomeNavigation}
    />
    <Tab.Screen
      name={ScreenName.calendar}
      options={{
        tabBarLabel: 'Calendar',
      }}
      component={Calendar}
    />
    <Tab.Screen
      name={ScreenName.notification}
      options={{
        tabBarLabel: 'Notification',
      }}
      component={Notification}
    />
    <Tab.Screen
      name={ScreenName.user}
      options={{
        tabBarLabel: 'User',
      }}
      component={User}
    />
  </Tab.Navigator>
);

HOME NAVIGATION

const HomeNavigation = () => (
  <Stack.Navigator
    screenOptions={{
      title: null,
      headerStyle: {elevation: 0, shadowOpacity: 0},
    }}>
    <Stack.Screen
      name={ScreenName.home}
      component={Home}
      options={() => ({
        headerShown: false,
      })}
    />
    <Stack.Screen name={ScreenName.moment} component={Moment} />
    <Stack.Screen name={ScreenName.period} component={Period} />
    <Stack.Screen name={ScreenName.contact} component={Contact} />
  </Stack.Navigator>
);

create tabnavigator inside stack navigator not vice versa – Ashwith Saldanha Feb 20 '20 at 12:59 — Ashwith Saldanha, Feb 20 '20 at 12:59
@AshwithSaldanha Thanks alot this works. – Henry Okonkwo Feb 20 '20 at 18:16 — Henry Okonkwo, Feb 20 '20 at 18:16

score 1 · Accepted Answer · answered Feb 20 '20 at 16:01

1

You should put the bottom tab navigator in the first screen of the stack navigator instead of the other way around:

- Home
--- Dashboard
--- Calendar
--- Notification
--- User
- Moment
- Period
- Contact

This way when you push a new screen, it'll be above the bottom tab bar and the tab bar won't be visible.

https://reactnavigation.org/docs/en/nesting-navigators.html#parent-navigators-ui-is-rendered-on-top-of-child-navigator

answered Feb 20 '20 at 16:01

satya164

9,464
2
31
42

what do you mean? can you provide code? – me noob Apr 26 '22 at 20:58

score 0 · Answer 2 · answered Oct 27 '21 at 09:07

just on the Screen you want to hide the bar, set tabBarVisible: false.

<Tab.Screen
    name="InnerScreen"
    component={InnerScreen}
    options={{
      tabBarVisible: false, //like this
      tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
    }}
  />

Hide bottom navigation for inner screens in react navigation v5.x

2 Answers2