title: How can I hide the bottom tab bar on a specific screen (react navigation 5.x)
body: <p>I wanted to know how to hide the bottom tab bar from a specific screen inside my stack navigator, my code is below. I just want to hide bottom tabs for the Player screen, or open Player screen with modal can anyone help me?</p>
  <p>This is my code for my main tab navigator</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { StatusBar } from 'react-native';
  import { NavigationContainer, DarkTheme } from '@react-navigation/native';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  
  //views
  import HomeStack from './src/views/Home';
  import SearchStack from './src/views/Search';
  import MoviesStack from './src/views/Movies';
  import SeriesStack from './src/views/Series';
  import Other from './src/views/Other';
  
  //icons
  import {
      HomeIcon,
      SearchIcon,
      MovieIcon,
      SeriesIcon,
      OtherIcon,
  } from './src/components/icons';
  
  const Tab = createBottomTabNavigator();
  
  export default function App() {
      return (
          &lt;&gt;
              &lt;StatusBar barStyle=&quot;dark-content&quot; /&gt;
              &lt;NavigationContainer theme={DarkTheme}&gt;
                  &lt;Tab.Navigator
                      initialRouteName=&quot;Home&quot;
                      tabBarOptions={{
                          activeTintColor: 'white',
                          keyboardHidesTabBar: false,
                      }}
                  &gt;
                      &lt;Tab.Screen
                          name=&quot;Home&quot;
                          component={HomeStack}
                          options={{
                              tabBarLabel: 'Home',
                              tabBarIcon: ({ focused }) =&gt; (
                                  &lt;HomeIcon
                                      fill={focused ? 'white' : 'gray'}
                                      width={24}
                                      height={24}
                                  /&gt;
                              ),
                          }}
                      /&gt;
                      &lt;Tab.Screen
                          name=&quot;Search&quot;
                          component={SearchStack}
                          options={{
                              tabBarLabel: 'Search',
                              tabBarIcon: ({ focused }) =&gt; (
                                  &lt;SearchIcon
                                      stroke={focused ? 'white' : 'gray'}
                                      width={24}
                                      height={24}
                                  /&gt;
                              ),
                          }}
                      /&gt;
                      &lt;Tab.Screen
                          name=&quot;Movie&quot;
                          component={MoviesStack}
                          options={{
                              tabBarLabel: 'Movie',
                              tabBarIcon: ({ focused }) =&gt; (
                                  &lt;MovieIcon
                                      color={focused ? 'white' : 'gray'}
                                      width={24}
                                      height={24}
                                  /&gt;
                              ),
                          }}
                      /&gt;
                      &lt;Tab.Screen
                          name=&quot;Series&quot;
                          component={SeriesStack}
                          options={{
                              tabBarLabel: 'Series',
                              tabBarIcon: ({ focused }) =&gt; (
                                  &lt;SeriesIcon
                                      color={focused ? 'white' : 'gray'}
                                      width={24}
                                      height={24}
                                  /&gt;
                              ),
                          }}
                      /&gt;
                      &lt;Tab.Screen
                          name=&quot;Other&quot;
                          component={Other}
                          options={{
                              tabBarLabel: 'Other',
                              tabBarIcon: ({ focused }) =&gt; (
                                  &lt;OtherIcon
                                      fill={focused ? 'white' : 'gray'}
                                      width={24}
                                      height={24}
                                  /&gt;
                              ),
                          }}
                      /&gt;
                  &lt;/Tab.Navigator&gt;
              &lt;/NavigationContainer&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  <p>This is my code for my main stack navigator</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { View, Image } from 'react-native';
  import { createStackNavigator } from '@react-navigation/stack';
  
  //components
  import Screen from '../components/Screen';
  import HomeList from '../components/HomeList';
  
  //views
  import MovieDetail from './MovieDetail';
  import SeriesDetail from './SeriesDetail';
  import Player from './Player';
  
  function Home({ navigation }) {
      return (
          &lt;Screen&gt;
              &lt;View&gt;
                  &lt;Image source={require('../../assets/logo.png')} /&gt;
                  ...
              &lt;/View&gt;
          &lt;/Screen&gt;
      );
  }
  
  const Stack = createStackNavigator();
  
  export default function HomeStack() {
      return (
          &lt;Stack.Navigator
              screenOptions={{
                  headerShown: false,
              }}
          &gt;
              &lt;Stack.Screen name=&quot;Home&quot; component={Home} /&gt;
              &lt;Stack.Screen name=&quot;MovieDetail&quot; component={MovieDetail} /&gt;
              &lt;Stack.Screen name=&quot;SeriesDetail&quot; component={SeriesDetail} /&gt;
              &lt;Stack.Screen name=&quot;Player&quot; component={Player} /&gt;
          &lt;/Stack.Navigator&gt;
      );
  }
  </code></pre>
  <p>and this is my code for stack navigator of the page I use to send data to the page i want to hide</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import {
      View,
      Text,
      TouchableOpacity,
  } from 'react-native';
  
  //components
  import Screen from '../components/Screen';
  import Loading from '../components/Loading';
  
  
  export default function MovieDetail({ route, navigation }) {
      const { id, title } = route.params;
      return (
          &lt;Screen&gt;
              &lt;TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() =&gt;
                      navigation.navigate('Player', {
                          uri: 'https://blabla.com',
                      })
                  }
              &gt;
                  &lt;PlayIcon color=&quot;black&quot; /&gt;
                  &lt;Text&gt;
                      Play
                  &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          &lt;/Screen&gt;
      );
  }
  </code></pre>
  <p>and here I want to hide tab bar this screen</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import WebView from 'react-native-webview';
  
  export default function Player({ route }) {
      const { uri } = route.params;
      return (
          &lt;WebView source={{ uri }} /&gt;
      );
  }
  </code></pre>