How to check internet connection in React Native application for both iOS and Android?

Question

I have a React Native application and I'm seeking to add functionality that checks if there is an active internet connection when the app first starts up, and continuously thereafter.

If there is no internet connection, I'm seeking to display a message saying "Internet connection not detected" with a button to "Try again"; if there is an internet connection, I'm seeking to load a page (WebView).

I'm also seeking to support both iOS and Android devices; I've researched this independently and have found a couple libraries on GitHub. However, many require an extra step of including a permissions addition in Android Manifest XML, however I don't see an Android Manifest XML file in my app; why does only Android need a manifest?

Any help is appreciated; thanks and take care.

Answer 1

I ran into this today and found solution which I believe is the best. Its gonna continuously search for network changes and display them accordingly.

I tested it with expo install @react-native-community/netinfo and its working flawlessly.

import {useNetInfo} from "@react-native-community/netinfo";
import {View, Text} from "react-native";
const YourComponent = () => {
  const netInfo = useNetInfo();

  return (
    <View>
      <Text>Type: {netInfo.type}</Text>
      <Text>Is Connected? {netInfo.isConnected.toString()}</Text>
    </View>
  );
};

Answer 2

Please read this https://reactnativeforyou.com/how-to-check-internet-connectivity-in-react-native-android-and-ios/ link.

import React, { Component } from "react";
import { View, Text, Button, Alert, NetInfo, Platform } from "react-native";

export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  CheckConnectivity = () => {
    // For Android devices
    if (Platform.OS === "android") {
      NetInfo.isConnected.fetch().then(isConnected => {
        if (isConnected) {
          Alert.alert("You are online!");
        } else {
          Alert.alert("You are offline!");
        }
      });
    } else {
      // For iOS devices
      NetInfo.isConnected.addEventListener(
        "connectionChange",
        this.handleFirstConnectivityChange
      );
    }
  };

  handleFirstConnectivityChange = isConnected => {
    NetInfo.isConnected.removeEventListener(
      "connectionChange",
      this.handleFirstConnectivityChange
    );

    if (isConnected === false) {
      Alert.alert("You are offline!");
    } else {
      Alert.alert("You are online!");
    }
  };

  render() {
    return (
      <View>
        <Button
          onPress={() => this.CheckConnectivity()}
          title="Check Internet Connectivity"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

Answer 3

It seems this question is all over stackoverflow and no one seems to look at other existing answers.

You should use the "@react-native-community/netinfo" library. NetInfo used to be part of the react-native, but then it got separated out of the core. If you want to observe network state changes just use the provided addEventListener method.

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

NetInfo.fetch().then(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
});

const unsubscribe = NetInfo.addEventListener(state => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
});

// Unsubscribe
unsubscribe();

Answer 4

For it react-native provide a library called netinfo: please check on: https://github.com/react-native-community/react-native-netinfo

It provides an api to check the connectivity and its type.

NB: if you are using RN < 0.60: https://facebook.github.io/react-native/docs/netinfo.html

Answer 5

NetInfo has been removed from React-Native. It can now be installed and imported from 'react-native-netinfo' instead from 'react-native'. See https://github.com/react-native-community/react-native-netinfo

Answer 6

Create NetworkUtills.js

import NetInfo from "@react-native-community/netinfo";
export default class NetworkUtils {
  static async isNetworkAvailable() {
    const response = await NetInfo.fetch();
    return response.isConnected;
}}

Use anywhere like this

const isConnected = await NetworkUtils.isNetworkAvailable()

Answer 7

Here is an up-to-date solution on how to check if your app can reach the internet.

Start by installing the official NetInfo community package:

yarn add @react-native-community/netinfo

Then the snippet.

import { Platform } from "react-native";
import NetInfo from "@react-native-community/netinfo";
...


const checkConnectivity: Promise<boolean | null> = () => {
    return new Promise(resolve => {
        if (Platform.OS === "android") {
            // For Android devices
            NetInfo.fetch().then(state => {
                resolve(state.isInternetReachable);
            });
        } else {
            // For iOS devices
            const unsubscribe = NetInfo.addEventListener(state => {
                unsubscribe();
                resolve(state.isInternetReachable);
            });
        }
    });
};

...

And it's usage

...
const hasInternetAccess = await checkConnectivity();

if(hasInternetAccess) {
   // My app can reach the internet
} 
else {
  // Can't connect to the internet. Too bad!
}

Answer 8

For expo:

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

export const checkConnected = () => {
  return NetInfo.fetch().then((state) => {
    console.log("Connection type", state.type);
    console.log("Is connected?", state.isConnected);
    return state.isConnected;
  });
};

Check out this documentaion: https://docs.expo.dev/versions/latest/sdk/netinfo/

Answer 9

I'm using react-native 0.66.3 I have added this code to Splash screen, so when NetInfo returns "isConnected : false", then I Show the Try Again button for check network if network is connected, navigation replaced to home screen.

this is my splash screen:

import React, { useEffect, useState } from "react";
...
import NetInfo from "@react-native-community/netinfo";

const Splash = (props) => {
  const [network, setNetwork] = useState('')
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    unsubscribe()
  }, []);

  function unsubscribe() {
    NetInfo.fetch().then(state => {
      setNetwork(state)
      setTimeout(function () {
        if (state.isConnected) {
          // any thing you want to load before navigate home screen
        } else {
          setLoading(false)
        }
      }, 500);
    })
  };



  return (
    <View style={{
      flex: 1,
      backgroundColor: global.bgBody,
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <Image
        source={Logo}
        style={{
          width: 150,
          height: 123,
        }}
      />
      {!network?.isConnected || loading ? <View style={{ marginTop: 30 }}>
        <Description text={`Please check your internet connection and try again`} />
        <Button
          title="Try Again"
          onPress={() => {
            setLoading(true)
            unsubscribe()
          }}
          loading={loading}
        />
      </View> : null}
    </View>
  );
};
export default Splash;

Answer 10

The Android manifest file is here: \android\app\src\main\AndroidManifest.xml. Further use this library to do your require https://github.com/react-native-community/react-native-netinfo

Answer 11

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

useEffect(() => {
const removeNetInfoSubscription = NetInfo.addEventListener((state)={

const offline = !(state.isConnected && state.isInternetReachable);

console.log(offline);

});

return () => removeNetInfoSubscription();
}, []);