I can’t center the title

Question

Using React-Native and React-navigation, for some reason nothing I tried worked to centralize the title.

Attempts:

1. Alignself

export default class First extends React.Component {
    static navigationOptions = {
        title: 'Start',
        headerStyle: {
            backgroundColor: '#000080',
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 20,
            alignSelf: 'center',
        },
    }

2. Textalign

export default class First extends React.Component {
    static navigationOptions = {
        title: 'Start',
        headerStyle: {
            backgroundColor: '#000080',
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 20,
            textAlign: 'center',
        },
    }

3. Both

export default class First extends React.Component {
    static navigationOptions = {
        title: 'Start',
        headerStyle: {
            backgroundColor: '#000080',
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 20,
            alignSelf: 'center',
            textAlign: 'center',
        },
    }

I also tried using empty headerRight/headerLeft, but nothing happened.

Answer 1

The problem is that you are not setting the header display. To solve this problem just add flex:1. In case your code would be:

static navigationOptions = {
    title: 'Start',
    headerStyle: {
        backgroundColor: '#000080',
    },
    headerTintColor: '#ffffff',
    headerTitleStyle: {
        fontWeight: 'bold',
        fontSize: 20,
        flex: 1,
        textAlign: 'center',
    },
}

You can see the code working with left-hand alignment at that link

Extracting of documentation:

headerTitleStyle: if we want to customize the fontFamily, fontWeight and other Text style properties for the title, we can use this to do it.

That is, in free translation, the headerTitleStyle uses the properties of style of Text.