How do you monitor network connectivity in React Native with @react-native-community/netinfo?

Short answer

Use the useNetInfo hook or addEventListener to continuously listen for connection type changes (WiFi, Cellular, None) and check whether the internet is actually reachable (isInternetReachable).

Explanation

NetInfo provides detailed network status. Distinguish isConnected (the device is connected to a modem or cell tower) from isInternetReachable (the device can actually reach the internet and get past captive portals).

Code example

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

function NetworkBanner() {
  const netInfo = useNetInfo();

  if (netInfo.isConnected === false || netInfo.isInternetReachable === false) {
    return (
      <View style={{ backgroundColor: '#b00020', padding: 8 }}>
        <Text style={{ color: '#fff', textAlign: 'center' }}>No internet connection</Text>
      </View>
    );
  }

  return null;
}

Common mistakes

• Relying only on isConnected, even though the phone may be on a WiFi network that requires login and does not pass actual data.

Follow-up questions

• How do you manage offline synchronization and data sync strategies with a server?

Sources

• react-native-netinfo — README