How to hide the header from Tab navigation (bottom-tabs) in react navigation 5.x?

user_8284787 0
Viewed 16888

i am trying to use createBottomTabNavigator function for create bottom navigation tab, i want to hide the header, bellow the screenshot:

I have a BottomTabNavigator inside a stackNavigator bellow the code:
This is the rooter configuration file rooter.js

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 = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator  initialRouteName="WelcomeScreen">
          <Stack.Screen name="TabsBottom" component={TabsBottom} />
          <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
          <Stack.Screen name="Register" component={Register} />
          <Stack.Screen name="RegisterTwo" component={RegisterTwo} />
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  export const AppContainer = AppSwitchNavigator;

This is my nested navigator TabsNavigation.js

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 (
    <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        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 <Icon name={iconName} size={30} color={color} />;
      }    
    })}
    tabBarOptions={{
      activeTintColor: colors.mainColor,
      inactiveTintColor: colors.gray03
    }}
    >
      <Tab.Screen name="Explore" component={Explore} />
      <Tab.Screen name="Search" component={Search} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}
export default function TabsBottom() {
  return (
      <MyTabs />  
  );
}

I want delete the screen's headres
Thanks for your help

react-redux react-native reactjs android javascript
7 Answers

From version 6.x.x

You just need to add

<Tab.Navigator screenOptions={{ headerShown: false }}> 

or

<HomeStack.Navigator screenOptions={{ headerShown: false }}>

and it will hide the header

user_15511020

For the latest version in React Native:

If you want to remove the header for all bottom tabs, use this prompt:

<TabNavigator.Navigator screenOptions={{headerShown:false}}/>

Or, if you want to remove it for a particular bottomTabScreen, use this:

<TabNavigator.Screen name="home" component={HomeStack} />
user_167688990

Use following line. Write headerShown as false. It will remove header:

<Stack.Screen name="TabsBottom" options={{headerShown: false}} component={TabsBottom} />
user_138325820

To hide the 'Tabs Bottom' header you have to add a headerShown: false option to your TabsBottom Stack.Screen component like this:

  const Stack = createStackNavigator();
  const AppSwitchNavigator = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator  initialRouteName="WelcomeScreen">
          <Stack.Screen name="TabsBottom" component={TabsBottom} options={{ headerShown: false }} />
          <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
          <Stack.Screen name="Register" component={Register} />
          <Stack.Screen name="RegisterTwo" component={RegisterTwo} />
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  export const AppContainer = AppSwitchNavigator;

user_53291090

Use this syntax in bottomtab.js file

<Tab.Navigator screenOptions={{headerShown:false}}> </Tab.Navigator>

user_129790700

(React Nav ver6.x) add this code snipet "options={{headerShown: false}}" in "<Tab.Screen />".It will delete header of each tab you add into.

user_170728910

I'm not really good at react-native stuff but the documentation about hiding tab bar says that, in nested navigator (tabNavigator inside stackNavigator in the doc), you have to put your screen in the parent navigator, which make sense since each navigator handle their own screen.

If I refer to your screen, you have a stackNavigator and a tabNavigator, so just apply this principle. If you still need help, please provide a repro (A Snack expo would be appreciated, or just paste your full code in your question) so we can work on it.

user_98685490
Related