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

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;

CodePudding user response：

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 }}>