CODEWITHSUNDEEP
navigationstylesreact-native
Majid Lotfinia
Majid Lotfinia

Reputation: 714

react native header title position

enter image description here

how can I change position of header title to right in react native:

code is:

Home: {
screen: BookViewContainer ,
navigationOptions: ({navigation}) => ({
  headerRight: <DrawerIcon iconDefault='menu' tintColor={Constants.styles.secondColor} size={30}/>,
  title: Strings.book_label,
  headerStyle: {
    backgroundColor: Constants.styles.mainColor
  },
  headerTintColor: Constants.styles.secondColor
})},

In ios it's show title in center, back button in left, menu button in right and it's ok but for android i need to title in right and back button in left

please help

Upvotes: 1

Views: 7599

Answers (2)

user1557496
user1557496

Reputation:

Another tricky way is to implement with absolute and zindex props, if you're using react-native-base

<Button transparent>
    <View style={{}}>
        <Icon name="more-vert" style={{
            zIndex:-999 ,
            position:'absolute',
            right:0,
            top:0,
            }}/>
        <Picker
            style={{
              zIndex:999,
              position:'absolute',
              //right:0,
              top:-35,
              backgroundColor:'transparent',
            }}
            onValueChange={()=>{}}
            mode="dropdown">
            <Item label="Wallet" value="key0" />
            <Item label="ATM Card" value="key1" />
        </Picker>
    </View>  
</Button>

see image here !!

Upvotes: 0

Majid Lotfinia
Majid Lotfinia

Reputation: 714

for android i added this line:

headerTitleStyle: {
   alignSelf: (Platform.OS === 'android') ? 'flex-end' : 'center'
}

for example for Home sense I use like below code:

Home: {screen: BookViewContainer , navigationOptions: ({navigation}) => ({
  title: 'test title',
  headerStyle: {
    backgroundColor: 'red'
  },
  headerTintColor: 'blue',
  headerTitleStyle: {
    alignSelf: (Platform.OS === 'android') ? 'flex-end' : 'center'
  }
 })},

Upvotes: 2

Related Questions