CODEWITHSUNDEEP
javascriptreactjsandroid-studioreact-nativereact-redux
Dpseudo Coders
Dpseudo Coders

Reputation: 23

Cannot Center Align Header Title in react-native android

Using stack navigation I have defined the header Title by making it a child component as below

Headertitle.js

render(){
   return(
        <View style={{flexDirection:'row',justifyContent:'center'}}>
        <Text style={{fontSize:RF(3),fontWeight:'bold',color:'#fff'}}>XYZ</Text>
        <Text style={{fontSize:RF(3),color:'#fff'}}>ABC</Text>
        </View>
)}

Parent Component using this header

 static navigationOptions = ({ navigation }) => {
              return {
                headerTitle:(<Headertitle/>),
                headerTitleStyle: {flex: 1, textAlign: 'center'},
                headerRight: (
                  <Icon
                    onPress={navigation.getParam('handleLogout')}
                    name="power-off"
                    type="font-awesome"
                    color="#fff"
                     style={{marginRight:20}}
                    size={RF(4)}
                    backgroundColor="#006DB7"
                  />
                ),

                headerLeft:null
              };
            };

It works very well in IOS but cannot be center aligned in Android. Please help. Thanx in advance

Upvotes: 1

Views: 5155

Answers (4)

Ejaz
Ejaz

Reputation: 1632

We can do it by setting the navigation option's headerTitleAlign property.

navigation.setOptions({ 
    headerTitleAlign: 'center'
});

Defaults to center on iOS and left on Android.

Upvotes: 5

SooCheng Koh
SooCheng Koh

Reputation: 2312

there is a new option in navigator

createStackNavigator(routes, { headerLayoutPreset: 'center' })

here is pull request: https://github.com/react-navigation/react-navigation/pull/4588

Upvotes: 5

Klaudia Brysiewicz
Klaudia Brysiewicz

Reputation: 129

I had the same problem, here is solution:

    headerLeft: (<View></View>),
    headerRight: (<View></View>),
    headerTitleStyle: {
      color : APP_COLORS.primary, 
      display: 'flex',
      flex: 1,
      textAlign: 'center',
      fontWeight: 'normal',
      fontSize: 15,
    }

Upvotes: 2

mmjensen
mmjensen

Reputation: 51

For me it worked to add: 

    marginRight: 'auto',
    marginLeft: 'auto'

.. to headerTitleStyle

Upvotes: 3

Related Questions