How to hide bottom navigation bar on a specific screen in react native?

You need to specify for each TabBar screen or stack for which you need to hide tabbar,

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
        navigationOptions:()=>{
          return {
            tabBarVisible:false,
          };
       }
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

I've traversed the internet like never before to find a solution for this problem as the provided solution by the docs did not work in the slightest.

I had the following navigational Set-Up:

• Bottom Tabs
  • A (NativeStack)
    • 1 (Screen)
    • 2 (Screen)
    • 3 (Screen)
  • B (NativeStack)
  • C (NativeStack)

I wanted to hide the bottom bar in Screen 1. What finally did the trick was the following snippet in the corresponding screen:

  useEffect(() => {
    navigation.getParent()?.setOptions({
      tabBarStyle: {
        display: "none"
      }
    });
    return () => navigation.getParent()?.setOptions({
      tabBarStyle: undefined
    });
  }, [navigation]);

The effect is run when the navigation prop updates and with that implicitly after the screen is being opened. With getParent() I get the bottom tabs navigator and can set the options with setOptions(...). To bring the bottom tabs back one has to manually set the options. I solved this by returning the method that resets the tabBarStyle in the call of useEffect(). This call is being made when it's time to clean-up, meaning that it will run as soon as the screen is being unmounted.

May this save same of you of the desperation I had to go through.

In React Navigation V6 add display: none in options under tabBarStyle. Add tabBarButton: () => null, to disable icon in Tab.

<Stack.Screen
    name="Add Product"
    component={AddProduct}
    options={() => ({
      tabBarStyle: {
        display: "none",
      },
      tabBarButton: () => null,
    })}
  />

on v5 you can modify options using a function and default arg navigation.:

<BottomTab.Screen
      name="Explore"
      component={Explore}
      options={({ navigation }) => {
        const { routes, index } = navigation.dangerouslyGetState();
        const { state: exploreState } = routes[index];
        let tabBarVisible = true;
        if (exploreState) {
          const { routes: exploreRoutes, index: exploreIndex } = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        }
        return {
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="search1" color={color} size={size} />
          ),
        };
      }}
    />

see my answer: https://stackoverflow.com/a/64042879/5288560

Since react-navigation 5 is now being used, the above solution doesn't work anymore.

For React-Navigation 5, refer to this link.

Just setting the tabBarStyle to none doesn't work for me, I needed to use the property tabBarVisible too, if using hooks you can do something like that:

export function useHideBottomBar() {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' }, tabBarVisible: false });
        return () =>
            navigation.getParent()?.setOptions({ tabBarStyle: undefined, tabBarVisible: undefined });
    }, [navigation]);
}

In React navigation 5+ I used the following approach to hide a tab bar on a specific screen which was inside a stack navigator of a tab screen. In my tab navigator containing file I made a function, and then set the options property using the function which will trigger dynamically.

function getIsTabBarShown(route) {
    const routeName = getFocusedRouteNameFromRoute(route) ?? routes.DASHBOARD;

    switch (routeName) {
        case routes.MEMBERDETAILS:
            return false;
        default:
            return true;
    }
}

This function will return false when user would go to MemberDetails Page which is inside MemberNavigator Stack.

<Tab.Screen 
    name="MemberTab"
    component={MemberNavigator}
    options={({ route }) => ({
        title: 'Members',
        tabBarVisible: getIsTabBarShown(route),
        tabBarIcon: ({ color, size }) =>
        <MaterialCommunityIcons name="account-group" color={color} 
   size={size} />
})} />

Here is the official docs to learn more click here.

Refer to the documentation by clicking here

After searching and trying a lot of methods I changed the top element View to Modal then hid bottombar, because modal can be upper bottom bar. It's not the best but still useful.

<View>
  //code block
</View> 

to->
         
<Modal animationType='fade' transparent={false} visible={true}>
   /code block
</Modal>

In Version 6 this worked for me:

To hide the bottom tab navigator from the screen:

navigation.getParent()?.setOptions({tabBarStyle: {display: 'none'}});

To show the bottom tab navigator from the screen:

navigation.getParent()?.setOptions({tabBarStyle: {display: 'flex'}});

just on the Screen you want to hide the bar, set tabBarVisible: false.

<Tab.Screen
    name="SignIn"
    component={SignInScreen}
    options={{
      tabBarVisible: false, //like this
      tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
    }}
  />