Im trying to achieve this
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>
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>);
},