title: How to hide the header from Tab navigation (bottom-tabs) in react navigation 5.x?
body: <p>i am trying to use createBottomTabNavigator function for create bottom navigation tab, i want to hide the 
    header, bellow the screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/xT5qJ.png" alt=""></p>
  
  <p>I have a BottomTabNavigator inside a stackNavigator bellow the code:<br>
  This is the rooter configuration file rooter.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import WelcomeScreen from '../component/WelcomeScreen';
  import Login from '../component/login/Login';
  import Register from '../component/register/Register';
  import RegisterTwo from '../component/register/RegisterTwo';
  import TabsBottom from '../component/tabs/TabsNavigation'
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  
    const Stack = createStackNavigator();
    const AppSwitchNavigator = () =&gt; {
      return (
        &lt;NavigationContainer&gt;
          &lt;Stack.Navigator  initialRouteName="WelcomeScreen"&gt;
            &lt;Stack.Screen name="TabsBottom" component={TabsBottom} /&gt;
            &lt;Stack.Screen name="WelcomeScreen" component={WelcomeScreen} /&gt;
            &lt;Stack.Screen name="Register" component={Register} /&gt;
            &lt;Stack.Screen name="RegisterTwo" component={RegisterTwo} /&gt;
            &lt;Stack.Screen name="Login" component={Login} /&gt;
          &lt;/Stack.Navigator&gt;
        &lt;/NavigationContainer&gt;
      );
    }
  
    export const AppContainer = AppSwitchNavigator;
  </code></pre>
  
  <p>This is my nested navigator TabsNavigation.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import Explore from '../Explore';
  import Settings from '../Settings';
  import Profile from '../Profile';
  import Search from '../Search';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import Icon from 'react-native-vector-icons/FontAwesome5';
  import colors from '../../../styles/colors/index';
  
  const Tab = createBottomTabNavigator();
  
  function MyTabs() {
    return (
      &lt;Tab.Navigator
      screenOptions={({ route }) =&gt; ({
        tabBarIcon: ({ focused, color, size }) =&gt; {
          let iconName;
          if (route.name === 'Explore') {
            iconName = focused ? 'home': 'home';
            color = focused ? colors.mainColor : colors.gray03;
          } else if (route.name === 'Settings') {
            iconName = focused ? 'cog' : 'cog';
            color = focused ? colors.mainColor : colors.gray03;
          }
          else if (route.name === 'Search') {
            iconName = focused ? 'search' : 'search';
            color = focused ? colors.mainColor : colors.gray03;
          }
          else if (route.name === 'Profile') {
            iconName = focused ? 'user-alt' : 'user-alt';
            color = focused ? colors.mainColor : colors.gray03;
          }
          return &lt;Icon name={iconName} size={30} color={color} /&gt;;
        }    
      })}
      tabBarOptions={{
        activeTintColor: colors.mainColor,
        inactiveTintColor: colors.gray03
      }}
      &gt;
        &lt;Tab.Screen name="Explore" component={Explore} /&gt;
        &lt;Tab.Screen name="Search" component={Search} /&gt;
        &lt;Tab.Screen name="Profile" component={Profile} /&gt;
        &lt;Tab.Screen name="Settings" component={Settings} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  }
  export default function TabsBottom() {
    return (
        &lt;MyTabs /&gt;  
    );
  }
  </code></pre>
  
  <p>I want delete the screen's headres <br>
  Thanks for your help </p>