Detecting Internet connectivity in react native using NetInfo

The @react-native-community/netinfo package is a React Native community-maintained module that provides a simple API to get information about the network connectivity status on a device. It allows you to monitor changes in network connectivity, such as when the device goes online or offline.

Here are some key points about @react-native-community/netinfo:

---

1. Installation:

You can install the package using npm or yarn:

npm install @react-native-community/netinfo && cd ios && pod install
or
yarn add @react-native-community/netinfo && cd ios && pod install

---

Note:
Add these android permission to access network status:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission
        android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission
        android:name="android.permission.ACCESS_WIFI_STATE" />

---

2. Usage:

Import the NetInfo module from @react-native-community/netinfo and use its methods to check the network status.
(REF->)
NetInfoComp.jsx

import React, { useCallback, useState } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import NetInfo from '@react-native-community/netinfo';
import { StyleSheet, Text, View } from 'react-native';
import { hasNotch } from 'react-native-device-info';
import Animated, { BounceIn } from 'react-native-reanimated';
import { strings } from '../i18n';
import { fontSize } from '../utils/fonts';
import { Colors } from '../utils/colors';

const NetInfoComp = () => {
  const [hasInternet, setHasInternet] = useState(true);
  useFocusEffect(
    useCallback(() => {
      const netInfoSubscription = NetInfo.addEventListener((state) => {
        setHasInternet(state.isConnected);
      });
      return () => {
        netInfoSubscription();
      };
    }, [])
  );
  return !hasInternet ? (
    <Animated.View entering={BounceIn.delay(400)} style={styles.container}>
      <Text style={styles.text1}>{strings('common.noInternet')}</Text>
      <Text numberOfLines={1} style={styles.text2}>
        {strings('common.plzCheckInternet')}
      </Text>
    </Animated.View>
  ) : null;
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    paddingVertical: 15,
    position: 'absolute',
    zIndex: 1,
    top: hasNotch() ? 60 : 20,
    marginHorizontal: 10,
    alignSelf: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    elevation: 5, // Android shadow
    shadowColor: '#000', // iOS shadow
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    borderStartWidth: 5,
    borderColor: Colors.commonDanger,
  },
  text1: { textAlign: 'left', fontSize: fontSize.large, fontWeight: 'bold', marginBottom: 5 },
  text2: { textAlign: 'left', fontWeight: '500' },
});

export default NetInfoComp;

then add use this component inside your NavigationContainer of react navigation since we are also using useFocusEffect from react navigation

route.jsx (REF->)

      <NavigationContainer>
        <NetInfoComp /> // <--
          <RootStack.Screen name="HomeScreen" component={HomeScreen} />
        </RootStack.Navigator>
      </NavigationContainer>

---

3. Response we will get from NetInfo state:

{"details": {"ipAddress": "1xx.1xx.x.1x", "isConnectionExpensive": false, "subnet": "xxx.xx5.2xx.x"}, "isConnected": true, "isInternetReachable": null, "type": "wifi"}

Event Listeners:
The addEventListener method allows you to listen for changes in the network status. When the network status changes, the provided callback function is invoked with the updated network state.

Using this package can be beneficial when your React Native application needs to adapt its behavior based on network connectivity, such as fetching data from an API when the device is online and showing a message when offline.

Comments

[Florian Kiem]

Saw you have used i18n in the example. Have you already heard from inlang? To be transparent, I'm working there and we're building an ecosystem for globalization. We offer many different products that helps developers to be not only more efficient, but also ahead of competitors (e.g. not missing out missing translations in your app, accurately translate visually and so on).

Ofc we want to step foot in mobile development as well soon, but our dev-tools and infrastructure might interest you right away: inlang.com/