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

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

That's how I made it.

I was looking for a way to hide the tabBar in all my screens on ProductsRoutes, except for the Home screen.(the initial route on the ProductsRoutes Navigator)

Here's the ProductsNavigator:

const ProductsRoutes = (): JSX.Element => {
  return (
    <Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
    >
      <Screen name="Home" component={Home} />
      <Screen name="Details" component={Details} />
      <Screen name="Cart" component={Cart} />
      <Screen name="Catalog" component={Catalog} />
      <Screen name="Sales" component={Sales} />
      <Screen name="Favorites" component={Favorites} />
    </Navigator>
  );
};

On my TabRoutes I'm using

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

to know which screen on ProductsNavigator is the Home screen and which one is not. Based on that condition I can set display:'none' or 'display:'flex' to the tabBarStyle prop on Screen props:

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const TabRoutes = (): JSX.Element => {
  return (
    <Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Screen
        name="Store"
        component={ProductsRoutes}
        options={({ route }) => {
          const focusedRouteName = getFocusedRouteNameFromRoute(route);
          if (focusedRouteName === 'Home') {
            return {
              tabBarStyle: { display: 'flex' },
            };
          }

          return {
            tabBarStyle: { display: 'none' },
          };
        }}
      />
    </Navigator>
  );
};

Hope this helps you in some way

var scroll = 0; // at top

const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
    let contentOffsetY = e.nativeEvent.contentOffset.y;
    let diff = contentOffsetY - scroll;
    if (diff < 0) {
      navigation.setOptions({tabBarStyle: {display: 'flex'}});
    } else {
      navigation.setOptions({tabBarStyle: {display: 'none'}});
    }
    scroll = contentOffsetY;
  };

pass this to onScroll of any scrollview component

keyword is call setOptions and set tabBarStyle to {display:'none'}

at first, we set id on the parent navigator like

 <Tab.Navigator
      id="tabs"
      tabBar={props => <FooterTabs {...props} style={{display: 'flex'}} />} //<-- add a style with display:flex means tabbar is visible by default
      >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Chat" component={ChatScreen} />
    </Tab.Navigator>

suppose we wanna hide the tabbar in chatscreen

and in chatscreen, key code like this

const ChatScreen = ({navigation}) => {
  useEffect(() => {
    navigation.getParent('tabs').setOptions({tabBarStyle: {display: 'none'}});
    return ()=>{
    //when leave this screen, and the hooks disposed, we set tabBarStyle to {}, means we will use the default style defined above, that is display:'flex'
 
      navigation.getParent('tabs').setOptions({tabBarStyle: {}});
    };
  }, [navigation]);
...

and you may noticed the tabbar in root tab navigator is a custom component, so inside FooterTabs, key code is like this

const FooterTabs = props => {
  const {state, navigation, descriptors, insets, style} = props;
  const focusedRoute = state.routes[state.index];
  const focusedDescriptor = descriptors[focusedRoute.key];
  const focusedOptions = focusedDescriptor.options;

  const {
    tabBarShowLabel,
    tabBarHideOnKeyboard = false,
    tabBarVisibilityAnimationConfig,
    tabBarStyle, //<-- this is get from options,which we set from sub screens 
    tabBarBackground,
    tabBarActiveTintColor,
    tabBarInactiveTintColor,
    tabBarActiveBackgroundColor,
    tabBarInactiveBackgroundColor,
  } = focusedOptions;

  return (
    <HStack
      style={{...props.style, ...tabBarStyle}} //<-- we set the style over here, so when in some specific screen set tabbarstyle to override the display property to 'none', can final make tabbar hidden
      ...

this above code is get from official bottom tabbar component