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

5
votes

I am using React Native and React Native Navigation to build out my application. Currently, I have three bottom tabs: Home, Upload Video and Messages. Upon selection of the Upload Video tab, I want to render the Upload Video component and hide the bottom tabs on just that screen, and display a header with 'Cancel' (takes them back to the HomeView) and 'Post' buttons (this has already been done). I've had an extremely difficult time hiding the tab bar on this specific screen.

I tried following the code here (How can I hide the bottom tab bar on a specific screen (react-navigation 3.x)); however, that ended up being unsuccessful and I was not able to hide the bottom tabs on any of the screens this way.

Currently, I have this as my bottom navigator:

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Any insight would be extremely helpful, thanks.

3
javascriptreactjsreact-nativereact-native-navigation

3 Answers

12
votes

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

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

For React-Navigation 5, refer to this link.

1
votes

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