React Native - React Navigation v6 Tab Bar Hidden

gistfile1.txt

import {useLayoutEffect} from 'react';
import {
  useNavigation,
  useRoute,
  getFocusedRouteNameFromRoute,
} from '@react-navigation/native';

export function useTabBarHidden(
  hiddenTabRoutesArray: string[],
  fallbackRoute: string | undefined,
) {
  const navigation = useNavigation();

  const route = useRoute();

  useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route) ?? fallbackRoute;

    const includesHiddenTabRoutes = routeName
      ? hiddenTabRoutesArray.includes(routeName)
      : false;

    navigation.setOptions({
      tabBarStyle: {
        display: includesHiddenTabRoutes ? 'none' : 'flex',
      },
    });
  }, [navigation, route, fallbackRoute, hiddenTabRoutesArray]);
}