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

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.

Answer 1

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