CODEWITHSUNDEEP
react-nativereact-navigation
Ken
Ken

Reputation: 1461

Hiding tab bar in specific screens React-Native

I read through the documentation on this specific question but I still don't quite understand it. Here is my scenario:

I have a BottomTabNavigator with three tabs: Home, Camera, and Profile. With my current setup I can switch between these screens and the TabBar shows up on each screen. However what I want is to have the same three tab items on the TabBar, but have the TabBar not show up in the Camera screen.

If my understanding is correct, the link I have attached only allows you to remove the TabBar from a screen if you remove that tab from the TabBar (eg I can only achieve what I want if I remove Camera from the TabBar but I want to keep the Camera tab in the TabBar).

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
        />
        <Tab.Screen
          name="Camera"
          component={CameraScreen}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

I tried:

options={{ tabBarVisable=false }}

but it didn't work either.

Upvotes: 0

Views: 471

Answers (1)

V&#225;clav Ryska
V&#225;clav Ryska

Reputation: 248

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';    


const getTabBarVisibility = (route) => {    

    const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
    const disabledScreens = ['CameraScreen'];
    
    if (disabledScreens.includes(routeName)) {
        return false;
    }
    
    return true;
};    

<Tab.Navigator 
        screenOptions={({route}) => ({            
            tabBarVisible: getTabBarVisibility(route)
        })
    >

Upvotes: 1

Related Questions