React-native-router-flux: Title is not aligning to center

[ggunti]

Version

• react-native-router-flux v4.0.0-beta.31

Expected behaviour

Title will be aligned to center.

Actual behaviour

Title still remaining on the left side (default).

Steps to reproduce

  <Router>
    <Scene
      key="root"
      titleStyle={{ alignSelf: 'center' }}
    >
      <Scene
        key="splash"
        component={Splash}
        hideNavBar
        initial
      />
      <Scene
        key="login"
        component={Login}
        title="EasyYard Login"
        type="reset"
      />
      <Scene
        key="home"
        component={Home}
        title="EasyYard Home"
        //initial
      />
    </Scene>
  </Router>

Remark: On version v4.0.0-beta.28 it is working perfectly.

[m-vdb]

Having the same issue. Only on Android

[m-vdb]

Here is what worked for me:

const styles = StyleSheet.create({
     navigationBarTitleStyle: {
       // centering for Android
      flex: 1,
      textAlign: 'center'
  }
});

...
<Scene
    titleStyle={styles.navigationBarTitleStyle}
    ...
...

[haddow777]

The problem with aligning the title manually is that it becomes lopsided once icons like the back button are added. It is centered in an element that has been pushed over by the icon element.
Blah

[haddow777]

Okay, I found it out. Don't style the title to center it, as I mentioned before, it will look ugly once icons added to back title text.

headerLayoutPreset="center"

Place the above in your top level scene. For some reason, on Android the title is defaulted to the left, even though the documentation says it's supposed to default to the center. Here's mine:

<Scene
  key="root"
  headerLayoutPreset="center"
>