React Native Offline data to be updated? - react-native

I am new to react native. I am making a app to support offline. So, I use asyncstorage and redux-persist package. Data is saving offline and data could clean every functions are working fine. So, my question is
How can I detect offline data to be always updated. Could you mention your experience solutions to solve it. I found more questions in google about saving data solution not including update solutions.
Below are what I think.
push notification from Google cloud messaging ( It is ridiculous to let user know push notification on device screen to update data)
Websocket might work on it.( I don't want to build for that in my backend server now)
Saving each reducer store with datetime and check with app is online or offline. If online, it would request from server to get reducer in which has new datetime, if so, I would update my offline data. I am not sure that could cover all. ( In this case, I would create all reducer name and updated datime when device request )

I guess you want your app offline data updated with the online server data. You can use react-native-offline. You can check its doc. When app open it sync can sync data with the server and update. So you app will always update.

Related

Server-Sent Events with RTK Query, Redux store. Can this work? (react-native)

I'm working on an app similar to Trello in that it needs to pull data from the server as soon as it's added by other users. There is no need to send data back using the same channel, so Server-Sent Events (unidirectional) push technology seems more appropriate to use here than WebSocket.
The App is a cross-platform React Native (expo managed) project that displays a list of items from the server with options to add, update, and delete. For now, it will work only while an internet connection is available. 
Locally, data will be stored in a redux store (RTK Toolkit). The way the app will keep the redux store up to date is: Establish an open connection to the server using SSE (Server-Sent Events) and listen for events. Use RTK Query to fetch, update, and delete data. On receiving an SSE event (an event with information that new data is available on the server, updates were done by someone else), the app will clear the local RTK Query cache and fetch the whole data set again from the server.
There are several concerning issues that could affect the performance and usability: 
Downloading the entire data set in response to any type of update event (new/updated/deleted item by another user) will retrieve the entire list, which may contain many items with nested ones. It doesn't seem to be an effective approach. Especially if another user performs multiple minor changes (changes name, persists, changes date, persists, adds description, persists...), this will result in at least 3 update events.
After performing an action on your own, the entire data set will be downloaded. I.e., a user adds a new item, there is a call POST to the server, the server pushes events, and the user gets an event that there is newer data on the server. RTK Query's cache will be reset and a new dataset will be fetched and stored in redux. 
I don't have that extensive experience with React Native, so I would like to ask more seasoned veterans if this solution can actually work and how it can be improved.
Many thanks.

How to store local private user data with React Native app?

I'm about to start working on a expense tracker app for mobile and I would like to use React Native with Expo (pretty new to mobile techs). Maybe I will share it with some friends or other people and the question that cames up is where to store their data (in this case is sensitive as they will register their money's movement).
What I mean is, I could use any cloud DB (Mongo, Firestore, etc) but I will have access to everything they register there and I wouldn't like that, just for security and their privacy sake.
So, is there a way to store their data or everything they register locally in their phones? So the app can only access to the data that is stored there and I can't see it. Or any other possibility?
I found the AsyncStorage API but I don't know if this is the correct approach for what I'm looking for. I didn't code anything yet as I don't know which would be the right path.
You can use Secure Store since you're using expo.
expo-secure-store provides a way to encrypt and securely store key–value pairs locally on the device. Each Expo project has a separate storage system and has no access to the storage of other Expo projects.
See https://docs.expo.dev/versions/latest/sdk/securestore/
I had a similar case and i went for realm.js .

Offline first React Native Expo app with background sync

I am looking at building an offline first React Native Expo app that automatically pushes data to an API when the device gets a connection. However I am struggling to see how if this is possible within Expo and need some guidance.
The app will need to store data from an API for offline use (presumably on first load, which will then be used to populate fields in a form). The form needs to work offline, with the input data stored on the device until it receives a new connection. At that point the app should push the data to an API (whilst the app is in the background). So I need to do multiple things:
Automatically download and store data from an API on first launch.
Store input data - from form fields whilst offline.
Background sync - Upload this user form data when a new connection is received, regardless of whether the app is running in the background or not.
Work on Android and iOS devices.
I have been looking at redux-offline, but unsure if it still supported and/or will satisfy all four requirements?
There is also redux-persist but I can't see how this satisfies the background sync?
Thanks for any help/guidance!
From my point of view, redux-persist is less opinionated compared to redux-offline. I pick redux-persist with useNetInfo hook to listen to network availability.
1. Automatically download and store data from an API on first launch.
When app launch, query initial data and dispatch to redux store and synced automatically to local storage by redux-persist
2. Store input data - from form fields whilst offline.
With useNetInfo, the app can detect network connectivity status, when not connected, dispatch to the redux store with a flag to indicate offline unsynched data.
You need to write a network connectivity listener which is executed when the network state changes and continuously track unsynched data and sync with the database when available and purge those temporary data like form values.
3. Background app sync
Expo SDK provides API https://docs.expo.dev/versions/latest/sdk/background-fetch/
to run continuously a background task at a certain time threshold.
You can sync offline data when the network returns back while the app is background.
Disclaimer: Background tasks run outside of React componentS tree. You can't access redux store data through the react-redux's store component or hooks based API.
redux-persist saves data with Async Storage and you need to directly access data as below.
AsyncStorage.getItem("persist:[REDUCER_CONTAIN_INTERESTED_DATA]")
This seems to be an issue with server state with a client cache. Looks like an ideal case for react-query to solve.
Automatically download and store data from an API on first launch.
This should be taken care of by query prefetching
Store input data - from form fields whilst offline.
Probably needs client state(redux/Zustand etc) for managing state with unverified fields. For storing submitted forms, react-query supports offline caching of 'mutations'.
Background sync - Upload this user form data when a new connection is received, regardless of whether the app is running in the background or not.
Work on Android and iOS devices.
See above.

React Native Update App Without user needs to login again

So I have a React Native App. I want to publish it to the Playstore (Later to the Appstore too). Now if I want to make an update the user needs to login again, because I am just overwriting the old App File. How can I prevent it or is there a solution, where I don't need to publish the update to the playstore and just make changes and it gets updated directly without the user needs to update it through the App-/Playstore. I already saw Microsoft Code Push but I think first it costs money and second everybody can see the source code ? :)
Thank you for you help.
Edit
So I want to know: If I update the App, is the Async Storage going to be reseted or will it just stay with the data in it?
#dianaqqq already told you. If you update the App the Async Storage should not be affected from this, because it's not really a direct part of your app; it's more like a party of the whole system and your app uses this.
For more information read this:
https://react-native-async-storage.github.io/async-storage/docs/install/

Does redux-persist persist/save data in between App updates?

On my phone when I'm doing debugging...if I save something on redux-persist, then I change some code and save and run: npx react-native run-android...when the new version of the app loads I still can see the data I have saved previously.
Does this mean redux-presist is good as a database substitute so that even after App updates in the Appstore then the data saved will still be in the device and accessible by the updated App?
As far as I know it saves the store into AsyncStorage which uses the sandbox of your app which can be only accessed by your app (app id and only that id can access that sandbox) no matter which version. It is different, I would not consider it as a substitute but rather as a supplement to a data base. That doesn't mean that you can't try to use it as such.