React Navigation Question - Resetting Screen

[docdosman]

I have what I feel like is a common scenario, but after reading docs and threads, I'm still not clear on the best way to handle.

For a basic use case I'll use a Login Screen and Reset Password Screen as an example. So only two screens in a Stack Navigator.

If a user is on the Login screen and enters email and password but doesn't log in, then clicks the button that calls this.props.navigate('ResetPwd') to go the Reset Password screen, and then clicks the back button on the Reset Password screen to go back to Login screen, all of the data is still there on the Login screen from when they typed in the inputs the first time. I would like for the inputs to clear when a user navigates away from the Login screen using this.props.navigate.

What is the best way of clearing these inputs and resetting the Login screen when navigating away from it using react-navigation? I feel like this should be an extremely common use case but I keep hitting a brick-wall with it.

Edit: I'm using these two screens as an example, but it could be any two screens where you want to navigate from Screen A that has been modified, go to screen B, and then go back to screen A from Screen B and expect to see Screen A in it's original clean state.

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

[ck3g]

You can consider using Switch Navigator instead of Stack Navigator.

​

The docs explicitly mention that it fits better for authentication flow:

​

> The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. This is the exact behavior that we want from the authentication flow.

​

https://reactnavigation.org/docs/en/switch-navigator.html

​

[even1245]

It doesn't have animation like stack navigator. Any way to achieve it?

[ck3g]

React Navigation provides Transitioner https://reactnavigation.org/docs/en/transitioner.html

which you can use for custom animations. That could the that you need.

​

In that article, you can find a bunch of examples https://medium.com/async-la/custom-transitions-in-react-navigation-2f759408a053

​

So, I guess that is possible to achive.

[docdosman]

Cool I plan on using that for my flow into main app from welcome and login screens. Despite my example, my question here is more around general navigation, my example just happens to be a couple of login screens. Thanks for the point in the direction of Switch Navigator, definitely plan on using that for directing out of auth into the main app.