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?
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
Related
I am fairly new to React Native and I am building an app that will be using navigation. I have a solution for navigating screens that seems to work just fine however I do not see many people using this approach. I am using state in a navigation component to render a specific screen(or component).
The main solution(the documented solution) I see is using this package
#react-navigation/native #react-navigation/native-stack
My current solution works like this:
const [screen, setScreen] = useState(0)
const returnScreen = () => {
switch (screen) {
case 0:
return <AccountScreen/>
}
}
When you click a menu icon, it would change the state to say 1, and render a different screen.
Can someone help me understand why this is a bad approach or an uncommon approach(if it is)? My app will only have 5-7 screens, I am mainly looking to understand why the library is the community approach and if I am missing something.
If you wanted the ability to navigate to other screens to exist outside your menu/drawer you will have to either prop drill your setScreen function or create a context to make it accessible to other components. While this isnt hard to do, it is something that all #react-navigation navigators do without requiring additional code.
If you wanted to enable going to the previous screen, your current navigation code becomes obsolete. Just returning a screen is no longer enough, as you need to track and modify navigation history. So you write more code that you have to test and debug (keep in mind that #react-navigation/stack already does this).
If you are certain that your app will remain small and your navigation features wont increase too much then your approach is completely fine. But if your app will increase in size then you probably will find yourself implementing, testing, and debugging features that have already been implemented, tested, and debugged by the #react-navigation community
Is it possible To store some data in App. Even after User logout it and close it from recent Apps.
if yes then How.
I heard About redux and redux persist. But I am not able to store data in app when I logout and close my app from recent app. So I dont know if I cant execute it properly.
is redux and redux persist really store data even after app logout and close from recent app ??
or is there another method or library for that..
I Build an app and used Expo.Sqlite as a data store.
I even build an ORM for it if you are interested I could post it here to.
I am new to React Native and I want to add Redux to my project.
And I want to know if redux store values are saved when app is exited.
If it is not saved, how can I handle this problem?
In web development, we use cookie and local storage. Thanks in advance.
[Edit]
If I must use async storage, is there any easy way to approach this?
Redux state is usually emptied upon when an app is exited (not minimised).
What you should to instead is to use AsyncStorage to persist your access token, and get them from same storage when the app starts. You can do this in a didMount lifecycle, or any other means you may choose.
There is Ayncstorage for react native which is equivalent to localstorage in browser.
You can refer this
https://reactnative.dev/docs/asyncstorage
Or you can use redux-persist if you want to persist redux store when app exits which would otherwise get lost.
https://github.com/rt2zz/redux-persist
How can I intercept the reloading process on Android (Dev menu -> Reload)?
I want to clear some part of Redux store when is happend the action.
The question provides quite a little insight but seeing that some working is required on the redux store every time there is a reload, you can catch INIT action fired by Redux every time the store is initialised, IMO
At the time of this post I believe that there are no geofencing modules available for react native so I would like to implement an alternative poor man's strategy. I discovered react native's geolocation module however the official doc is not clear:
1) Does the Geolocation module run in the background and get the current user coordinates automatically (even if the app is in the background)? If yes, are these stored in a variable or a state?
2) If (1) is true, how can I detect a change in state? Because once I detect a change in state (i.e. user's location) I would like to push this new location to a remote server and store it in a database. On the other hand I do not want to store each and every inch the user is moving!
Does this strategy make sense at all? My concerns are battery consumption as well of course..
1) You need to enable this feature in xcode Then save the location you get from the 'navigator.geolocation.getCurrentPosition' callback somewhere in you app e.g. in your AsyncStorage
2) The callback is only getting called if the location is changed. So you don't need explicitly detect any location change.