How to provide offline support to React Native app

28 May 2021

In this article, I am going to explain about the offline support for the React Native app using redux-persist.

Before starting I am assuming you’re familiar with following things

• React Native
• Redux implementation

Why need to provide Offline support?

As we all know technology is evolving but still we are facing network issues in a lot of areas. So there is a need to make our app more usable even if the Internet is not there. Offline support can be one of the ways.

Ways to implement Offline support

• Using react-native-offline package
• Using redux persist library
• Using AsyncStorage to store the data.

Implementation

As we are going to implement offline support so the first requirement is to check the network connection while using the app. For this I am suggesting to use @react-native-community/netinfo library which gives the network status. Create one action and reducer for storing the network state and better to add this library in the AppNavigator file.

Here’s the code snippet for the check network:

Configuration for the redux-persist

Install redux-persist library and create one store file and add combineReducer in the store. We will use AsyncStorage for the storage. We have whitelisted the module which we want to store the data. If you do not want to store any data from the module then you can add those in blacklist array

Storing API  call when Network is not present

It is very important to store the API call in a queue when the internet is not present. For this we have to modify the actions and reducers based on the network connectivity. When the network comes back then API calls which are stored should run in the background. Also it is important to maintain the track of data which got success or failure.

How to store images to show in offline mode?

Nowadays every single application contains images. So when we are loading images from a remote URL it will not appear in the iOS device when the network is not present as the iOS device doesn’t store cache for the images. So while showing the images I will recommend to use react-native-fast-image package to show the image because it stores the cache for the remote URL once the image is loaded when the network is on then that image will appear to users when the user is offline.

🔊 Listen