Profile header displayed in the 'Settings' tab instead of the settings header - React Native/Expo

I'm using react native and Expo.

I have an issue where the profile header is displayed in the 'settings' tab and the settings header is displayed under it.

Image:

Image

The desired outcome is for only the settings header to be displayed in the 'settings' tab and the profile header only to be shown in the profile tab.

My settings code that is showing the settings header -

const Settings = ({ handleLogout }) => (
  <SettingsStack.Navigator>
    <SettingsStack.Screen
      name="SettingsList"
      children={(props) => <SettingsList {...props} handleLogout={handleLogout} />}
      options={{ title: 'Settings', headerShown: true, headerTitleAlign: 'center', headerTintColor: 'white', headerStyle: { backgroundColor: 'black' } }}
    />
    <SettingsStack.Screen
      name="SettingTab"
      component={SettingTab}
      options={({ route }) => ({ title: route.params.settingName, headerShown: true, headerTitleAlign: 'center', headerTintColor: 'white', headerStyle: { backgroundColor: 'black' } })}
    />
  </SettingsStack.Navigator>
);

My ProfileStack.Screen: - The header button is a settings icon in the right corner that navigates to 'settings'

<ProfileStack.Navigator>
      <ProfileStack.Screen
        name="Profile"
        options={({ route }) => ({
          headerShown: route.name === "Profile", // Only show header when route name is 'Profile'
          headerTitle: '', // Set header title to an empty string
          headerRight: () => (
            <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
              <Item
                title="Settings"
                iconName="settings"
                onPress={() => navigation.navigate('Settings')}
              />
            </HeaderButtons>
          ),
        })}
      >
        {props => (
          <Profile
            {...props}
            userProfilePicture={userProfilePicture}
            onChangeProfilePicture={setUserProfilePicture}
          />
        )}
      </ProfileStack.Screen>
      <ProfileStack.Screen
        name="Settings"
        options={{ headerShown: false }}
      >
        {props => <Settings {...props} handleLogout={handleLogout} />}
      </ProfileStack.Screen>
    </ProfileStack.Navigator>

My AppNavigator:

const getheaderTitle = (route) => {
  const routeName = route.name;

  if (routeName === 'Home') {
    return 'Home';
  } else if (routeName === 'Profile') {
    return 'Profile';
  }

  return ''; // Return an empty string if the route name is not recognized
};

const AppNavigator = ({ userProfilePicture, setUserProfilePicture, handleLogout }) => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person';
          } else {
            return null;
          }

          return <MaterialIcons name={iconName} size={size} color={color} />;
        },

        headerTitle: getheaderTitle(route),

        tabBarActiveTintColor: 'rgb(255, 255, 255)',
        tabBarInactiveTintColor: 'rgb(114, 118, 122)',
        tabBarStyle: { backgroundColor: 'rgb(0, 0, 0)' },
      })}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Home',
          headerStyle: {
            backgroundColor: 'rgb(0, 0, 0)', // Customize header background color
          },
          headerTintColor: 'white', // Customize header text color
        }}
        initialParams={{ userProfilePicture }}
      />
      <Tab.Screen
        name="Profile"
        children={() => (
          <ProfileStackScreen
            userProfilePicture={userProfilePicture}
            setUserProfilePicture={setUserProfilePicture}
            handleLogout={handleLogout}
          />
        )}
        options={({ route }) => ({
          title: 'Profile',
          headerTitle: getheaderTitle(route),
          headerStyle: {
            backgroundColor: 'rgb(0, 0, 0)', // Customize header background color
          },
        })}
      />
    </Tab.Navigator>
  );

The issue you're having is due to the structure of your navigation. You have Settings screen as a part of both ProfileStack.Navigator and SettingsStack.Navigator. When you're navigating to Settings from Profile, it's trying to render the Settings screen from ProfileStack.Navigator which includes its own header as well as the one from SettingsStack.Navigator.

To fix this, you should structure your navigators in a way that avoids nesting of the same screens.

The simple example of this might look something like this:

const RootStack = createStackNavigator();

const RootStackScreen = () => (
 <RootStack.Navigator>
 <RootStack.Screen name="AppTabs" component={AppNavigator} options=. 
{{headerShown: false}}/>
 <RootStack.Screen name="Settings" component={Settings} />
 </RootStack.Navigator> );

 const ProfileStack = createStackNavigator();

 const ProfileStackScreen = ({ userProfilePicture, 
    onChangeProfilePicture, handleLogout }) => (
    <ProfileStack.Navigator>
    <ProfileStack.Screen
     name="Profile"
     component={Profile}
     initialParams={{ userProfilePicture, onChangeProfilePicture }}
     options={({ navigation }) => ({
     headerTitle: '',
     headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Settings"
          iconName="settings"
          onPress={() => navigation.navigate('Settings')}
        />
      </HeaderButtons>
    ),
  })}
/>
 </ProfileStack.Navigator> );

Remove the SettingsStack.Screen from ProfileStack.Navigator and modify the AppNavigator

const AppNavigator = ({ userProfilePicture, setUserProfilePicture, 
handleLogout }) => {
 return (
<Tab.Navigator
  //... your code
>
  <Tab.Screen
    name="Home"
    //... your code
  />
  <Tab.Screen
    name="Profile"
    children={() => (
      <ProfileStackScreen
        userProfilePicture={userProfilePicture}
        onChangeProfilePicture={setUserProfilePicture}
        handleLogout={handleLogout}
      />
    )}
    //... your code
  />
</Tab.Navigator> ); };

Then in your main component where you're using your navigators, use RootStackScreen instead of AppNavigator

export default function App() {
return (
<NavigationContainer>
  <RootStackScreen />
</NavigationContainer>
);
}

This is a rough example of what the navigation structure might look like, of course, you will have to adjust this to match your applications needs.