How can I tell if the screen is navigated to with ReactNavigation

Question

I'd like to refresh the data on the screen in a react native app whenever the screen appears - like in a `ViewWillAppear` method. I tried using the `componentWillMount` method but it looks like it fires once before it appears, and doesn't fire again when the view is navigated to again. Looking at this example https://reactnavigation.org/docs/guides/screen-tracking, it looks like I can add a listener on the `onNavigationStateChange` method on the root navigation, but I'd like to keep the logic in the screen as it gets confusing if I move the data fetch logic for that one scree outside to the root navigator. I've tried to follow the example and set that method to my stacknavigation but it doesn't seem to trigger. ``` <RootNavigation ref={nav => { this.navigator = nav; }} onNavigationStateChange={(prevState, currentState, action) => { // maybe here I can fire redux event or something to let screens // know that they are getting focus - however it doesn't fire so // I might be implementin…

Accepted Answer

So here's how I did it using the `onNavigateStateChange`.

```
      <RootNavigation
        ref={nav => { this.navigator = nav; }}
        uriPrefix={prefix}
        onNavigationStateChange={(prevState, currentState) => {
          const currentScreen = this.getCurrentRouteName(currentState);
          const prevScreen = this.getCurrentRouteName(prevState);
          if (prevScreen !== currentScreen) {
            this.props.emitActiveScreen(currentScreen);
            {/*console.log('onNavigationStateChange', currentScreen);*/}
          }
        }}
      />
```

And in your screen you can check to see if your view will appear, note `MyPage` is the route name from your navigation object.

```
  componentWillReceiveProps(nextProps) {
    if ((nextProps.activeScreen === 'MyPage' && nextProps.activeScreen !== this.props.activeScreen)) {
      // do your on view will appear logic here
    }
  }
```

How can I tell if the screen is navigated to with ReactNavigation

Solution

Problem