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

Question

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 eg 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.

Answer 1

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.