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

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