LeftButton was not rendered

[anjar10]

Version

Tell us which versions you are using:

• react-native-router-flux: 3.36.0,
• react-native v0.34.1

Expected behaviour

Rendering priority:
-Left Button
-Back Button

Actual behaviour

Rendering priority:
-Back Button
-Left Button

Steps to reproduce

1. Create scene1 and scene2
2. From scene1 create a button to redirect to scene2 (stack = [scene1, scene2])

In scene2:

1. Set hideBackImage = true, renderBackButton = null
2. Set leftButtonImage = an image, onLeft = a function

In scene2, leftButton was not rendered. Maybe it was caused by:
-renderBackButton in scene2 always return not null component (because scene2 is child of scene1)
renderBackButton return null if and only if the scene is a root
if (state.index === 0 && (!state.parentIndex || state.parentIndex === 0)) { return null; }

-rendering priority
Here is source code to render NavBar
<View> {renderTitle ? renderTitle(navProps) : state.children.map(this.renderTitle, this)} {renderBackButton(navProps) || renderLeftButton(navProps)} {renderRightButton(navProps)} </View>
renderLeftButton in scene2 was never rendered, because, it's priority is lower than renderBackButton

[gkrinc]

This was working in v3.35.0. After updating to v3.36.0 my left button (burger menu icon) stopped rendering.

[ddolheguy]

Yep can also verify this is a bug in v3.36.0, rightButton works fine but leftButton doesn't get called.

[dragfire]

I think this will be solved by changing it to { renderLeftButton(navProps) || renderBackButton(navProps)}

[ddolheguy]

Yes @dragfire you're correct. Can we please close this issue as @dragfire comment is the solution

[qpowell]

@aksonov @ddolheguy Is this going to be updated on master, or is the recommended to solution to override Navbar.js and fix it locally? Thanks

[aksonov]

Sometimes people need back over left, sometimes left over back. So for now, yes, fix it locally. Or propose PR with some configured property (like preferLeftOverBack) with changed order.

…

On 17 Jan 2017, at 19:44, Quinten Powell ***@***.***> wrote: @aksonov <https://github.com/aksonov> @ddolheguy <https://github.com/ddolheguy> Is this going to be updated on master, or is the recommended to solution to override Navbar.js and fix it locally? Thanks — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1320 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQpcR57x6RqpA0sLSW6EIn3s-CCxE8kks5rTQv7gaJpZM4KelV0>.

[qpowell]

@aksonov thanks for the quick response!

[apooslr]

Hi, I am having a similar problem. renderLeftButton is not rendering the button, but if I use the same code for renderRightButton that button is rendered.

<Scene key="bookingView" component={MobileBooking} title="Home" type = "replace" renderBackButton={() =>{return null;}} renderLeftButton={() => { return( <View> <TouchableOpacity> <Ionicons name="md-menu" size={30} color="#fff" /> </TouchableOpacity> </View> );}} />
Versions used:
react-native-router-flux: 3.38.0,
react-native : ^0.43.4