react-native-router-flux : No React lifecycle method is getting called on back navigation

2
votes

I am developing a react native app. I am using react-native-router-flux library for navigation in the app.

The library is working fine but while back navigating no react lifecycle method is getting called.

suppose for e.g. I pressed back button on page 2, It gets navigate to page 1 and the componentWillUnmount() of page 2 gets called but no lifecycle methods of page 1 gets called.

I want to refresh the page 1 according to new state.

Any help would be greatly appreciated.

1
reactjsreact-nativereact-routernavigatorreact-native-router-flux
Post the code and there are many ways of achieving what you want. - octohedron

1 Answers

0
votes

When navigating back, by default Actions.pop() is called with no arguments. In order to refresh Page 1, you need to override the functionality of your back button and call Actions.pop({refresh:{<propsToSetToPage1>}}). This should trigger componentWillReceiveProps(nextProps) in Page 1, where nextProps are the new props that you put in the pop().

The following is from react-native-router-flux's documentation:

Actions.pop() will pop the current screen. It accepts following optional params:
    {popNum: [number]} allows to pop multiple screens at once
    {refresh: {...propsToSetOnPreviousScene}} allows to refresh the props of the scene that it pops back to

PS. If you're developing for Android, you might wanna do this for when the user presses the hardware back button, too. Check BackAndroid on React Native's official documentation.