How To Build WordPress App with React Native Part #19: Offline Notifications

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.so this app inspired from React native template from instamobile

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:

 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:

 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

 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:

 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:

  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:

   {
        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:

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.