React-native-router-flux: Title not centered in navBar in Android with one of left/right icons

[iuraya]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.21
• react-native v0.47.1

Expected behaviour

Title appears correctly centered when neither left and right icons exists or when both of them exist
With just one of left or right icons at the same time title should appear centered

Actual behaviour

The title is not centered if only one of right and left icons exists at the same time.

[JessieYF]

I encountered this issue as well. What I do is adding a placeholder for left button and right button on root Scene. When the child Scene has any left/right button, override the property.

renderPlaceholder = () => <View />
<Scene
     key="root"
     renderLeftButton={this.renderPlaceholder}
     renderRightButton={this.renderPlaceholder}
/ >

eg: child Scene

<Scene
     key="sub"
     title="sub"
     component={PageComponent}
     hideTabBar
     renderLeftButton={() => <BackButton />}
/>

[aksonov]

Please check latest master and PR #2491 (I've just merged it). Unfortunately I'm working on ios app only.

[daviscabral]

@aksonov I can help you testing changes on android - just tag me in the PR and give me instructions and I can check it there. :+1:

[aksonov]

@daviscabral Could you check this ticket? :)

[sagark1510]

@aksonov it's still the same on android. Do I have to add any props to scene to get reflection or it should work automatically?

[aksonov]

Right, I see this bug and PR is welcome.

[PiotrKujawa]

"react-native": "0.51.0",
"react-native-router-flux": "^4.0.0-beta.25",

[Albinzr]

Will this be fixed?,I cant push the app to production without a fix.

[daviscabral]

Sorry - I've been idle in the last few days but I am getting back now to check this. I'll get an update as soon as I get my simulator up and running here.

[kamranyounis12]

@daviscabral any update?

[daviscabral]

Issue is still present on master - going to investigate now to see if I am able to solve it.

[Gulci]

This issue is also present on React Native v. 0.54.2 with react-native-router-flux v. 4.0.0-beta.28.

[daviscabral]

I am a bit busy lately and couldn't finish the PR that I've started. I'll check if later today I'll spare some time for it. Thank you.

[acollazomayer]

@davidcabral Is this going to get fixed?? Thank You

[daviscabral]

On it - should have a PR in a few hours. I am in a company transition, things are just crazy lately.

[daviscabral]

Sorry - took longer than I thought cause I was trying to fix the Example project that was not running - so I couldn't actually test and verify it properly.

[acollazomayer]

@daviscabral Thank you! I manage to solve the issue making a custom nav bar. However this is better! Thanks!! Good luck with the company transition!

[daviscabral]

Thank you. Glad to hear that.

[xbogdan]

I'm still having this issues with react-native 0.55 and react-native-router-flux 4.0.0-beta.31 .
Was this fixed or should I follow @acollazomayer solution ?

[massimopibiri]

The solution written by @JessieYF works good

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists

[og24715]

This issue still exists with RNRF v4.0.5. Im not able to open it, but I think that it have to be open.

[aksonov]

cc @daviscabral

[daviscabral]

Fixed on #3256.

This was possible because of react-navigation changes, when headerLayoutPreset support was added. Docs were also updated to reflect it.

Example.js file has an example of how to make it work, below the line where it happens:

<Stack key="customNavBar" hideTabBar headerLayoutPreset='center'>