1

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?

Soragim
  • 317
  • 7
  • 19

1 Answers1

2

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

mahmoudafer
  • 1,139
  • 3
  • 14
  • 30