How to Detect Offline & Online States in React Native?

In a world that is predominantly mobile, maintaining a positive user experience both online and offline is essential. A user experience where an application just fails silently (meaning no error message, simply “no internet connection”) can be frustrating and constitute a negative experience.

Thankfully, React Native makes it easy to detect network connectivity and respond easily to online and offline states.

Reasons to Detect Offline & Online States in React Native:

In context (you have a React Native app which has a cart, network requests, GraphQL, payment flows, etc), here are some compelling reasons/cases where detecting and responding to online and offline states is useful:

• Handling an offline state gracefully: Perhaps the user lost connectivity (network drops), you would want to show an “offline” banner, disable features, and queue requests rather than fail right away.
• Optimizing API requests: Before running a heavy GraphQL/REST call (evaluating large lists, placing an order), you could check connectivity to prevent embarrassing retries.
• Switching behaviour based on connection type: If on cellular vs WiFi, you might want to lower image quality, prevent large downloads, or notify the user. The library reports type, isConnectionExpensive, etc. 
• Connecting to global state/notifications: Since you have Redux, you can have a global “networkConnected” flag in your store to notify components as it is changed.
• Reliable UX: For instance, if the user is on their “proof of delivery” screen, or uploading photos (in your driver app), you could notify them if they lose connection mid-upload.
• Web support: If the app (or parts of the app) is running on Web (React Native Web), you have some fallback support, too.

Example:

yarn add @react-native-community/netinfo

or

npm install --save @react-native-community/netinfo

Android:

<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" />

import { useNetInfo } from '@react-native-community/netinfo';

function MyComponent() {
  const netInfo = useNetInfo();
  // e.g., netInfo.isConnected, netInfo.type, netInfo.isInternetReachable
  return (
    <Text>
      {netInfo.isConnected ? 'Online' : 'Offline'}
    </Text>
  );
}

Conclusion:

Detecting online and offline states in react native is easy and powerful. With the @react-native-community/netinfo library, you can continuously monitor network connections and alert users while even controlling offline data syncs.

This little piece of functionality can dramatically improve your route’s reliability and your users’ satisfaction. 

FAQ

1. What’s the best way to detect if there is an internet connection in React Native?

Use the @react-native-community/netinfo package to identify and inform your users of their live network state.

2. Does NetInfo work on both Android and iOS?

Yes, it works on both Android and iOS.

3. Can I determine whether the connection is Wi-Fi or Mobile Data?

Yes, NetInfo also tells you the connection, is it wifi, cellular, none, etc.