Hello Friends,

Welcome To Infinitbility!

we need to check internet connection before call api in react native and today we are going to learn how to check internet connection and if not available then show error No Internet Connection.

This article help you to manage internet connection on your react native application. here you will get code snipest to know internet available or not in user phone.

React Native provide netinfo package to handle internet but it’s now move to react native netinfo package ( https://github.com/react-native-netinfo/react-native-netinfo ).

Let’s start today topic React native net info example or handle internet connection in react native

Table of content

  1. Package details
  2. Installation
  3. netinfo internet example
  4. wifi internet example

Package details

we are going to use React Native netinfo package. full package details https://github.com/react-native-netinfo/react-native-netinfo

React Native Network Info API for Android, iOS, macOS & Windows. It allows you to get information on:

  • Connection type
  • Connection quality

Installation

  • Install package using npm
npm install --save @react-native-community/netinfo
  • Install package using yarn
yarn add @react-native-community/netinfo

netinfo internet connection example

Here, we create common function to check internet available or not.

Let’s understand with example

import NetInfo from "@react-native-community/netinfo";

async function isConnected() {

    let netFlag     =   0;
    await NetInfo.fetch().then(state => {
        if(state.isConnected) {
            netFlag     =   1;
        }
    });

    return netFlag;
}

wifi internet example

Here, we share example to use wifi is connnected or not in application.

check out below example.

import NetInfo from "@react-native-community/netinfo";

async function isWifiConnected() {

    let netFlag     =   0;
    await NetInfo.fetch("wifi").then(state => {
        if(state.isConnected) {
            netFlag     =   1;
        }
    });

    return netFlag;
}

Thanks for reading…