react native icon in header to align all the way to left

user_6776441 0
Viewed 455

i want to put an icon in top left of the screen. in the header of a stack navigator ...

<Stack.Screen name="Menu" component={HomeScreen} 
      
      options={({ route }) => ( {
        headerTitle: (props) => <View style={{flexDirection:'row', flex:1, justifyContent:"center", borderColor:"black", borderWidth:1, alignSelf:"stretch"}}>
                                <Text style={{ fontSize:config.headerFontSize, fontWeight:config.headerFontWeight}}>{config.titleMainMenu}</Text>
                                {__DEV__  && 
                                
                                    <Ionicons name="settings-outline" size={30} color={config.foregroundColor}></Ionicons>
                                
                                }
                                <View style={{alignItems:"flex-end"}}>
                                <Ionicons name="person-outline" size={30} color={config.foregroundColor} ></Ionicons>
                                </View>
                                </View>
                                ,
        headerStyle: {
            backgroundColor: config.backGroundColor
          },
        headerTintColor: config.foregroundColor,
        headerBackTitle:" "
    })} />

i want the icon-person to appear at the right most part of the screen...see picture below ..i want obviously for it to work on iphone and android both. i think i was able to achieve once in android by splitting the view in 8/10 and 2/10 but then it did not work in iphone...

enter image description here

react-native-ios react-native
2 Answers

To put an icon on top left of the screen in the header of a stack navigator use headerLeft property inside options of Stack.Screen

  headerLeft: () => (
    <Button
      onPress={() => alert('This is a button!')}
      title="Info"
      color="#fff"
    />
user_110265200

just use headerLeft: for the left side

or

headerRight to right for right side

see here

user_91614780
Related