CODEWITHSUNDEEP
javascriptreact-native
27mdmo7sn
27mdmo7sn

Reputation: 509

Detect if the user is connected to the internet?

I'd like to route the user to a certain screen, in case he is not connected to the internet.

I just can't detect if he is connected or not.

I tried this code, but did not work:

async componentWillMount()
{
   if (!await NetInfo.isConnected)
   {
      this.props.navigation.navigate('Saved');
   }
}

Any tested solution to suggest?

Upvotes: 9

Views: 15692

Answers (5)

twboc
twboc

Reputation: 1607

There are two issues with your code currently.

  1. In newer versions of react life-cycle method componentWillMount is deprecated.
  2. Newer versions of react-native have extracted the NetInfo Module out of the core. Use @react-native-community/netinfo instead.

In order to achieve the desired behavior you should do something like this.

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

class CheckConnection extends Component {

    componentDidMount() {
        
        NetInfo.fetch().then(state => {
            handleConnectionState(state)
        }); 
        
    }
        
    handleConnectionState(state) {
        console.log("Connection type", state.type);
        console.log("Is connected?", state.isConnected);
        ... your code to handle the lack of connection
        
    }

}

Upvotes: 0

Vely
Vely

Reputation: 381

Another solution to your case (one without using isConnected property) is to use the object returned from the event handler directly like that:

componentDidMount() {
  NetInfo.addEventListener('connectionChange', this.handleNetworkChange);
}

componentWillUnmount() {
  NetInfo.removeEventListener('connectionChange', this.handleNetworkChange);
}

handleNetworkChange = (info) => {
    if (info.type === 'none') {
      this.props.navigation.navigate('Saved');
    }
};

According to NetInfo documentation:

connectionChange event fires when the network status changes. The argument to the event handler is an object with keys:

type: A ConnectionType (listed above)

effectiveType: An EffectiveConnectionType (listed above)

The connection type can be one of the following : none, wifi, cellular, unknown.

Ideally you can store this information to your redux store and the listener to a root component.

We had a weird bug when using isConnected similar to the one you mentioned @Gabriel Bleu but for us, the NetInfo.isConnected.fetch() returned false only when the Android device was awake after some period of inactivity.We used it to display offline warning for users, so the warning never left. I found this solution on a Spencer Carli's course and it seems to work better but depending on your needs, you might want to use isConnected combined with the above code.

Upvotes: 2

Kishan Oza
Kishan Oza

Reputation: 1735

You can check using NetInfo . for that you have to add connectionChange event listener like this

componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange.bind(this));
        NetInfo.isConnected.fetch().done(
            (isConnected) => { this.setState({ isConnected: isConnected }); }
        );

and then remove the event listener in componentWillUnmount

componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);
    }

And finally the handler method for connection change. I am storing the status in device local storage you can do whatever you want.

handleConnectionChange = (isConnected) => {
        if (isConnected) {
            //ToastAndroid.show('Data sync in process...', ToastAndroid.SHORT);
            AsyncStorage.getItem('offlineData')
                .then((json) => JSON.parse(json))
                .then((data) => {
                    console.log(JSON.stringify(data));
                });
        }
        else { ToastAndroid.show('You are offline.', ToastAndroid.SHORT); }

        this.setState({ isConnected: isConnected });
    }

Don't forget to add NetInfo from react-native :)

Upvotes: 2

Hardik Shah
Hardik Shah

Reputation: 4200

This is a great example to check online or offline and even you can have connection change information too. Source

NetInfo.isConnected.fetch().then(isConnected => {
  console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
function handleFirstConnectivityChange(isConnected) {
  console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
  NetInfo.isConnected.removeEventListener(
     'connectionChange',
     handleFirstConnectivityChange
  );
}
NetInfo.isConnected.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

Upvotes: 1

Gabriel Bleu
Gabriel Bleu

Reputation: 10204

Try await NetInfo.isConnected.fetch()

ref : https://facebook.github.io/react-native/docs/netinfo.html#isconnected

Upvotes: 8

Related Questions