React native net info example

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

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

• Install package using yarn

Copy 
1yarn 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

Copy 
1import NetInfo from "@react-native-community/netinfo";
2
3async function isConnected() {
4
5    let netFlag     =   0;
6    await NetInfo.fetch().then(state => {
7        if(state.isConnected) {
8            netFlag     =   1;
9        }
10    });
11
12    return netFlag;
13}

wifi internet example

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

check out below example.

Copy 
1import NetInfo from "@react-native-community/netinfo";
2
3async function isWifiConnected() {
4
5    let netFlag     =   0;
6    await NetInfo.fetch("wifi").then(state => {
7        if(state.isConnected) {
8            netFlag     =   1;
9        }
10    });
11
12    return netFlag;
13}

Thanks for reading…