React Navigation re-render / reset previous page’s state on navigation or goBack
TimeSaver: (If you understand the title, go to the SOLUTION: below directly.)
I am writing this article after struggling a lot over a simple requirement. I knew it was a very small thing, but I was unable to find the solution over internet. Various stackoverflow and medium articles, but not the thing I was looking for.
Problem statement:
In a react native mobile app, when a user navigates “to” or “back” from one page to another, I want to reset/clear the Textinput fields on that page.
Isn’t it a simple thing to achieve. Yes it is indeed.
The obvious answer was to clear the inputs just before navigating to another screen. That’s a perfectly fine approach when you navigate from within the screen or its component.
Let’s see what made it difficult for me. There are various scenarios that can make you bounce on this problem.
In my case it was while using redux + react-navigation. Furthermore, I was having a scenario where:
1. User opens the app and first screen is login screen.
2. User provides an input, say login credentials like loginId, password and hits Submit button.
3. App calls the redux action to verify the user in firebase…
