componentWillReceiveProps is invoked not in the current screen react native [duplicate]

Question

This question already has an answer here:

• How do I force a component to unmount when I navigate to a new page in react native? 2 answers

I'm using react-navigation and createStackNavigatior to handle my navigation in the app. In the main loading screen I use componentWillReceiveProps to handle results coming from my reducer.

The problem occurs when I navigate away from the loading screen and whenever the same prop is updated in a different screen, the componentWillReceiveProps is invoked in the main loading screen that I already navigated from although I expect it not to run at all.

Is there a way to disable that function from firing after it is supposed to be unmounted?

Answer 1

when you navigate from a screen to a screen in a stack navigator , the previous screen(s) stay mounted

You can either totally unmount the screen by using this.props.navigation.replace('routeName') instead of using navigate or prevent the prev screen from updating:

From the official docs of React Navigation:

React Navigation emits events to screen components that subscribe to them. There are four different events that you can subscribe to: willFocus , willBlur , didFocus and didBlur . Read more about them in the API reference .

so try on willBlur to stop your component from firing the event of componentWillRecieveProps . You can set a flag that is false when willBlur is invoked and check it when recieving props and preventing any update from firing