How to hide tabbar in specific screen in react-navigation 6
... Without changing navigation structure as it's the only option available in the docs here
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>
);
};