React-native: [Android] navigationBar title is not in the middle

[timzaak]

this is the demo https://rnplay.org/apps/egL8Cw.

[satya164]

You have to adjust the margin to center it vertically. Also, about removing the left margin, if you do that, it'll overlap any buttons on the left.

I'm wondering why flexbox is not used to align the buttons and titles instead of absolute positioning.

[timzaak]

@satya164 I just make it like ios. And I use marginTop to make the title center vertically

[brentvatne]

https://github.com/facebook/react-native/blob/master/Libraries/Components/Navigator/NavigatorNavigationBarStyles.android.js

This is intentional, based on platform specific ui differences. #3028 makes it possible to use iOS navbar styles on Android and vice versa.

[RishiSa]

Thank you .It's worked for me.

[ryanhomer]

@brentvatne What are the platform specific UI differences that you are referring to regarding this issue? I am not very familiar with Android UI but from what I understand, there is a navigation stack that is maintained when an intent starts a new activity but there is no standard navigation bar with a title and back button as there is in iOS. So why is it that the title is not centred by default like in iOS?

[satya164]

@ryanhomer https://material.google.com/layout/structure.html#structure-app-bar

[mehdipourfar]

The problem still exists. After wasting 2 hours of my time trying to debug my styles, I had to resort to this quick fix for solving it.

http://stackoverflow.com/questions/35867954/changing-the-default-style-for-a-navigator-navigationbar-title

[timzaak]

@mehdipourfar if you do as

<Navigator.NavigationBar
  navigationStyles={Navigator.NavigationBar.StylesIOS}
/>

it works for me.