Conditionally toggling element in React-native overlap the element instead replace

Question

I have a header where i want to show menu or back Icon depending on the current page. so i am rendering the Icon conditionally like bellow

import Icon from 'react-native-vector-icons/Ionicons';
 
const HeaderContainer = ({navigation}) => {
  return (
    <SafeAreaView forceInset={{top: 'never'}}>
      <View
        style={{
          width: '100%',
          flexDirection: 'row',
          alignItems: 'center',
          paddingLeft: 10,
          paddingRight: 10,
        }}>
      <View>
        {navigation.state.routeName !== 'Home' ? (
          <Icon
            name="chevron-back-sharp"
            size={30}
            onPress={() => {
              navigation.goBack();
            }}
          />
        ): (<Icon
          name="ios-menu"
          size={30}
          onPress={() => {
            navigation.toggleDrawer();
          }}
        />)}
      
    </View>
  </SafeAreaView>

const CustomHeader = ({navigation}) => {
  return {
    header: (props) => <HeaderContainer {...props} />,
    headerStyle: {backgroundColor: '#fff'},
    headerTintColor: '#000',
  };
};

const AppNavigator = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    Cart: { screen: CartScreen },
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: ({navigation}) => {
      return CustomHeader(navigation);
    },
  },
);

const AppDrawerNavigator = createDrawerNavigator(
  { App: { screen: AppNavigator } },
  {contentComponent: DrawerContainer},
);

export default AppContainer = createAppContainer(AppDrawerNavigator);

But initially it is loading with only one Icon, i.e menu icon, but when i change the navigation, getting menu and back icon overlapped. please help me how can i fix this

screenshot

question from:https://stackoverflow.com/questions/66062743/conditionally-toggling-element-in-react-native-overlap-the-element-instead-repla

Answer 1

Firstly, I would console.log the navigation right before returning the header to see how the routeName is changing. That might be happening because the initialRouteName is 'Home'.

Edit: you could store the routeName in a variable right before return and call it isHome = navigation.state.routeName and instead of having two icons between which you choose, put just one and change its props depending on isHome.

<Icon
  name= !isHome ? "chevron-back-sharp" : "ios-menu"
  size={30}
  onPress={() => !isHome ? navigation.goBack() : navigation.toggleDrawer()}
 />