React native docs hide tab bar. index]. Set Hiding tab bar in specific screens. Hiding tab bar in specific screens. To hide, see tabBarShowLabel . <Stack. Title string of a tab displayed in the tab bar or a function that given { focused: boolean, color: string } returns a React. Navigator>. Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this: function HomeStack() {. To hide the tab bar in one of the screens, this works for React Navigation v4: HomeStack. When undefined, scene title is used. routes[navigation. routeName if ( routeName == 'ProductDetails' ) { tabBarVisible = false } return { tabBarVisible, } } I got the solve for this state from React Native Docs and it's work for me👍🏻: Just change your navigation structure. Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Example: With this structure👇🏻, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens. 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. 1. navigationOptions = ({ navigation }) => { let tabBarVisible = true; let routeName = navigation. Node, to display in tab bar. return (. If you’re using createBottomTabNavigator and want to hide the bottom tab bar on a specific screen, just set the tabBarStyle option to { display: React Navigation is a great library for React Native to navigate. React Navigation is a great library for React Native to navigate. state. Set. If you’re using createBottomTabNavigator and want to hide the bottom tab bar on a specific screen, then we have 2 options. zjsevicubkhogphyhlkrnlfabqmcoszjjeevbljenaysvdtomgjy