renderLeftButton not working when back={true}

[mwskwong]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.1 (v3 is not supported)
• react-native v0.55.4

Expected behaviour

Action.refresh({
    left: <LeftButton />
});

should override the back button and display the custom <LeftButton/> component in any case.

Actual behaviour

This doesn't happen IF AND ONLY IF

<Scene
    back={true}
/>

I have also tried:

Action.refresh({
    renderBackButton: <LeftButton />
});

Action.refresh({
    back: <LeftButton />
});

Action.refresh({
    renderBackButton: () => <LeftButton />
});

Action.refresh({
    back: () => <LeftButton />
});

Action.refresh({
    renderLeftButton: <LeftButton />
});

And none of above works.

Note, the back button still appear and takes effect when back is not specified (of course it will be hidden if back={false})

[daviscabral]

I don't think it works like that with refresh - but I'll check it and get back to you.

[mwskwong]

Basically, this is what I'm trying to do:

I have to allow user to select multiple items and delete them, similar to the file manager. You have a delete button on the right, when clicked, the left button will be replaced with a "select all" check box. If the user press cancel or confirm, the left button will be reverted back to a normal "back" button.

This is the only way I can think of doing it. Please feel free to suggest any better solution, if this is not how it suppose to do.

[daviscabral]

@matthewkwong2 for params, that's correct, it is renderLeftButton - but since back was true - it seems it is being replaced right after being set.

[daviscabral]

It seems for react-navigation@2 some extra work is going to be needed.

RN issues related to this:
react-navigation/react-navigation#2770
react-navigation/react-navigation#1171
react-navigation/react-navigation.github.io#191

Libs that might help here:
https://github.com/ReactTraining/react-broadcast

RN Docs:
https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
https://reactnavigation.org/docs/en/with-navigation-focus.html

[aksonov]

@matthewkwong2 It looks like a hack and probably just not supported by React Navigation 2.x (its SET_PARAMS action). Instead you should define one renderLeftButton that changes its content depending from navigation state. Actions.refresh should be used just to update navigational state (i.e. pass values not functions)