Hide Custom Tab Bar On A Specific Screen In React Navigation 6

Question

I am writing a react native app with react-navigation 6 that has a custom tab navigation, inside of which I have multiple stacks for each tab.

Custom Bottom Tab with Stacks as Tabs:

<Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
  <Tab.Screen
    name={ROUTES.SPEAKER_STACK}
    component={SpeakerNavigator}
    options={{
      title: 'Speakers',
      tabBarLabel: 'Speakers',
      tabBarIcon: { activeIcon: 'mic-sharp', inActiveIcon: 'mic-outline' },
    }}
  />
</Tab.Navigator>

Speaker Navigator:

<Stack.Navigator initialRouteName={ROUTES.SPEAKERS}>
  <Stack.Screen name={ROUTES.SPEAKERS} component={Speakers} />
  <Stack.Screen name={ROUTES.SEND_MESSAGE} component={SendMessage} />
</Stack.Navigator>

CustomTab:

const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.tabBarContainer} shadow="3">
      <View style={styles.slidingTabContainer}>
        <Animated.View style={[styles.slidingTab, animatedTabStyles]} />
      </View>
      {state.routes.map((route, index) => {
        return (
          <Pressable
            key={index}
            style={{ flex: 1, alignItems: 'center' }}>
            <TabIcon
              tabIcon={tabBarIcon}
            />
          </Pressable>
        );
      })}
    </View>
  );
}

Problem:

I want to hide the <CustomTab /> on the Send Message screen since it is a chat screen.

Already Tried:

<Tab.Screen
  name={ROUTES.SPEAKER_STACK}
  component={SpeakerNavigator}
  options={({ route }) => {
    if (getFocusedRouteNameFromRoute(route) === 'Send Message') {
      return {
        tabBarVisible: false,
        tabBarStyle: { display: 'none' },
      };
    }
  }}
/>

I assume they don't work since my TabBar is a custom component.

If I can somehow get getFocusedRouteNameFromRoute(route) === 'Send Message' inside the CustomTab component, I will be able to hide it directly by setting tabBarContainer (View wrapper of my custom tab bar) to display: 'none'

I have also tried the same technique from inside the screen. Same result.

react-navigation suggests to change the app structure by placing TabNavigator inside StackNavigator. But my app doesn't allow that structure.

Answer 1

import { View, Text, TouchableOpacity, SafeAreaView } from "react-native";
import type { BottomTabBarProps as ReactNavigationBottomTabBarProps } from "@react-navigation/bottom-tabs";
import { hp } from "@src/components/responsive";
import { CallOutlineIcon, ChatOutlineIcon } from "@src/components/icons";
type BottomTabBarProps = ReactNavigationBottomTabBarProps;

export default function TabBar({
  state,
  descriptors,
  navigation,
}: BottomTabBarProps) {
  const focusedOptions = descriptors[state.routes[state.index].key].options;
  const { display } = focusedOptions?.tabBarStyle as {
    display: "none" | "flex";
  };
  // ! HIDE BOTTOM TAB SPECIFICALLY FOR CHAT SCREEN

  if (display === "none") {
    return null;
  }
// rest of the code
  return (
    <SafeAreaView>
     
   
    </SafeAreaView>
  );
}