React Native Network Connectivity App

Detect Internet Connection Status in React Native

@react-native-community/netinfo package can be used to check internet connectivity status during runtime in a react native application

NetInfo allows to listen to network related events such as enabling/disabling wifi to retrieve status of internet connection and connection type being used - WiFi, cellular

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcConnectivityApp)

react-native init NcConnectivityApp

This creates a directory named NcConnectivityApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here NcConnectivityApp)

cd NcConnectivityApp

Add @react-native-community/netinfo package to current project using yarn

yarn add @react-native-community/netinfo

or using npm

npm install @react-native-community/netinfo --save

iOS

After yarn add command, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Permission

There is no additional configuration required for iOS

For Android applications, ACCESS_NETWORK_STATE permission has to be added in AndroidManifest.xml file

Find and open NcConnectivityApp (project directory) → android → app → src → main → AndroidManifest.xml

Add below permission (before <application tag , inside <manifest element )

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

App Code

Use componentDidMount() inbuilt method, which is invoked immediately after a component is mounted (inserted into the DOM tree), and which can be preferred to call setState()

Inside this method implement addEventListener() method of @react-native-community/netinfo module, which returns network state for events such as wifi being disabled etc

The state contains following attributes :

• isConnected: a boolean value denoting whether device is connected to a network (not necessarily whether internet is accessible)
• type: type of network - wifi, cellular, none

Following code (of App.js file) can be used to display network type and connectivity status on a network related event :

import React, {Component} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { addEventListener } from '@react-native-community/netinfo';


export default class App extends Component{

  constructor() {
    super();
    this.state={
      status : "", type : ""
    }
    this.counter = 1
  }

  // implement addEventListener to listen to connectivity change event which returns connection state
  componentDidMount() {
    addEventListener(state => {
      this.handleConnectivityChange(state);
    });
  }

  // use state data to set State
  handleConnectivityChange = (state) => {
    this.counter++;
    if(state.isConnected == true) {
        this.setState({status : "Online", type : state.type})
      }
      else {
        this.setState({status : "Offline", type : state.type})
      }
  };

  render() {
    return (
      <View style={styles.MainContainer} >
        <Text>Type: {this.state.type} </Text>
        <Text>Status: {this.state.status}  </Text>
        <Text>handleConnectivityChange counter : {this.counter} </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#DDFCFF',
    padding: 20
  },
  TextStyle: {
    fontSize: 20,
    textAlign: 'center',
  }
});

Run instructions

Running in Android

cd into project directory (here NcConnectivityApp)

cd NcConnectivityApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android

Running in ios

cd into project directory (here NcConnectivityApp)

cd NcConnectivityApp

Enter following command :

react-native run-ios

This might take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work