Netinfo.isConnected.fetch() returns true

Question

I use NetInfo in my app, to check if it's connected to internet.

NetInfo.isConnected.fetch().then( (isConnected) => {
    console.log('isConnected: ', isConnected);
});

It returns true if i am connected to router or mobile data is on, and return false if not.

My problem is, if I am connected to the router or my mobile data is on, even though it doesn't have internet connection. It still returns true.

Any idea to solve this? Or other workaround/alternatives to check internet connection?

Answer 1

1- Clean gradlew, run command in your android folder:

• Linux / MacOS --------------> ./gradlew clean
• Windows PowerShell --------> .\gradlew clean
• Windows cmd --------------> gradlew clean

2- Import and use this component:

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import NetInfo from '@ react-native-community / netinfo';


class ConnectionInfo extends Component {
    NetInfoSubcription = null;


    constructor (props) {
        super (props);
        this.state = {
            connection_status: false,
            connection_type: null,
            connection_net_reachable: false,
            connection_wifi_enabled: false,
            connection_details: null,
        }

    }

    componentDidMount () {
        this.NetInfoSubscribtion = NetInfo.addEventListener (
            this._handleConnectivityChange,
          );
    }
    
    componentWillUnmount () {
        this.NetInfoSubscribtion && this.NetInfoSubscribtion ();
      }

      _handleConnectivityChange = (state) => {
        this.setState ({
          connection_status: state.isConnected,
          connection_type: state.type,
          connection_net_reachable: state.isInternetReachable,
          connection_wifi_enabled: state.isWifiEnabled,
          connection_details: state.details,
        })
      }

    
    render () {
        return (
            <View>
                <Text>
                Connection Status: {this.state.connection_status? 'Connected': 'Disconnected'}
                </Text>
                <Text>
                Connection Type: {this.state.connection_type}
                </Text>
                <Text>
                Internet Reachable: {this.state.connection_net_reachable? 'YES': 'NO'}
                </Text>
                <Text>
                Wifi Enabled: {this.state.connection_wifi_enabled? 'YES': 'NO'}
                </Text>
                <Text>
                Connection Details: {'\ n'}
                {this.state.connection_type == 'wifi'?
                    (this.state.connection_details.isConnectionExpensive? 'Connection Expensive: YES': 'Connection Expensive: NO')
                    + '\ n'
                    + 'ssid:' + this.state.connection_details.ssid
                    + '\ n'
                    + 'bssid:' + this.state.connection_details.bssid
                    + '\ n'
                    + 'strength:' + this.state.connection_details.strength
                    + '\ n'
                    + 'ipAddress:' + this.state.connection_details.ipAddress
                    + '\ n'
                    + 'subnet:' + this.state.connection_details.subnet
                    + '\ n'
                    + 'frequency:' + this.state.connection_details.frequency
                    :
                    this.state.connection_type == 'cellular'?
                    (this.state.connection_details.isConnectionExpensive? 'Connection Expensive: YES': 'Connection Expensive: NO')
                        + '\ n'
                        + 'cellularGeneration:' + this.state.connection_details.cellularGeneration
                        + '\ n'
                        + 'carrier:' + this.state.connection_details.carrier
                    :
                    '---'
                }
                </Text>
            </View>
        );
    }
}

 
  export default ConnectionInfo;

3. Reconstruct the project from Android Studio from:

Android Studio> File> Invalidate cache and restart

• Information based on this tutorial

Answer 2

This is due to a bug with RN.

https://github.com/facebook/react-native/issues/8615

There are a couple of work arounds listed here:

componentDidMount() {
  const dispatchConnected = isConnected => this.props.dispatch(setIsConnected(isConnected));

  NetInfo.isConnected.fetch().then().done(() => {
    NetInfo.isConnected.addEventListener('change', dispatchConnected);
  });
}

or

export function isNetworkConnected() {
  if (Platform.OS === 'ios') {
    return new Promise(resolve => {
      const handleFirstConnectivityChangeIOS = isConnected => {
        NetInfo.isConnected.removeEventListener('change', handleFirstConnectivityChangeIOS);
        resolve(isConnected);
      };
      NetInfo.isConnected.addEventListener('change', handleFirstConnectivityChangeIOS);
    });
  }

  return NetInfo.isConnected.fetch();
}