React-native-router-flux: Actions.pop(refresh: { }) cannot trigger componentWillReceiveProps at children scene

[OscarYuen]

Version

Tell us which versions you are using:

• react-native-router-flux v3.40.1
• react-native v0.45.1

Expected behaviour

Actions.pop(refresh: { }) would trigger componentWillReceiveProps at parent scene
The children scene should also trigger componentWillReceiveProps

Actual behaviour

Actions.pop(refresh: { }) would trigger componentWillReceiveProps at parent scene but not children scene.
Since my tab view is put under children scene, when poping back to that page, only the parent scene is calling componentWillReceiveProps but not children scene. Then my tab view is unable to refresh by running the componentWillReceiveProps

Steps to reproduce

1.
2.
3.

[Symous]

+1 ! Help!

[Symous]

@OscarYuen Hi,friend.Have you solve this problem? :-)

[OscarYuen]

@Symous My temporary workaround is to discard the parent-children scene. I separate the tab view from the children scene and add it as a component inside the the parent scene component. componentWillReceiveProps would be triggered in that tab view component.

[aksonov]

Sorry, but it seems anti-pattern (pop & refresh). You have to use app state managers (Redux or Mobx or similar) and change state of your app. RNRF is not State management framework for your app.

[shaoyuancc]

Notes Regarding Pop and Refresh using react-native-router-flux

Interaction between multiGraphScene, sensorChoiceModal and index.js, where sensorChoiceModal is instantiated.

Desired behaviour: Open Modal from Scene, complete Modal, pop modal and refresh Scene with new props.

Methods tried:
1) Method:
- Open Modal with standard
" Actions.SensorChoiceModal({currentPageIndex:currentPageIndex, mode:'graph'}); "
from Scene
- In final function of modal:
" Actions.pop();
Actions.MultiGraphScene({launchRefresh:true, type:ActionConst.REFRESH}); "
Outcome:
- Modal will close, Scene will receive new props in " componentWillReceiveProps(nextProps) "
- When Modal is next launched from the same scene, get navigationState.Children.key conflicts with another child error
- What i suspect is that the Modal is not popping properly
- See Actions error and navigationState.children conflicts with another child!
(https://github.com/aksonov/react-native-router-flux/issues/782)

2) Method:
- Open Modal with standard
" Actions.SensorChoiceModal({currentPageIndex:currentPageIndex, mode:'graph'}); "
from Scene
- In final function of modal:
" Actions.MultiGraphScene({launchRefresh:true, type:ActionConst.REFRESH});
Actions.pop(); "
Outcome:
- Modal will close, Scene will not receive new props in " componentWillReceiveProps(nextProps) "
- When Modal is next launched from the same scene, it is fine
- What i suspect is that the Refresh is not occuring

3) Method:
- Open Modal with standard
" Actions.SensorChoiceModal({currentPageIndex:currentPageIndex, mode:'graph'}); "
from Scene
- In final function of modal:
" Actions.pop({refresh{launchRefresh:true}}); "
Outcome:
- Modal will close, Scene will not receive new props in " componentWillReceiveProps(nextProps) "
- When Modal is next launched from the same scene, it is fine
- What i suspect is that the Refresh is not occuring
- See Actions.pop(refresh: { }) cannot trigger componentWillReceiveProps at children scene
(https://github.com/aksonov/react-native-router-flux/issues/1965)

4) Method:
- Open Modal with standard
" Actions.SensorChoiceModal({currentPageIndex:currentPageIndex, mode:'graph'}); "
from Scene
- In final function of modal:
" Actions.MultiGraphScene({launchRefresh:true, type:ActionConst.RESET}); "
Or
" Actions.MultiGraphScene({launchRefresh:true, type:ActionConst.REPLACE}); "
Outcome:
- Modal will not close
- What i suspect is that the navigation stack is cleared so the scene is no longer there to go back to
- Same issue with trying to launch it with type RESET or REPLACE.

5) Method:
- In index.js instantiate Modal with type = "ActionConst.PUSH_OR_POP"
- Open Modal with standard
" Actions.SensorChoiceModal({currentPageIndex:currentPageIndex, mode:'graph'}); "
from Scene
- In final function of modal:
" Actions.MultiGraphScene({launchRefresh:true, type:ActionConst.REFRESH});
Actions.pop(); "
Outcome:
- Modal will close, Scene will refresh, seems very promising, but the first time you complete the Modal and close it, it is not unmounted. When Modal is next launched, " componentWillReceiveProps(nextProps) " is not called, it is not reconstructed, its almost as if a JUMP has occurred. On second close, it will be unmounted.
- I have no idea what is happening here

FINAL WORK AROUND SOLUTION
Method:
- Open Modal with standard Actions, but pass it a callback function! (almost like passing it "componentWillReceiveProps")
" Actions.SensorChoiceModal({currentPageIndex:currentPageIndex, mode:'graph',callbackFunction:this.onSensorChoiceComplete});"
- Make sure to bind function in constructor:
" this.onSensorChoiceComplete = this.onSensorChoiceComplete.bind(this); "
- In final function of modal:
" this.props.callbackFunction(arg);
Actions.pop(); "
Outcome:
- Modal will close, callback function will run and it will receive arguments passed to it, thereby acting as " componentWillReceiveProps(nextProps) "
- callback function can then initiate refresh

Hope this helps someone, I spent hours trying to figure it out :)

[MichaelPintos]

setTimeout(()=> {Actions.refresh({refresh: true})}, 500); Actions.pop();

now can use componentWillReceiveProps() for refresh the data.

[JSMRajesh]

This will work. Actions.pop({refresh: {refresh:Math.random()}});

[drsounds]

A better way is to call the fetchXXX function you use in the parent container directly in the component that fetch new info and updates the underlying view directly through redux instead of messing with the navigator, like this.

onSubmit() => {
doTheAction().then((result) => {
Actions.pop();
fetchXXX(); // The fetch function you call in the container of the parent container(layout)
})
}