React-native-router-flux: Title in navigation bar is not centered in Android (7.0)

[mikaello]

Version

• react-native-router-flux v4 (same version as in Example-app, but also tested with 4.0.0-beta.15 with same result)

• react-native v0.44.0 (also tested v0.46)

• Samsung S7

• Android 7.0

Expected behaviour

Title in navigation bar to be centered in both iOS and Android

Actual behaviour

Title in navigaton bar is not centered in Android (but is centered in iOS).

Android (wrong):

iOS (correct):

Steps to reproduce

You can use the Example app:

# Get the code
git clone [email protected]:aksonov/react-native-router-flux.git
cd react-native-router-flux/Example

# Install dependencies
yarn

# Run it
react-native run-android

I have tried to center the title by adding centering-styles to titleStyle- and headerStyle-props, but with no result. The best I can do is adding Android-specific left-padding/margin to titleStyle to make it centered, but that is difficult with different titles and different screen sizes.

[aksonov]

https://github.com/react-community/react-navigation/issues/253

[mikaello]

Ah, thanks!

<Scene
  ...
  titleStyle={{alignSelf: 'center'}} 
/>

... solved the issue.

[mikaello]

I created a PR #2172 with the example updated with this prop, if that is wanted in the example.

[krishan-kumar-mourya]

For me it worked with
<Scene ... titleStyle={{ textAlign: 'center', flex: 1 }} />