How to check for an internet connection in an Expo React Native app?

Question

I have an Expo app using the Managed workflow. The app needs to check whether an internet connection is available.

• I can't import { NetInfo } from 'react-native' because that's deprecated.
• I can't use react-native-community/react-native-netinfo because that uses native libraries, and you can't do that with an Expo managed app.
• I could eject, in order to use the above, but it doesn't seem like I should need to do that just to check if there's an internet connection.
• I can't use navigator.onLine because that global variable doesn't seem to be available.
• I could make a trivial HTTP request to Google or my own server or whatever, and see if I get a response, but that only tests a connection to one site, and also it takes time and uses bandwidth.

What should I do?

Answer 1

Expo SDK 34 has already included NetInfo API.

You can check their documentation for SDK 34 here https://docs.expo.io/versions/v34.0.0/sdk/netinfo

Here is the link for documentation for latest version

Answer 2

It's really hard to define if a device has internet or not stackoverflow.com/a/189443/7602110, just by having failed XHR requests you can say that you have internet, but isn't that reliable. You would like to check with some reliables websites like google.com, I have come with a work-around but I don't actually recommend it, is up to you.

You can use the Linking.canOpenUrl() method from React Native itself, which will return a Promise object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.

Then add a request and if the response status it's 200 you should have internet.

import React, { Component } from 'react';
import { Button, Text, View, StyleSheet, Linking } from 'react-native';

export default class App extends Component {
  state = {
    connection: false,
    url: 'https://google.com',
  };

  checkInternt = () => {
    Linking.canOpenURL(this.state.url).then(connection => {
      if (!connection) {
        this.setState({ connection: false });
      } else {
        fetch(this.state.url).then(res =>
          this.setState({ connection: res.status !== 200 ? false : true })
        );
      }
    });
  };

  componentDidMount() {
    this.checkInternt();
  }

  handlePress = () => {
    this.setState({
      url:
        this.state.url === 'https://google.com'
          ? 'http://someweirdurlthatdoesntwork.com'
          : 'https://google.com',
    });
    this.checkInternt();
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>
          Connection:
          <Text style={{ color: this.state.connection ? 'green' : 'red' }}>
            {`   ${this.state.connection}`}
          </Text>
        </Text>
        <Text>{this.state.url.replace(/\https?:\/\//g, '')}</Text>
        <Button onPress={this.handlePress} title="Change server url" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
});

Check the snack: snack.expo.io/@abranhe/check-internet