Can't hide in specific screen

[alz10]

Stack Navigator (This should hide the Bottom Tab Bar when focused on "Home", "Levels" screens unfortunately it didn't). I only want to show the bottom-tab on MainScreen.

I think it did hide the @react-navigation/bottom-tabs but not the custom tab. I tried removing tabBar and it did hide actually

const Navigation = ({ navigation, route }) => {
  useLayoutEffect(() => {
    const tabHiddenRoutes = ['Home', 'Levels'];

    if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
      navigation.setOptions({ tabBarStyle: { display: 'none' } });
    } else {
      navigation.setOptions({ tabBarStyle: { display: 'flex' } });
    }
  }, [navigation, route]);

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="MainScreen" component={MainScreen} />
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Levels" component={Levels} />
    </Stack.Navigator>
  );
};

<Tab.Navigator
      backBehavior="none"
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.wrongLetter,
        tabBarInactiveTintColor: colors.textWhite,
        tabBarActiveBackgroundColor: colors.wrongLetter,
      }}
      tabBar={props => (
        <BottomFabBar
          {...props}
          mode="default"
          focusedButtonStyle={{
            shadowOffset: { width: 0, height: 7 },
            shadowColor: '#000',
            shadowOpacity: 0.41,
            shadowRadius: 9.11,
            elevation: 10,
          }}
          bottomBarContainerStyle={{
            position: 'absolute',
            height: 75,
            bottom: 0,
            left: 0,
            right: 0,
          }}
        />
      )}
    >
       <Tab.Screen .... />
       <Tab.Screen .... />
       <Tab.Screen .... />
       <Tab.Screen .... />
       <Tab.Screen .... />
    </Tab.Navigator>

[Jm-Zion]

Hi, thank you for the feedback, i'll take a look on the weekend 🙂

[Jm-Zion]

Should work now :)