Search code examples
react-nativeasyncstoragestack-navigator

Getting AsyncStorage data on back navigation in react native


I have a home screen which pulls some data from AsyncStorage in componentDidMount(). I'm using StackNavigator to move from my home screen to another screen to add some data to AsyncStorage which should also be shown on the home screen. Thanks to StackNavigator I have a back arrow on that second screen which allows navigation back to my home screen. My home screen componentDidMount() does not get invoked on that back navigation so my home screen does not get updated with the new data I added.

I don't know where to pull from AsyncStorage in my home screen now.


Solution

  • This isn't related to AsyncStorage, what is happening is that react-navigation only mounts screens once (thus triggering your componentDidMount) per mounted navigator.

    I'm assuming when you load data from AsyncStorage you save it to the component inner state, to redux store, or use it as params of a subcomponent. Something react-like. So you can pass a callback to the second screen that changes this inner state with setState, thus triggering a rerender, or you could save the new data in redux and connect the store and your home screen.