title: React navigation 5 hide tab bar from stack navigator
body: <p>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</p>
  
  <p>This is my code for my stack navigator</p>
  
  <pre><code>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 (
      &lt;Stack.Navigator
        initialRouteName="PondScreen"
        headerMode="none"
        mode="card"
      &gt;
        &lt;Stack.Screen
          name="PondScreen"
          component={PondScreen}
        /&gt;
        &lt;Stack.Screen
          name="PondDetailScreen"
          component={PondDetailScreen}
          options={{
            tabBarVisible: false
          }}
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  </code></pre>
  
  <p>This is my code for my material bottom tab navigator</p>
  
  <pre><code>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 (
      &lt;Tab.Navigator
        labeled={false}
        initialRouteName="Pond"
        activeColor="#EB3349"
        inactiveColor="#888888"
        backBehavior="none"
        shifting={true}
        barStyle={{
          backgroundColor: '#FFFFFF'
        }}
      &gt;
        &lt;Tab.Screen
          name="Pond"
          component={PondStack}
          options={{
            tabBarIcon: ({ color}) =&gt; (
              &lt;View style={{ flex: 1 }}&gt;
                &lt;Entypo name="air" color={color} size={20} /&gt;
              &lt;/View&gt;
            )
          }}
        /&gt;
        &lt;Tab.Screen
          name="Stock"
          component={StockScreen}
          options={{
            tabBarIcon: ({ color }) =&gt; (
              &lt;View style={{ flex: 1 }}&gt;
                &lt;Feather name="box" color={color} size={20} /&gt;
              &lt;/View&gt;
            )
          }}
        /&gt;
        &lt;Tab.Screen
          name="Order"
          component={OrderScreen}
          options={{
            tabBarIcon: ({ color}) =&gt; (
              &lt;View style={{ flex: 1 }}&gt;
                &lt;Feather name="dollar-sign" color={color} size={20} /&gt;
              &lt;/View&gt;
            )
          }}
        /&gt;
        &lt;Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: ({ color}) =&gt; (
              &lt;View style={{ flex: 1 }}&gt;
                &lt;Feather name="settings" color={color} size={20} /&gt;
              &lt;/View&gt;
            )
          }}
        /&gt;
      &lt;/Tab.Navigator&gt;
    )
  }
  </code></pre>
  
  <p>I am currently using Expo to build my project.</p>
  
  <p>My dependencies (package.json)</p>
  
  <pre><code>{
    "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
  }
  </code></pre>