Wifi states not notified/update after switching to another Wifi in iOS

[izone-airstream]

Environment

System:
OS: macOS 11.5.2
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 80.00 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 15.14.0 - /usr/local/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 7.7.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
Android SDK:
API Levels: 25, 26, 28, 29, 30, 31
Build Tools: 26.0.2, 28.0.3, 29.0.2, 30.0.0, 30.0.3
System Images: android-26 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64
Android NDK: 21.1.6352462
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7199119
Xcode: 13.0/13A233 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_222 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.3 => 0.66.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Platforms

only iOS

Versions

• iOS: 14.7.1
• react-native-netinfo: 7.1.2
• react-native:0.66.3
• react:17.0.2

Description

First, we subscribe listener in App.js, and it works perfectly if switching between Wifi and Celluar. But if we switch from Wifi A to Wifi B, then we won't get any event about the status change.

Then, we tried to call fetch() every time when app goes to foreground, the result of fetch() also didn't update the state.

Finally, we tried to reproduce the issue by creating a simple app.

Reproducible Demo

We fresh create react-native init netinfotest, and only add the following into App.js:

useEffect(() => {
    const unsubNetState = NetInfo.addEventListener(state => {
        console.log("Network has changed 0!",state.type,state.details.ipAddress,state.isConnected);
    });
    return () => {
        unsubNetState();
    };
  },[]);

And We didn't get event after switching to another Wifi. Here is the log:

2021-11-19 12:16:40.542866+0800 netinfotest[36574:2410593] [native] Running application netinfotest ({
    initialProps =     {
    };
    rootTag = 1;
})
2021-11-19 12:16:40.832804+0800 netinfotest[36574:2410718] [javascript] Running "netinfotest" with {"rootTag":1,"initialProps":{}}
2021-11-19 12:16:40.835481+0800 netinfotest[36574:2410688] [connection] nw_socket_handle_socket_event [C5.1:1] Socket SO_ERROR [61: Connection refused]
2021-11-19 12:16:40.837066+0800 netinfotest[36574:2410688] [connection] nw_socket_handle_socket_event [C5.2:1] Socket SO_ERROR [61: Connection refused]
2021-11-19 12:16:40.838101+0800 netinfotest[36574:2410692] [connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
2021-11-19 12:16:40.838335+0800 netinfotest[36574:2410692] TCP Conn 0x6000037a4000 Failed : error 0:61 [61]
2021-11-19 12:16:40.927946+0800 netinfotest[36574:2410718] [javascript] 'Network has changed 0!', 'wifi', '192.168.15.122', true
2021-11-19 12:16:41.483270+0800 netinfotest[36574:2410690] [boringssl] boringssl_metrics_log_metric_block_invoke(144) Failed to log metrics
2021-11-19 12:16:41.569574+0800 netinfotest[36574:2410718] [javascript] 'Network has changed 0!', 'wifi', '192.168.15.122', true
2021-11-19 12:27:51.564388+0800 netinfotest[36574:2417340] [boringssl] boringssl_metrics_log_metric_block_invoke(144) Failed to log metrics

[mikehardy]

I suggest as a next step digging into the node_modules objective-c files directly, examining the connection watcher code and adding in NSLog statements around all the native API calls

The goal is to see if the native APIs are calling our handlers at all or not. Maybe the native APIs have an issue? Or we need to use different ones? Or maybe the code isn't handling the callbacks correctly?

I won't have time to help debug this further personally - just to set expectations - most issues in this repo are resolved through diligent investigation from the original reporter. You've already posted console logs so it appears to me you have all the skills necessary to dig in there and see what the native APIs are doing

[izone-airstream]

Yep, will do. Just wonder if we've missed some critical points or made some obvious silly mistakes.

[mikehardy]

No - from the last year or two I've been listening to / helping maintain this repo we have lots of issues semi-recently on the hook not firing, but that was an eventlistener regression that was reverted. And as you mention it works cell/wifi/cell. I've never heard anyone bring up wifi/wifi switches, so perhaps it's just a native API misuse or error? But it's a new investigation - haven't heard anyone talking about it yet

[mikehardy]

I have noticed a comment that came through in email but is no longer present - that's fine - just wanted to say your mention about events not firing while app is in background is something I noticed with my feature branch (not merged yet) for #523 - the notification only comes in when the app is back in action. Perhaps the whole module needs an AppState listener and should refresh itself when it comes back to foreground? Or perhaps there is an entitlement projects could add that would allow background delivery of these items?

[izone-airstream]

I deleted the comment since it's not right. It doesn't only happen in background but also in foreground. I think the reason is scNetworkReachability does not fire if switching between two different Wifi in background or in foreground but quickly enough.

For background to foreground, we have the same thoughts, we'll test with help of AppState listener to see if that could be a work around. It looks like there is another solution with help of location update which allowing scNetworkReachability works in background, if we have time we'll look into that as well.

[izone-airstream]

Ok, here's a demo of our tested work around for iOS, everytime when App switch from background to foreground, we refresh the states. Thanks for your help. @mikehardy

  useEffect(() => {
    const subAppState = AppState.addEventListener("change", async (nextAppState) => {
      if (IS_IOS_DEVICE && nextAppState=='active') {
        let newNetInfo = await NativeModules.RNCNetInfo.getCurrentState('');
        console.log(newNetInfo);
      }
    });
    const unsubNetState = NetInfo.addEventListener(state => {
        console.log(state);
    });
    return () => {
        if (subAppState) {
            subAppState.remove();
        }
        unsubNetState();
    };
  },[]);

[mikehardy]

That's a great workaround!! Could I ask you to post a quick PR (Github makes docs PRs a nearly trivial task all via web) on the README for the troubleshooting section? It's an excellent workaround and doesn't deserve to be buried in the issues list when I know this will affect others. It might even be useful to make this is a netinfo config setting ("refreshStateOnForeground" or something) and internalize it as library code really