React navigation 5 hide tab bar from stack navigator

Question

I wanted to know how to hide the bottom tab bar from a specific screen inside my stack navigator that is nested on a material bottom tab bar

This is my code for my stack navigator

import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import PondScreen from '../screens/PondScreen/PondScreen'; import PondDetailScreen from '../screens/PondScreen/PondDetailScreen';  const Stack = createStackNavigator();  export function PondStack() {   return (     <Stack.Navigator       initialRouteName="PondScreen"       headerMode="none"       mode="card"     >       <Stack.Screen         name="PondScreen"         component={PondScreen}       />       <Stack.Screen         name="PondDetailScreen"         component={PondDetailScreen}         options={{           tabBarVisible: false         }}       />     </Stack.Navigator>   ); } 

This is my code for my material bottom tab navigator

import React from 'react'; import { View } from 'react-native'; import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; import { Entypo, Feather } from '@expo/vector-icons'; import { PondStack } from './StackNavigators'; import StockScreen from '../screens/StockScreen'; import OrderScreen from '../screens/OrderScreen'; import SettingsScreen from '../screens/SettingsScreen';  const Tab = createMaterialBottomTabNavigator();  export default function BottomTab() {   return (     <Tab.Navigator       labeled={false}       initialRouteName="Pond"       activeColor="#EB3349"       inactiveColor="#888888"       backBehavior="none"       shifting={true}       barStyle={{         backgroundColor: '#FFFFFF'       }}     >       <Tab.Screen         name="Pond"         component={PondStack}         options={{           tabBarIcon: ({ color}) => (             <View style={{ flex: 1 }}>               <Entypo name="air" color={color} size={20} />             </View>           )         }}       />       <Tab.Screen         name="Stock"         component={StockScreen}         options={{           tabBarIcon: ({ color }) => (             <View style={{ flex: 1 }}>               <Feather name="box" color={color} size={20} />             </View>           )         }}       />       <Tab.Screen         name="Order"         component={OrderScreen}         options={{           tabBarIcon: ({ color}) => (             <View style={{ flex: 1 }}>               <Feather name="dollar-sign" color={color} size={20} />             </View>           )         }}       />       <Tab.Screen         name="Settings"         component={SettingsScreen}         options={{           tabBarIcon: ({ color}) => (             <View style={{ flex: 1 }}>               <Feather name="settings" color={color} size={20} />             </View>           )         }}       />     </Tab.Navigator>   ) } 

I am currently using Expo to build my project.

My dependencies (package.json)

{   "main": "node_modules/expo/AppEntry.js",   "scripts": {     "start": "expo start",     "android": "expo start --android",     "ios": "expo start --ios",     "web": "expo start --web",     "eject": "expo eject"   },   "dependencies": {     "@react-native-community/masked-view": "^0.1.5",     "@react-navigation/material-bottom-tabs": "^5.0.0",     "@react-navigation/native": "^5.0.0",     "@react-navigation/stack": "^5.0.0",     "@types/react-native": "^0.61.12",     "expo": "~36.0.0",     "react": "~16.9.0",     "react-dom": "~16.9.0",     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",     "react-native-gesture-handler": "~1.5.0",     "react-native-paper": "^3.6.0",     "react-native-raw-bottom-sheet": "^2.0.6",     "react-native-reanimated": "~1.4.0",     "react-native-safe-area-context": "0.6.0",     "react-native-screens": "2.0.0-alpha.12",     "react-native-vector-icons": "^6.6.0",     "react-native-web": "~0.11.7"   },   "devDependencies": {     "@babel/core": "^7.0.0",     "babel-preset-expo": "~8.0.0"   },   "private": true } 

Answer 1

I had almost the same issue with a tabnavigation as parent and stacknavigation as childs and rearranging my screen layer wasn't an option. So I looked for another solution and from the docs I found out that the parent navigation UI is always shown on the child. But the docs also gave a great example on how to change a parent header from within a child. So I took that example and implemented it for the tabbar visibility. This is how I implemented it.

So I have a tabbar navigation with Home, Contacts and More, and inside each tab I have a stack. The screen that I hide the tabbar in is in the CameraView, and that screen is a stackscreen in the More tab.

• Home
• Contacts
• More

  • Profile
  • CameraView (here I want to hide the tabbar)

Tabnavigation:

As you can see I get the visibility of the tabbar from a method.

<NavigationContainer>   <Tab.Navigator>     <Tab.Screen name="Home" component={HomeNavigation} />     <Tab.Screen name="Contacts" component={ContactNavigation} />     <Tab.Screen       name="More"       component={MoreNavigation}       options={({ route }) => ({         tabBarVisible: this.getTabBarVisibility(route)       })}     />   </Tab.Navigator> </NavigationContainer> 

Method getTabBarVisibility:

This is were I check if the name of the route is CameraView which I defined in the StackNavigation.

getTabBarVisibility = (route) => {   const routeName = route.state     ? route.state.routes[route.state.index].name     : '';    if (routeName === 'CameraView') {     return false;   }    return true; } 

And the component MoreNavigation:

This is my stacknavigation for More, where you can see that the screen name is CameraView.

<Stack.Navigator initialRouteName="More">   <Stack.Screen name="More" component={More}/>   <Stack.Screen name="UserProfile" component={Profile}/>   <Stack.Screen name="CameraView" component={CameraView}/> </Stack.Navigator>