Custom title not centered on Android after upgrade to 4.0.1

[pehagg]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.1
• react-native v0.56
• os Android

Expected behaviour

Title should be centered.

Actual behaviour

The title used to be centered before upgrading from 4.0.0-beta.27 to 4.0.1. Title aligns to the left, next to the back button. Using titleStyle that centers the component doesn't help. Removing the renderRightComponent view required for centering the title on Android didn't help either.

This is the style definition for the title component:

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  },
});

[daviscabral]

This seems to be related to the react-navigation@2 upgrade.

Checking the link below, it seems now they have a headerLayoutPreset prop to manage that. That's not supported yet and will have to add it to the list.

react-navigation/react-navigation#4588
react-navigation/react-navigation#4615

[pehagg]

Was able to fix this by adding flex: 1 to the style definition of the custom title component. Got inspiration from react-navigation/react-navigation#544. Using titleStyle doesn't seem to have any effect. Closing issue.

[daviscabral]

I'll keep this opened since it was an existent feature that is not working anymore and probably will be an easy to fix now that react-navigation provides an API for that.

That's also possible using custom nav bars.

[aksonov]

Duplicate of #3153