react navigation version 5, hide top bar when render tab screen

Question

I've created nested navigation using react-navigation version 5, But when tab screen render I need to hide top bar, I've follow step from here https://reactnavigation.org/docs/hiding-tabbar-in-screens/ but still not working

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import {navigationRef} from './NavigationService';

import {Home, Appointment, Settings, Map, ProviderDetails} from 'app/screens';
import {PRIMARY_COLOR, SECONDARY_COLOR} from '../config/color';
import ThemeController from '../components/ThemeController';
import {StatusBar} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const Stack = createStackNavigator();

const homeOptions = {
  title: 'Home',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerRight: () => <ThemeController />,
};

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
  );
};

const MapStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Map" component={Map} />
      <Stack.Screen name="ProviderDetails" component={ProviderDetails} />
    </Stack.Navigator>
  );
};

const Tab = createBottomTabNavigator();

function App(props) {
  const {theme} = props;

  return (
    <NavigationContainer ref={navigationRef} theme={theme}>
      <StatusBar barStyle={theme.dark ? 'light-content' : 'dark-content'} />
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            if (route.name === 'Home') {
              return <MaterialIcons name="home" size={size} color={color} />;
            } else if (route.name === 'Map') {
              return (
                <FontAwesome5 name="map-marked-alt" size={size} color={color} />
              );
            } else if (route.name === 'Appointment') {
              return (
                <FontAwesome5 name="calendar-alt" size={size} color={color} />
              );
            } else if (route.name === 'More') {
              return (
                <MaterialIcons name="more-horiz" size={size} color={color} />
              );
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: PRIMARY_COLOR,
          inactiveTintColor: SECONDARY_COLOR,
        }}>
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Map" component={MapStack} />
        <Tab.Screen name="Appointment" component={Appointment} />
        <Tab.Screen name="More" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

Create HomeStack and MapStack stack navigator and pass that value to Tab Navigator, In bellow image you can see in Home and Map tab display top bar.

BloodyMonkey BloodyMonkey · Accepted Answer · 2020-08-18T07:21:32

Use headerShown option

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" options={{ headerShown: false }} component={Home} />
    </Stack.Navigator>
  );
};

react navigation version 5, hide top bar when render tab screen

1 Answers