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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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',
}

**