react-nativereact-navigationreact-navigation-v6

How to hide tabBar in specific Screen in React Navigation 6?


How to hide tabbar in specific screen in react-navigation 6 ... Without changing navigation structure as it's the only option available in the docs here


Solution

  • Sometimes I used this approach

        import { getFocusedRouteNameFromRoute } from ‘@react-navigation/native’;
       
    
         export const MainNavigator = () => {
          const getTabBarVisibility = (route) => {
            const routeName = getFocusedRouteNameFromRoute(route);
            const hideOnScreens = [SCREENS.REVIEW_ORDER, SCREENS.ORDER_PAYMENT]; // put here name of screen where you want to hide tabBar
            return hideOnScreens.indexOf(routeName) <= -1;
          };
          return (
            <Tab.Navigator>
              <Tab.Screen
                name={SCREENS.ORDER}
                component={OrderNavigator}
                options={({ route }) => ({
                  tabBarVisible: getTabBarVisibility(route),
                })}
              />
              <Tab.Screen name={SCREENS.REWARDS} component={SweetRewardsNavigator} />
              <Tab.Screen name={SCREENS.MY_ACCOUNT} component={MyAccountNavigator} />
            </Tab.Navigator>
          );
        };