react native why my navigation shows me 2 headers? - react-native

Question

I want to custom my header. The Problem is, it shows me two headers. My custom header and the Tab Header "Home".
import * as React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import {
BottomTabBar,
createBottomTabNavigator,
} from '#react-navigation/bottom-tabs';
import { Entypo, FontAwesome5 } from '#expo/vector-icons';
import Home from '../screens/Home';
import News from '../screens/News';
import Weapons from '../screens/stack/Weapons';
import HeaderHome from '../shared/headerHome';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const TabBar = () => (
<Tab.Navigator
tabBar={(props) => {
return (
<View>
<BottomTabBar {...props} />
</View>
);
}}
screenOptions={{
tabBarStyle: [{ display: 'flex' }],
tabBarShowLabel: true,
tabBarLabelStyle: {
paddingBottom: 6,
color: '#333',
},
}}>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ color, focused }) => (
<Entypo name="home" size={24} color={focused ? '#37bfff' : '#888'} />
),
}}
/>
<Tab.Screen
name="News"
component={News}
options={{
tabBarIcon: ({ color, focused }) => (
<Entypo
name="newsletter"
size={24}
color={focused ? '#37bfff' : '#888'}
/>
),
}}
/>
</Tab.Navigator>
);
const Navigation = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="HomeScreen"
component={TabBar}
options={{
header: () => <HeaderHome />,
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
const styles = StyleSheet.create({
navigator: {
borderTopWidth: 0,
backgroundColor: 'transparent',
elevation: 30,
height: 60,
},
});
export default Navigation;

Answer 1

You can add a option to hide the Tab.Navigator's header. Add headerShown: false to the screenOptions of Tab.Navigator as shown below
<Tab.Navigator
tabBar={(props) => {
return (
<View>
<BottomTabBar {...props} />
</View>
);
}}
screenOptions={{
tabBarStyle: [{ display: 'flex' }],
tabBarShowLabel: true,
tabBarLabelStyle: {
paddingBottom: 6,
color: '#333',
},
headerShown: false, // <--- Here
}}>
Check out the working example for your scenario here
On the other hand, if you want to hide the Stack.Navigator's header, you can do as shown below
<Stack.Navigator screenOptions={{ headerShown: false }}>