Title is not vertically centered in <Navigator.NavigationBar> when using custom height

[jd327]

When using custom height of 50, this is what I get for <Navigator.NavigationBar style={{height: 50}}> (as you can see it's not vertically centered):

When using a negative marginTop to adjust both the back button and the title, it cuts off the top of the back button:

What's the proper way to fix this (preferably without negative margin)?

RN 0.30 / Mac OS X 10.11.5 / iPhone 6 / iOS 9.3

P.S: I could only find this other issue, but it's not too helpful: #3142

[ifours]

You can try following workaround (you still need to use negative margin):

const navigationStyles = { ...Navigator.NavigationBar.StylesIOS };

navigationStyles.Stages.Left.LeftButton.overflow = 'visible';
navigationStyles.Stages.Center.LeftButton.overflow = 'visible';
navigationStyles.Stages.Right.LeftButton.overflow = 'visible';

navigationStyles.Stages.Left.RightButton.overflow = 'visible';
navigationStyles.Stages.Center.RightButton.overflow = 'visible';
navigationStyles.Stages.Right.RightButton.overflow = 'visible';

And pass as prop to your NavigationBar

[jd327]

That did the trick @ifours, thank you! Not sure if I should close the issue tho... maybe the core team should still take a look (so we don't have to use a workaround + negative margins)?

[charpeni]

@facebook-github-bot label Icebox

[charpeni]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/title-is-not-vertically-centered-in-navigatornavigationbar-when-using-custom-height

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[charpeni]

@facebook-github-bot close

[facebook-github-bot]

@charpeni tells me to close this issue. If you think it should still be opened let us know why.