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

Question

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.

Answer 1

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.

Answer 2

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