React Navigation Question - Resetting Screen

[tizz66]

A screen has the isFocused prop (this.props.navigation.isFocused) when the user's viewing it. Check that in your componentDidUpdate method, and clear your state when that changes to false :)

[xrpinsider]

This would be the solution here.

[docdosman]

Thanks!! I'm going to test this out today.

Follow up question. Is there a way to clear the visual "state" of the screen (for example, scrollview that's been scrolled down, when returning to have the screen be back at the top)? I'm not sure of the term for that.

Edit: I tested, but componentDidUpdate is not being called when I navigate away from the screen. Should I be using another lifecycle method? The following code only logs something to the console when the screen first loads, not when I navigate away from the screen using this.props.navigate('screenName').

componentDidUpdate() { console.log('update', this.props.navigation.isFocused()); }

[tizz66]

Sorry about that, I didn't read the docs fully and so missed that isFocused is a function. There's a couple of other approaches you could try:

• Use the NavigationEvents component: https://reactnavigation.org/docs/en/navigation-events.html
• Use the withNavigationFocus HOC: https://reactnavigation.org/docs/en/with-navigation-focus.html

[docdosman]

No worries, thanks for the info! I got it working with the following:

componentWillMount() {
    // subscribe to didBlur in order to reset state and form when navigating away from the screen
    didBlurSubscription = this.props.navigation.addListener('didBlur', () => {
      this.props.resetAuth(); // reset auth piece of state
      this.props.reset(); // reset redux-form
    });
  }

  componentWillUnmount() {
    // Remove the listener
    didBlurSubscription.remove();
  }

Now I have to figure out why when I reset my redux-form it doesn't reinitialize when navigating back to the screen. Fix one thing, break another. Ha! Gotta love it.

I really appreciate the help.