Build WordPress App with React Native #19 : Notify user when offline
Tags: reactnative, reactnativenetinfo
Published: 2019-12-05 08:55:11

---
title: Build WordPress App with React Native #19 : Notify user when offline
published: true
date: 2019-12-05 02:09:02 UTC
tags: React native ,react native netinfo
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-19-notify-user-when-offline/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the [React Native Mobile Templates](https://www.instamobile.io/) from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)
9. [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/)
10. [Build WordPress Client App with React Native #10: Setup and save bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-10-setup-and-save-bookmark/)
11. [Build WordPress Client App with React Native #11: Remove and Render Bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/)
12. [Build WordPress Client App with React Native #12: Categories screen](https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/)
13. [Build WordPress Client App with React Native #13: Configuring firebase in contact screen](https://kriss.io/build-wordpress-client-app-with-react-native-13-configuring-firebase-in-contact-screen/)
14. [Build WordPress Client App with React Native #14 : Implementing Settings Screen](https://kriss.io/build-wordpress-client-app-with-react-native-14-implementing-settings-screen/)
15. [Build WordPress Client App with React Native #15 : Forwarding message to inbox with Cloud function](https://kriss.io/build-wordpress-client-app-with-react-native-15-forwarding-message-to-inbox-with-cloud-function/)
16. [Build WordPress Client App with React Native #16 : Dark theme](https://kriss.io/build-wordpress-client-app-with-react-native-16-dark-theme/)
17. [Build WordPress Client App with React Native #17 : Fix react-native-render-html to change theme](https://kriss.io/build-wordpress-client-app-with-react-native-17-fix-react-native-render-html-to-change-theme/)
18. [Build WordPress Client App with React Native #18 : changing Theme  
](https://kriss.io/build-wordpress-client-app-with-react-native-18-manually-changing-theme/)

Here, we are going to integrate the offline mode to the app. This feature is very handy when we are out of connection and we can still access some of the features in the app. Here, we are just going to notify the network status and cache the data using **react-native-NetInfo** package. Caching will help to pull the data from the AsyncStorage during the offline mode.

## Notify user when offline

Here, we are going to notify the user when we are offline. For that, we are going to display network status. **Hence, we need to create a new file called NetworkStatus.js in component folder.**

Then, we need to install the netinfo package into our project. For that, we need to run the following command in our project directory:

```
yarn add @react-native-community/netinfo
```

 

Then, we need to link the package to native files as we did in previous installation.

In Android, we need to add a configuration to **‘./android/build.gradle** file:
```java
 buildscript {
      ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        androidXCore = "1.0.2"
        // Put here other AndroidX dependencies
      }
```
Now, we need to make the following imports to the NetworkStatus.js file:
```javascript
    import React from 'react';
    import {List} from 'react-native-paper'
    import NetInfo from '@react-native-community/netinfo';
    import {Text, StyleSheet} from 'react-native';
```
Then, we need to define a new function called `handleConnectivityChange`
function as shown in the code snippet below
```javascript
    export default class NetworkProvider extends React.Component {
      state = {
        isConnected: true,
      };

      componentDidMount() {
        NetInfo.isConnected.addEventListener(
          'connectionChange',
          this.handleConnectivityChange,
        );
      }

      componentWillUnmount() {
        NetInfo.isConnected.removeEventListener(
          'connectionChange',
          this.handleConnectivityChange,
        );
      }

      handleConnectivityChange = isConnected => {
        this.setState({isConnected});
        console.log(this.state.isConnected);
      };
```
Here, we have defined a state variable called `isConnected` which handles the
connection info. Then, we have defined a function called
`handleConnectivityChange` which takes the `isConnected` parameter. Then, we
have called the function in the `addEventListener` function provided by the
`NetInfo` module in the `componentDidMount` hook to subscribe to network change.
And, we have also called the function in the `removeEventListener` function of
`NetInfo` module in the `componentWillUnmount` hook to unsubscribe from network
change.

Now, we need to the template to display the offline mode. For that, we need to
use the code from the following code snippet:
```javascript
    render() {
        const iconPrefix = Platform.OS === 'ios' ? 'ios' : 'md';
        return this.state.isConnected ? (
          <Text></Text>
        ) : (
          <List.Item
          title="Offline mode"
          left={() => <List.Icon  icon="airplane-off" />}
          
        />
        );
      }
    }

    const styles = StyleSheet.create({

      offLine: {
        marginRight: 15,
        flexDirection: 'row',
      },
    });
```
Here, we have returned the template based in `isConnected` state. If true, it
returns null else it returns Item component with airplane mode icon.

Now, we need to show the icon in every screen header if we are offline. For
that, we need to import the NetworkStatus.js file in the Navigator file as shown
in the code snippet below:
```javascript
    import NetworkStatus from './NetworkStatus';
```
Then, we need to include it to the `headerRight` option of the
`navigationOptions` config as shown in the code snippet below:
```javascript
    {
        navigationOptions: ({navigation}) => {
          const {routeName} = navigation.state.routes[navigation.state.index];

          return {
            headerTitle: routeName,
            headerRight: <NetworkStatus />,
          };
        },
      },
```
Hence, we will get following result in the emulator screens if we disconnect:

 

![](https://kriss.io/wp-content/uploads/2019/12/img_5de868145a4d8.png) ![](file:///Users/krissanawatkaewsanmuang/Desktop/Export-0c27b481-3f16-4a20-a331-12f3d5bf24fe/Offline%20Mode/ezgif.com-video-to-gif_(9).gif) ![](https://kriss.io/wp-content/uploads/2019/12/img_5de8681ebdab8.png)

## Summary

In this chapter, we learned how to implement the offline mode in the react native app. We used the `netinfo` package to display the offline icon in the header by checking the network status of the device.

The post [Build WordPress Client App with React Native #19 : Notify user when offline](https://kriss.io/build-wordpress-client-app-with-react-native-19-notify-user-when-offline/) appeared first on [Kriss](https://kriss.io).