React Navigation 6.0 double header issue

Question

I have same code structure of navigation of React Navigation 5.x

    ...
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    ...

i upgraded React Navigation 5 to 6.x

 "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",

When i run the code i got double header, above one header name is Tabs Screen name and below one is headerTitle name

These is the code structure of my navigation

const HomeStack = createStackNavigator();
const HomeStackScreen = ({navigation, props}) => (
  <HomeStack.Navigator>
    <HomeStack.Screen
      name="HomeMain"
      component={HomeMain}
      options={{
        headerTitle: 'Delivery App',
      }}
    />
    <HomeStack.Screen
      name="Search"
      component={Search}
      options={{
        headerTitle: 'Search',
        headerTitleStyle: {
          fontFamily: 'Muli-Regular',
        },
      }}
    />

  ...

  </HomeStack.Navigator>
);

const CartStack = createStackNavigator();
const CartStackScreen = () => (
  <CartStack.Navigator>
    <CartStack.Screen
      name="CART"
      component={Cart}
      options={({route}) => ({
        headerTitleStyle: {
          fontFamily: 'Muli-Regular',
        },
      })}
    />
 ...
  </CartStack.Navigator>
);

const ProfileStack = createStackNavigator();
const ProfileStackScreen = () => (
  <ProfileStack.Navigator>
    <ProfileStack.Screen
      name="ProfileMain"
      component={ProfileMain}
      options={({route}) => ({
        headerTitle: 'Profile' /*headerShown: false*/,
        headerTitleStyle: {
          fontFamily: 'Muli-Regular',
        },
      })}
    />
    ...
  </ProfileStack.Navigator>
);

const AppTabs = createBottomTabNavigator();
const AppTabsScreen = props => {
  return (
    <AppTabs.Navigator
      tabBarOptions={{
        activeTintColor: '#00D084',
        inactiveTintColor: '#C6CDD7',
      }}>
      <AppTabs.Screen
        name="Home"   //<------ This  name is showing conflict is here
        component={HomeStackScreen}
        options={{
          tabBarIcon: props => (
            <Icon.Ionicons name="home" size={props.size} color={props.color} />
          ),
        }}
      />
      <AppTabs.Screen
        name="Cart"
        component={CartStackScreen}
        options={{
          tabBarIcon: props => (
            <Icon.Ionicons name="cart" size={props.size} color={props.color} />
          ),
          tabBarBadge: props.cartCount,
        }}
      />
      <AppTabs.Screen
        name="Account"
        component={ProfileStackScreen}
        options={{
          tabBarIcon: props => (
            <Icon.Ionicons
              name="person"
              size={props.size}
              color={props.color}
            />
          ),
        }}
      />
    </AppTabs.Navigator>
  );
};

Where do we change to fix this issue, i have tried headerShow null or false also but it hide only 2nd Header. I want to hide the 1st one.

Here is the screenshot

Answer 1

You need to add headerShown: false to the Tab Navigator.

e.g.

<AppTabs.Navigator
      screenOptions: {{ headerShown: false }}
      tabBarOptions={{
        activeTintColor: '#00D084',
        inactiveTintColor: '#C6CDD7',
      }}>
{...code}

</AppTabs.Navigator/>

That is if you want to remove the header added by the Tab Navigation. You can do the same for Stack navigators if you want to remove that one.

If you don't want to remove header from all of the tab navigators, you can individually add it like this:

     <AppTabs.Screen
        name="Account"
        component={ProfileStackScreen}
        options={{
          headerShown: false
          // other options
        }}
      />

And that will remove header from only that tab.

Ref: https://reactnavigation.org/docs/headers