CODEWITHSUNDEEP
react-nativereduxexpoasyncstorageredux-offline
Stephen Kempin
Stephen Kempin

Reputation: 133

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:

  1. Automatically download and store data from an API on first launch.
  2. Store input data - from form fields whilst offline.
  3. 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.
  4. 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!

Upvotes: 4

Views: 5680

Answers (2)

user20514591
user20514591

Reputation: 1

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.

Upvotes: 0

Fiston Emmanuel
Fiston Emmanuel

Reputation: 4849

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]")

Upvotes: 3

Related Questions