CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-v5
Henry Okonkwo
Henry Okonkwo

Reputation: 373

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

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>
);

Upvotes: 3

Views: 3347

Answers (2)

shiraz27
shiraz27

Reputation: 2656

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
    }}
  />

Upvotes: 0

satya164
satya164

Reputation: 10152

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

Upvotes: 1

Related Questions