Add Online/Offline Animated Notification to React Native App

In this tutorial we will add online/offline animated notification to our shopping cart app. It’s important to notify user when they go offline, because, your app won’t work same way when its not connected to Internet. Further,  we will keep the online/offline status in redux store so that we can make all components aware when the app goes offline. So, lets get started.

First, we will add an action type in constants>>ActionTypes.js :

Next, we will add action and action creator to our actions>>index.js

In the above code, we have action creator, to make a dispatch, whenever the status of app changes from online to offline or from offline to online.

Now, we will add reducer to reducers>>index.js

In the above, code we are setting the connection property to the current status of the app.

Finally, we will create a Netinfo component where we will check the status of app and dispatch the status to the redux store. We will also add a sliding animation to notify the user. Our Netinfo component code looks like this :

In the above code we are using NetInfo.isConnected.addEventListener provided by react native to handle the online status of app. We have attached the event listener to the _handleNetInfo which performs the animation and dispatch the status whenever user goes online or offline.

Now we just add the Netinfo component at the bottom of the main file like this :

You can check how it works in the video below :