android - Two header button left and right React Navigation v5

Question

Im trying to achieve this

Header

headerRight doesn't work, only headerLeft and headerTitle working

import Icon from 'react-native-vector-icons/MaterialIcons';

    <HomeStack.Navigator
          screenOptions={{headerStyle: {elevation: 0, shadowOpacity: 0}}}>
          <HomeStack.Screen
            name={NAVIGATOR.ProviderTypeTab}
            component={ProviderTypeStack}
            options={{
              title: null,
              headerLeft: () => (
                <View style={{marginTop: 10, marginLeft: 10}}>
                  <ProfilePicComponent onPress={handleDrawer} />
                </View>
              ),
              headerRight: () => {
                <View style={{height: 10, width: 10, backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>;
              },

              headerTitle: () => (
                <View style={{width: '85%', marginTop: 10}}>
                  <SearchInputComponent onPress={handleDrawer} />
                </View>
              ),
            }}
          />
        </HomeStack.Navigator>

question from:https://stackoverflow.com/questions/65914425/two-header-button-left-and-right-react-navigation-v5

Answer 1

headerRight is same as headerLeft but you are not returning anything from the function that you have provided for headerRight

Change

headerRight: () => {
                <View style={{height: 10, width: 10, backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>;
              },

To

headerRight: () => (
                <View style={{height: 10, width: 10, backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>;
              ),

Or

headerRight: () => {
               return  (<View style={{height: 10, width: 10, backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>);
              },