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

Question

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

Answer 1

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