NetInfo.isConnected.addEventListener: diverging behaviors on Android and iOS

[josmithua]

• 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 10.14.2
      CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Memory: 788.00 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.4.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /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 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 20, 25, 26, 27, 28
        Build Tools: 23.0.1, 25.0.1, 25.0.2, 26.0.2, 27.0.2, 27.0.3, 28.0.2, 28.0.3
        System Images: android-25 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.7.0 => 16.7.0
      react-native: 0.57.8 => 0.57.8

Description

#11041
NetInfo.isConnected.addEventListener diverging behaviors on Android and iOS:

• On Android, when a listener is added, it will not be triggered.
• However, on iOS, the handler is triggered when it is added.

Solution (?): Make iOS not trigger the handler when it is added, only when the connection changes.

Reproducible Demo

https://snack.expo.io/S1PS-UrzV
Notice Handler triggered: false on Android, but Handler triggered: true for iOS

[benjarwar]

We are having other inconsistent behavior issues with NetInfo.isConnected.addEventListener, as documented here: #22966

[karanjthakkar]

@sm1th Hey! I was just checking out this . It looks like the first time, it doesn't fire the handler. But from that point onwards all changes are recorded as expected. I don't think it is related to #22966 at all. I don't know what is the expected behavior by the RN team here. But if you want it to fire the first time on Android as well, you might have to debug the Android side on your own coz historically issues related to NetInfo have not received a lot of attention coz all the issues are easy to hack around. Sorry!

[josmithua]

@karanjthakkar You're right, I don't think my issue is related to #22966 either (@benjarwar I cannot reproduce your issues)

I would expect the expected behavior to be that the listener does not trigger on register.

In my case, however, I do want it to trigger on register, so this is my solution:

public async componentDidMount() {
    // Set connection state as soon as component mounts
    if (Platform.OS === 'android') {
        this.handleConnectionChange(await NetInfo.isConnected.fetch());
    }
    // On iOS, the change handler will trigger as soon as it is registered, so no
    // need to do the above
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);
}

[cpojer]

Heads up: we moved react-native-netinfo into its own repository, which should allow for making changes and fixes much faster. Please continue the discussion about this issue there: react-native-netinfo/react-native-netinfo#8