How to check the network status in react-native app

Question

i am struggling about this point, that if in my mobile i am in poor network connection, Some how i am calling the service, it will take more time to call the service

Is there any possibility to increase the fetch timeout (or)
How to tell the user that u are in poor internet connection.

For checking of internet connection i used the networkInfo, But it help only for connection is there are or not, But it doesn't giving any information about the Speed of the network.

If Possible can any one give me suggestions that, How can i solve this, Any help much appreciated I am using the react-native version:0.29.0

ArneHugo · Answer 1 · 2019-05-30T09:52:52.167

11

If you just want to know whether the device has an active internet connection, you can use e.g. isConnected from React Native's NetInfo:

import { NetInfo } from "react-native";

NetInfo.isConnected.addEventListener(
  "connectionChange",
  hasInternetConnection =>
    console.debug("hasInternetConnection:", hasInternetConnection)
);

However I'm not sure how to find out how good the connection is.

edited May 30 '19 at 09:52

answered Jan 17 '17 at 08:16

ArneHugo

6,051
1
26
47

3

The original question was about "speed of the network", not the connection itself. – Samuli Hakoniemi Jan 17 '17 at 08:18
I see. I edited the answer to specify exactly what it achieves, to clarify that it does not check the connection quality. – ArneHugo Jan 17 '17 at 08:22
4

NetInfo is now deprecated. Use [react-native-community/react-native-netinfo](https://github.com/react-native-community/react-native-netinfo) instead. – Gürol Canbek Apr 06 '20 at 17:19

Gaurav Roy · Answer 2 · 2020-10-02T06:41:47.467

In react native 0.60, importing netinfo directly from react native package has been deprecated. You have to use import NetInfo from "@react-native-community/netinfo"; at the top and its a different package, which needs to be linked to the native code. And after that you can use the NetInfo functions as it was used previously like

NetInfo.isConnected.addEventListener(
  "connectionChange",
  hasInternetConnection =>
    console.debug("hasInternetConnection:", hasInternetConnection)
);

Please check the Github doc for the same React native netinfo

score 4 · Answer 3 · edited Nov 23 '18 at 06:26

NetInfo.getConnectionInfo().then((connectionInfo) => {
  console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: '    + connectionInfo.effectiveType);
});
function handleFirstConnectivityChange(connectionInfo) {
  console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
  NetInfo.removeEventListener(
    'connectionChange',
    handleFirstConnectivityChange
  );
}
NetInfo.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

this is a copy of the code in the react-native documentation, the effective type specifies if the network is 2G, 3G, EDGE or 4G.

score 1 · Answer 4 · answered Sep 14 '19 at 06:21

You can use module named as react-native-offline

following are the props given on there website

**

type Props = {
    children: React.Node,
    pingTimeout?: number = 10000,
    pingServerUrl?: string = 'https://www.google.com/',
    shouldPing?: boolean = true,
    pingInterval?: number = 0,
    pingOnlyIfOffline?: boolean = false,
    pingInBackground?: boolean = false,
    httpMethod?: HTTPMethod = 'HEAD',
}

**

score 1 · Answer 5 · answered Oct 11 '20 at 17:06

This question has been referenced in many places on stackoverflow. With newer versions of react native you should use the "@react-native-community/netinfo" library. NetInfo used to be part of the react-native, but then it got separated out of the core. If you want to observe network state changes just use the provided addEventListener method.

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

NetInfo.fetch().then(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
});

const unsubscribe = NetInfo.addEventListener(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
});

// Unsubscribe
unsubscribe();

score 0 · Answer 6 · answered Mar 28 '19 at 11:47

Here is the example:

import { NetInfo,Alert } from 'react-native';

const netStatus = await NetInfo.fetch()  

if (netStatus === 'none' || netStatus === 'NONE') {
    Alert.alert("Internet not connected.!!!")
    return []
}else{ 
    Alert.alert("Internet connected.!!! ")
}

score 0 · Answer 7 · answered Nov 11 '21 at 08:06

You can use expo-network

Install the package
```
expo install expo-network
```

You can make the next method

const [isConnected, setIsConnected] = useState(false);

const getNetworkStatus = async () => {
    const network = await Network.getNetworkStateAsync();
    console.log(network.isConnected); //true or false
    setIsConnected(network.isConnected);
}

useEffect(() => {  
     //call the method
     getNetworkStatus();
}, []);
.
.
.
if(isConnected == true){
    console.log("Connected!");
}else{
    console.log("Not connected");
}

You can read de Documentation

How to check the network status in react-native app

7 Answers7