NetInfo.isConnected.addEventListener behaves incorrectly

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 172.94 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.9.4 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        API Levels: 23, 25, 26, 27
        Build Tools: 23.0.1, 25.0.2, 26.0.1, 27.0.3, 28.0.3
        System Images: android-23 | Intel x86 Atom_64
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

The callback passed to NetInfo.isConnected.addEventListener does not fire consistently nor accurately in iOS, 0.57.8. We cannot reliably determine whether or not the user is connected when following the documented method.

This is an enormous problem on our project, where we’re trying to restrict requests and functionality when the user is offline.

Reproducible Demo

I created a test app with react-native init:

https://github.com/benjarwar/NetInfoTest

Simply added a NetInfo.isConnected event listener that console logs the connection status on connectionChange:

https://github.com/benjarwar/NetInfoTest/blob/master/App.js#L21-L25

Testing locally in iOS, on initial load it logs true. When I disable WiFi, it correctly logs false. But thereafter I get incorrect behavior:

• Usually it doesn’t log anything further when subsequently enabling/disabling WiFi, so our app thinks the user is disconnected even when WiFi has been restored
• Sometimes, upon re-enabling, it logs true but then immediately/incorrectly logs false afterwards with WiFi still on

[benjarwar]

@nol13 your code doesn’t seem to help in the Simulator. The problem seems to be with the connectionChange event. It simply doesn’t fire reliably after the first disconnection event.

What’s interesting, though, is if I add a check for NetInfo.isConnected.fetch() in a setInterval, then the connectionChange dispatches reliably again in the Simulator. Like, calling NetInfo.isConnected.fetch() resets/unclogs the event dispatch stream somehow.

I’ve updated my NetInfoTest demo with a setInterval NetInfo check that displays the current connectivity value in the app. Note that it’s not necessary that the setInterval check actually does anything. This seems to work reliably for me both in the Simulator and on an actual device (both running iOS 11.4).

I still feel like this functionality needs some attention. These “solutions” are flaky and non-deterministic.

Example code:

  constructor(props) {
    super(props);
    this.state = { isConnected: "false" };
  }

  componentDidMount() {
    NetInfo.isConnected.addEventListener("connectionChange", isConnected => {
      console.log("addEventListener isConnected", isConnected);
      this.setState(() => ({ isConnected: isConnected ? "true" : "false" }));
    });

    setInterval(() => {
      NetInfo.isConnected.fetch().then(isConnected => {
        console.log("setInterval isConnected", isConnected);
      });
    }, 1000);
  }

[nol13]

Ya, that’s what the app state check was for. It would sometimes be offline for a split second right after unlocking, but the event wouldn’t fire when it went back on. The double check is because only the second check was reliable, and even then sometimes (every few days) it needed a bit of a timeout as well.

That code was originally to work around NetInfo as it existed in 55.3, but after the 57.8 upgrade didn’t notice any issues so figured I’d post what we had. I suspect the double check and AppState check may not be needed anymore. I’ll edit post to avoid confusion.

And ya, I tried last night with just…

_checkNetworkStatus = (isConnected) => {
    this.setNetworkStatus(isConnected);
}

and it completely blew up on me even on device, but worked fine when I did a single NetInfo.isConnected.fetch().

yet now just tried again and above seems to be working without issue 😕