Question

172

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

rated 0 times [ 177] [ 5] / answers: 1 / hits: 46142 / 5 Years ago, tue, june 25, 2019, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myakylas

Add To Favorites

Follow

Total Points: 66

Total Questions: 85

Total Answers: 95

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

myakylas questions

1 NestJS, how and where to build response DTOs

Thu, Apr 28, 22, 00:00, 2 Years ago

1 How to render a popup by calling a function?

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Make useEffect hook run before rendering the component

Sat, Sep 19, 20, 00:00, 4 Years ago

1 Angular Material sorting, Cannot set property 'sort' of undefined

Thu, Aug 8, 19, 00:00, 5 Years ago

1 Background Color of Material UI Snackbar not being overridden

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 5 Years ago anthonyw · Accepted Answer

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

    }

});