Search code examples
javascriptreact-nativereact-navigationreact-navigation-stack

Can't center title in react navigation stack - React-Native?

I can't center the title in react-navigation V4+ its work fine before with v3, when use RN-stack I can't center the title for some reason I don't know.

it just appears on the right,

I try these in headerTitleStyle and headerStyle

justifyContent, alignItems and alignSelf but not works :/

If you have any idea about it tell me?

"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-native-screens": "^2.0.0-alpha.29",

here's Code

static navigationOptions = ({navigation}) => {
    const showModal = navigation.getParam('showModal', () => {});
    return {
      title: navigation.getParam('title'),
      headerTitleStyle: {
        fontFamily: 'Cairo-Regular',
        fontSize: Platform.OS == 'ios' ? 16 : 18,
        color: '#fff',
        flex: 1,
        textAlign: 'center',
      },
      headerStyle: {
        backgroundColor: navigation.getParam('color'),
      },
      headerRight: (
        <Grid>
          <Row>
            <Body>
              <Button
                transparent
                icon
                onPress={() => {
                  navigation.openDrawer();
                }}>
                <Icon
                  name="ios-menu"
                  type="Ionicons"
                  style={{fontSize: 25, color: '#fff'}}
                />
              </Button>
            </Body>
            {!navigation.getParam('title').includes('details') && (
              <Body>
                <Button transparent icon onPress={() => showModal()}>
                  <Icon
                    name="more"
                    type="Ionicons"
                    style={{fontSize: 25, color: '#fff'}}
                  />
                </Button>
              </Body>
            )}
          </Row>
        </Grid>
      ),
      headerLeft: (
        <Grid>
          <Row>
            <Body>
              <Button
                transparent
                icon
                onPress={() => {
                  navigation.pop();
                }}>
                <Icon
                  name="arrow-round-back"
                  type="Ionicons"
                  style={{
                    fontSize: Platform.OS == 'ios' ? 30 : 25,
                    color: '#fff',
                  }}
                />
              </Button>
            </Body>
            <Body>
              <Button
                transparent
                icon
                onPress={() => {
                  navigation.navigate('search');
                }}>
                <Icon
                  name="search"
                  type="Ionicons"
                  style={{
                    fontSize: Platform.OS == 'ios' ? 30 : 25,
                    color: '#fff',
                  }}
                />
              </Button>
            </Body>
          </Row>
        </Grid>
      ),
    };
  };
Solution

  • You need to use headerTitleAlign

    https://reactnavigation.org/docs/en/stack-navigator.html#headertitlealign