Network Status with NetInfo

React Native 36,878 has no built-in connectivity API; the community package NetInfo 2,178 (github.com/react-native-community/react-native-netinfo (https://github.com/react-native-community/react-native-netinfo 2,178 ), MIT) fills the gap. npx expo install @react-native-community/netinfo installed 12.0.1 for SDK 57. Its state holds type (wifi, cellular, none and so on), isConnected (a network exists), isInternetReachable (a test request got through) and a details object. NetInfo.fetch() reads it once, addEventListener() subscribes, and useNetInfo() re-renders a component on every change:

src/info/NetStatus.tsx: a live connectivity banner (excerpt)TSX

  const net = useNetInfo();                         // re-renders on every change
  useEffect(() => NetInfo.addEventListener((s) =>   // returns its own unsubscribe
    console.log(`${s.type}, connected ${s.isConnected}, `
      + `internet ${s.isInternetReachable}`)), []);

Metro could not show what happened next, because its log stream travels over the very network being switched off, so the output comes from the device's own log. Wi-Fi and mobile data were turned off, then back on:

Switching the emulator's networks and reading the JavaScript logShell

adb -s emulator-5554 logcat -c
adb -s emulator-5554 shell svc wifi disable; adb -s emulator-5554 shell svc data disable
adb -s emulator-5554 shell svc wifi enable; adb -s emulator-5554 shell svc data enable
adb -s emulator-5554 logcat -d -s ReactNativeJS:I

Output

--------- beginning of main
09-24 19:48:35.413 15502 15547 I ReactNativeJS: wifi, connected true, internet false
09-24 19:48:35.414 15502 15547 I ReactNativeJS: none, connected false, internet false
09-24 19:48:35.817 15502 15547 W ReactNativeJS: Cannot connect to Expo CLI.
...
09-24 19:48:45.462 15502 15547 I ReactNativeJS: cellular, connected true, internet false
09-24 19:48:45.891 15502 15547 I ReactNativeJS: cellular, connected true, internet true
09-24 19:48:45.892 15502 15547 I ReactNativeJS: cellular, connected true, internet true
09-24 19:48:52.347 15502 15547 I ReactNativeJS: wifi, connected true, internet true

The warning in the middle is the development build losing Metro. isConnected and isInternetReachable disagreed twice, briefly: a network can exist before, and without, internet access, as behind a hotel's login page. Treat isInternetReachable === null as "not known yet", show an offline banner only for false, and still handle failed requests, because reachability is a guess made a moment ago.

MENU

Network Status with NetInfo