1

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

enter image description here

2
  • headerShow or headerShown? The correct way to do is headerShown: false
    – Kartikey
    Aug 27, 2021 at 20:11
  • I did that and also i mention there but it hide only 2nd header which i want to show. Aug 27, 2021 at 20:13

2 Answers 2

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

1
  • 1
    Thank you! it worked. For React-Navigation-6.x we have to use screenOptions in place of tabBarOptions in Tab Navigation section. Aug 28, 2021 at 10:00
1

I have resolved my issue by this line of code.

<Tab.Navigator initialRouteName="Home" screenOptions={{tabBarActiveTintColor:Colors.appPurple,headerShown:false}}> {...code} </Tab.Navigator>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.