NetInfo returns true when connected to [WiFi|cellular] but Internet is not reachable

[sfm2222]

When I have mobile data on(cellular internet - device is connected via Edge, 3G, WiMax, or LTE) and my data package is finished (i.e: I cannot use internet) Netinfo always return true.

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.1
Yarn: Not Found
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.54 => 0.54

Expected Behavior

Ideally netinfo should return false when there is no internet connectivity. Just turning on the mobile data should not enough for it to depict that device has internet connection.

Actual Behavior

  NetInfo.isConnected.fetch().then(isConnected => {
     alert(isConnected);
   })

Steps to Reproduce

Just turn off the wifi and turn on the data connection on the mobile device which has no sim or with the sim which has no credit. It is happening on both iOS & Android.

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[sfm2222]

It is just the same on new version as well. Can you please check it. Thank you

[hramos]

Can you edit your post and ensure the repro steps include the specific version you tested this on?

[sfm2222]

Updated.

[hramos]

Thank you!

[hramos]

We'll need to investigate if this is working as intended. NetInfo is correctly showing that the device is connected to a cellular or WiFi network. The question is - should this also reflect Internet reachability? Personally, I don't think it should, but we should still provide a way for the developer to test reachability towards an arbitrary host.

[sfm2222]

@hramos thank you.

I think most of the developers are not much concerned with the fact that device is either connected to wifi/cellular or not(leaving aside if you are keen about data package spent in certain scenerio), the major concern is to check the internet reachability, to limit the actions which should not performed by the app if there is no internet connection.

For the temporary solution I have just sent a ping request to my WebAPI through code before making a request if it's not reachable so I assume there is no internet connection. Either this is incorrect WebAPI server could be down.

return fetch('URL')
      .then((response) => {
      })
  .catch((error) => {
        if(error == 'TypeError: Network request failed'){
          Alert.alert('Something went wrong', 'Kindly check if the device is connected to stable cellular data plan or WiFi.'); 
        }
       });

But I am still in favour of the fact that internet reachability check should be provided as a part of the library.

[aylesm]

I have airplane mode on. So WiFi and Cell are turned off. The API is still reporting that I'm online.

The following function is always returning true for me....

  return new Promise(resolve => {
        NetInfo.isConnected.fetch().then(isConnected => {
          console.log('Device, is ' + (isConnected ? 'online' : 'offline'));
          resolve(isConnected)
        })
    })
}```

As a workaround I had previously implemented the following.  With an update to react-native 0.54.4 the API reports that I'm connected WiFi after disabling Wifi on iPhone X.

``//workaround for a bug on iOS where the isConnected function doesn't
//actually work.
export function isNetworkConnected() {
  return NetInfo.getConnectionInfo().then(connectionInfo => {
    console.log('connection info:', connectionInfo)
    if (connectionInfo.type.match(/unknown/i)) {
      return new Promise(resolve => {
        const handleFirstConnectivityChangeIOS = isConnected => {
          console.log('connection info:', isConnected)
          NetInfo.isConnected.removeEventListener('connectionChange', handleFirstConnectivityChangeIOS);
          resolve(isConnected);
        };
        NetInfo.isConnected.addEventListener('connectionChange', handleFirstConnectivityChangeIOS);
      });
    }
    reachability = connectionInfo.type.toLowerCase();
    return (reachability !== 'none' && reachability !== 'unknown');
  });
}``

[yangnana11]

Has anyone fixed this problem? I got the same situation with react-native 0.55.4
I can use connectionInfo.type === 'none' for android, but ios always return 'unknown' even with or without wifi...

[Meligy]

Does the following work as a workaround?

const connectionInfo = await NetInfo.getConnectionInfo();
const connectionIsLost = connection.effectiveType === 'unknown';

[Vitormdias]

Having the same issue here, has anyone fixed this ?

[Vitormdias]

Does the following work as a workaround?

const connectionInfo = await NetInfo.getConnectionInfo();
const connectionIsLost = connection.effectiveType === 'unknown';

No

[stlst]

I have the same issue as well. I think it's necessary to know Internet reachability, especially for WIFI that needs authentication.

[topwebtek7]

Does anyone know solution to this issue? i'm having similar issue

[Vitormdias]

Does anyone know solution to this issue? i'm having similar issue

https://github.com/tegraoss/react-native-connection-status

I made this work around, but it only works in android, in iOS it only makes a pooling so a I don't recommend to use it in production.

[cpojer]

Heads up: we moved react-native-netinfo into its own repository, which should allow for making changes and fixes much faster. Please continue the discussion about this issue there: react-native-netinfo/react-native-netinfo#12