CODEWITHSUNDEEP
react-nativereduxreact-reduxreact-navigation
Wild Goat
Wild Goat

Reputation: 3579

React-native redux navigation state reset after crash

We are using redux navigation and persisting redux state. However, sometimes when the user navigates to the page and an unexpected error occurs app crashes with a white screen. If the app is launched again it obviously crashes again because the same state is loaded. As the result app becomes unusable - the white screen crash straight after the app launches.

I guess it is fine to crash the app if there is a bug on one of the screens, but because of one buggy screen I don't want to make the entire app unusable for a user and it would be great to somehow reset a state and enable the user to keep using other functionality of the app.

Any ideas on how to achieve that?

Upvotes: 0

Views: 715

Answers (1)

Max
Max

Reputation: 4739

I think the real question is: do you want to persist navigation state at all? Do you really want to load last visited screen on app launch rather than the first screen of the app? I've never seen an app that does this

Another question is how do you persist your navigation state in redux. It was only a pattern when using older versions of react-navigation (v1 and v2 if I recall correctly) but even then it wasn't the optimal pattern to keep navigation state in redux (redux integration of react-navigation v1), let alone persist it on restarts. Navigation is something that should start fresh every time user launches the app

Also read about state persistence in current version (v5 - https://reactnavigation.org/docs/state-persistence) usually there is no redux involved at all

About state persistence: usually you only persist long-living things like auth state, authorization tokens, user settings, but not some dynamic data that gets discarded often. For example, if you open some page and fetch data to display on that page, there is no reason to persist that data in AsyncStorage, because why would you? This data should be reloaded every time page opens instead of restored from persisted state. Redux-persist lets you whitelist or blacklist different parts of the state

To summarize: 1. figure out if you need to persist navigation state at all. If not, problem solved 2. if you do, try to setup redux-persist the way that it doesn't persist short-living error-prone data 3. figure out how navigation state is persisted (through redux or on it's own, see examples in the links I provided earlier) 4. integrate react-native-exception-handler, catch exceptions and reset persisted navigation state in case of a crash

Upvotes: 1

Related Questions