react-native-netinfo: addEventListener not updated when connection change

Platforms

Android

Versions

• react-native-netinfo: 7.1.12
• react-native: 0.63.3
• react: 16.13.1

---

Hey folks, I noticed when I start the application with network and turn on airplane mode, the value of const { isConnected } = useNetInfo() is not updated and if I start with airplane mode turned on, and turn it off, same issue. ` In my case I cannot upgrade the react-native version cause I’m using expo, so I made a patch to solve that issue on older versions.

you can install patch-package

then go to the file node_modules/@react-native-community/netinfo/android/src/main/java/com/reactnativecommunity/netinfo/ConnectivityReceiver.java and remove that condition https://github.com/react-native-netinfo/react-native-netinfo/blob/6b01fee211df160d0afce70c5955681c75b24a5a/android/src/main/java/com/reactnativecommunity/netinfo/ConnectivityReceiver.java#L100

and then remember to put patch-package command on postinstall script, you can check it here

then run npx patch-package @react-native-community/netinfo

it’s working fine for me on android and didn’t create issues on ios!

…or you can update to modern react-native versions, react-native is on 0.67.3 now, I cannot imagine using 0.63 at this point, it was released so long ago

I must admit, I fail to understand why anyone would base their mobile app on a framework release from nearly 2 years ago at this point (react-native 0.63 release, May 2020). Mobile application is a very fast moving target. How does the module work once you’ve used upgrade-helper to get current? https://react-native-community.github.io/upgrade-helper/

Ok, it’s because of this PR #548

Basically, the listener calls were added and started to complain about not being defined with RN 0.65. That PR should’ve been a breaking change as it pretty much broke support for android + RN < 0.65 (the listener methods are not called before 0.65).

The fix is to either upgrade RN or downgrade this library until you can migrate.

Let me know if it happens with RN >= 0.65

const unsubscribe = NetInfo.addEventListener(state => {
  console.log("state : ", state)
});

“@react-native-community/netinfo”: “6.0.1”, “@react-native-community/netinfo”: “7.1.10”, “react”: “17.0.1” “react-native”: “0.64.2” Android 11

1. First open the app, Connected to the internet --> the log appears
2. then I disabled the connection --> the logs don’t appear
3. then reconnect it --> sometimes it appears sometimes it doesn’t

different from version 6.0.0, every change in connection status will see the change in the log

I hope this can explain the case that I experienced

This package just doesn’t work on android platform. Added an event listener. When app is launched with wifi enabled, listener is notified about state change. After that I never get any new updates no matter what I do.

  useEffect(() => {
    NetInfo.addEventListener(state => {
      console.error('NETWORK STATE CHANGED: ' + state.isInternetReachable);
    });
  }, []);

Looks like NetInfo just notifies once. I really don’t understand why the latest version (8.2.0) and maybe previous versions are published. Like… guys… you had 1 job. To notify about network changes. And it doesn’t work on Android. Why the hell is a version published if the main functionality is broken?

Platforms

Android

Versions

• react-native-netinfo: 7.1.12
• react-native: 0.63.3
• react: 16.13.1

Hey folks, I noticed when I start the application with network and turn on airplane mode, the value of const { isConnected } = useNetInfo() is not updated and if I start with airplane mode turned on, and turn it off, same issue. ` In my case I cannot upgrade the react-native version cause I’m using expo, so I made a patch to solve that issue on older versions.

you can install patch-package

then go to the file node_modules/@react-native-community/netinfo/android/src/main/java/com/reactnativecommunity/netinfo/ConnectivityReceiver.java and remove that condition

https://github.com/react-native-netinfo/react-native-netinfo/blob/6b01fee211df160d0afce70c5955681c75b24a5a/android/src/main/java/com/reactnativecommunity/netinfo/ConnectivityReceiver.java#L100

and then remember to put patch-package command on postinstall script, you can check it here

then run npx patch-package @react-native-community/netinfo

it’s working fine for me on android and didn’t create issues on ios!

This worked for me! Thanks a lot 🎉

Attempting to use anything below react-native 0.64-latest is effectively pointless these days. Nothing before then even builds with Xcode 12.5, and you can’t even use iOS15 symbols until you use Xcode 13

There should be a standard refrain for anyone affected by any react-native issue: step 1: upgrade to current stable versions of everything step 2: attempt again to reproduce, on a real device step 3: then and only then if you can still reproduce, interact with an issue

We’re chasing ghosts on these old versions, it’s a tremendous waste of otherwise useful development time

@imamrobani , you’re right, 6.0.0 is the best one 😃

I’m aware of that, I’m in the release testers group - did you know there was a poll on why?

The biggest reason is Expo, and expo has it’s own plugin https://docs.expo.dev/versions/v44.0.0/sdk/netinfo/

The second biggest reason was there wasn’t a reason (“simply not a priority”), which when faced with the issues here is not a reason: you need to update

The third biggest reason was that macCatalyst doesn’t support arm64 slices yet, but we’re working on that and almost have it solved.

Fourth was react-native-windows/react-native-macos support - but those are both updated now, to 66 at least (windows on 67) - those are really really small numbers of people though

So, if you need macCatalyst on arm64 then I’m sympathetic. If you’re on Expo, please please use their netinfo, otherwise, it’s time to update.

This is true! I am facing same problem. Using same 0.63.4 version of react-native. Had to go back to 6.0.2

Ok, it’s because of this PR https://github.com/react-native-netinfo/react-native-netinfo/pull/548

Basically, the listener calls were added and started to complain about not being defined with RN 0.65. That PR should’ve been a breaking change as it pretty much broke support for android + RN < 0.65 (the listener methods are not called before 0.65).

The fix is to either upgrade RN or downgrade this library until you can migrate.

Let me know if it happens with RN >= 0.65

"@react-native-community/netinfo": "^8.1.0",
"react": "17.0.2",
"react-native": "0.67.3",


export const Offline = () => {
  const [connection, setConnection] = useState();

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      if (connection !== state.isConnected) setConnection(state.isConnected);
    });
    return () => {
      unsubscribe;
    };
  }, [connection]);

  return (
    <>
      {!connection ? (
        <View style={styles.offlineContainer}>
          <Text style={styles.offlineText}>No Internet Connection</Text>
        </View>
      ) : null}
    </>
  );
};

Hi @mikehardy can you help? Workflow:

• Connection true
• I turn my mac’s wifi off and the connection is false -> all good
• I turn wifi on and nothing happens -> I even reload component, nothing happens

FWIW: your code is not completely correct, also why don’t you use the hook provided: const netInfo = useNetInfo(); ?

• In the cleanup of your useEffect you have to do

return () => {
      unsubscribe(); // <-- notice the parentheses
    };

• Why is connection a dependency of your useEffect? Although not ‘wrong’. it’s superfluous.

"@react-native-community/netinfo": "^8.1.0",
"react": "17.0.2",
"react-native": "0.67.3",


export const Offline = () => {
  const [connection, setConnection] = useState();

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      if (connection !== state.isConnected) setConnection(state.isConnected);
    });
    return () => {
      unsubscribe;
    };
  }, [connection]);

  return (
    <>
      {!connection ? (
        <View style={styles.offlineContainer}>
          <Text style={styles.offlineText}>No Internet Connection</Text>
        </View>
      ) : null}
    </>
  );
};

Hi @mikehardy can you help? Workflow:

• Connection true
• I turn my mac’s wifi off and the connection is false -> all good
• I turn wifi on and nothing happens -> I even reload component, nothing happens

Since there are some comments about Expo pinning you to RN 0.64.x, I want to add some context for everyone running into this issue, hope it could help you find the best solution for you. (disclaimer, I work for Expo)

Some people mentioned that this might be caused by PR #548, I’m not sure if that’s correct but if it does it kind of makes sense.

Expo managed workflow

In the managed workflow, we reuse a runtime, similar to the Expo Go runtime, instead of building your app from scratch natively. It’s the “classic” way of using Expo, and does limit you in upgrading or installing native libraries (including React Native). We currently use @react-native-community/netinfo@7.1.3 inside the SDK 44 runtime, which seems to work in Expo Go and when using expo build:android (the classic build system). I don’t expect anyone with a managed Expo project, using classic builds, and using NetInfo to run into issues here. But, feel free to ping me if you do.

Expo bare workflow - OR - EAS with managed/bare

In these workflows it’s a slightly different story. In EAS build, we build your native app from scratch. It means that your app only includes the modules that you’ve installed. It also means that you are free to install or upgrade native libraries, including React Native. If you change these native dependencies, your app won’t be able to use Expo Go, that’s exactly why we added custom dev clients. If you installed a later version of Netinfo that includes PR #548, and still use RN 0.64.x, that might be the problem here (assuming that’s the culprit).

A temporary solution, until we (or you) have upgraded RN to a newer version is to pin Netinfo to the exact same version from the managed workflow, which is 7.1.3. That should enable the event listener again. As a side note, we are working on a RN upgrade for the next Expo SDK.

Hope this gets some people unblocked!

just need to comment out if (hasListener) { from ====>>>>>> [react-native-netinfo/android/src/main/java/com/reactnativecommunity/netinfo/ConnectivityReceiver.java]

…or you can update to modern react-native versions, react-native is on 0.67.3 now, I cannot imagine using 0.63 at this point, it was released so long ago

Just a data-point for maintainers:

0.64 is still the most popular by App downloads https://rn-versions.github.io

For me it worked on iOS, but not on Android, after I realised I had a VPN connection, and for some reason, even though I turned off wifi and mobile data, netinfo always returned true:

{"details": {"isConnectionExpensive": true}, "isConnected": true, "isInternetReachable": true, "isWifiEnabled": false, "type": "vpn"}

Spotted the type vpn, turn off vpn, and now its working, the listener and the fetch functions.

Platforms

Android

Versions

• react-native-netinfo:^8.1.0
• react-native: 0.67.2
• react: 17.0.2

Maybe saves some time for someone: In my case the problem was, that I have called configure after the listener has been registered, which will remove the listener again https://github.com/react-native-netinfo/react-native-netinfo#configure

Platforms

Android and iOS

Versions

• react-native-netinfo: 7.1.11
• react-native: 0.63.4
• react: 17.0.1

Description

I updated the NetInfo library from 6.0.0 to the last one, but addEventListener not working if the status connection change. I think the better version 6.0.0 is for the update listener.

and I go back to using 6.0.0

I back using NetInfo with the latest version, has worked as expected Thanks, Guys

With regards to:

keeping a single mIsInternetReachable boolean field for all connection types and rewriting it is what causes the issues I believe

And yet, if the package has one job, it’s to give developers one clear way to know if the internet is reachable, so there should definitely be one single value indicating current internet reachability I think?

It’s also important to understand that the Android APIs in the area have changed, and it appears that the new ones are the ones that are problematic. The forward port to the new ones is part of the problem.

It’s also important to understand that the react-native EventEmitter APIs in the area have changed, and it appears that the module’s use of the new ones are problematic. The forward port there was somewhat problematic.

It’s been the experience of others attempting to solve this that testing must be performed on a real device as the android emulators don’t seem to respond to the new Android APIs the same as real devices, and it’s important to test using react-native 0.65+ as prior versions don’t have the new EventEmitter APIs and the status of this module on the old APIs is uncertain.

@mikehardy, thank you for your answer. I myself have an open source package with ~7K weekly downloads and clearly understand the concept of open source software, how packages are made and responsibilities. I had a look at native codes yesterday. It will require some time to fix this problem, because keeping a single mIsInternetReachable boolean field for all connection types and rewriting it is what causes the issues I believe. There should be a map containing state for each connection type individually so connection types don’t overwrite each other and don’t lead to wrong values. I will try to fix it when I have some spare time.

@imamrobani , thanks, version 6.2.1 works better, but still not perfect.

1. Turn mobile off, wifi on
2. Turn wifi off Listener is not called in this case sometimes. And when WiFi is turned on again, it’s getting called with isInternetReachable: false first, then with isInternetReachable: true.

currently, I still using 6.0.0 😄

I’m seeing this issue in ios simulator after upgrading from react-native .64 to 67.3 (the upgrade appears to make no difference, but hey, it fixed my react native debugger so that’s cool) and 8.0.1

Specifically, I’m seeing strange behavior with default config in NetInfo.addEventListener:

1. { isConnected: true, isInternetReachable: null }
2. { isConnected: true, isInternetReachable: true }

(the subscriber is called twice). At this point I turn my mac’s wifi off and immediately the subscriber calls:

1. { isConnected: true, isInternetReachable: false }
2. { isConnected: false, isInternetReachable: false }

And now nothing I do will ever set it back to online. Here’s what I’ve tried:

• connecting back to wifi
• initiating requests on the device
• calling NetInfo.fetch() while online (resolves to { isConnected: false, isInternetReachable: false })

@cristianoccazinsp I believe you emphasized this needs to be tested on a real device with SIM as well? That affects the testing if I’ve been following it correctly. And yes, this one is a zombie that just will.not.die. Super frustrating!

I must admit, I fail to understand why anyone would base their mobile app on a framework release from nearly 2 years ago at this point (react-native 0.63 release, May 2020). Mobile application is a very fast moving target. How does the module work once you’ve used upgrade-helper to get current? https://react-native-community.github.io/upgrade-helper/

In another project I use the latest react-native but still same issue, so I go back using 6.0.0 for netInfo

Thanks @shahzaib803 Modifying the java file did work for me.

@mikehardy I’ll be working on the PR for RN versions below 65.

I did something silly that might help others in future. When testing in emulator (which is connected over wifi) whenever I turned off wifi I stopped getting console.log messages I thought it might be bug again but it was working fine when I was toggling mobile data. I put a simple toast that help me figure out my mistake.

@shahzaib803 all reasonable PRs happily merged + released

Perhaps if the android listeners have been problematic for more than a year, and no one has invested enough of their time to actually fix them, we should all instead check for connectivity errors in network-dependent methods, and do a retry after using the new imperative “refresh state” method added here #594 ?

Then we could all move on

Platforms

Android

Versions

• react-native-netinfo: 7.1.12
• react-native: 0.63.3
• react: 16.13.1

Hey folks, I noticed when I start the application with network and turn on airplane mode, the value of const { isConnected } = useNetInfo() is not updated and if I start with airplane mode turned on, and turn it off, same issue. ` In my case I cannot upgrade the react-native version cause I’m using expo, so I made a patch to solve that issue on older versions.

you can install patch-package

then go to the file node_modules/@react-native-community/netinfo/android/src/main/java/com/reactnativecommunity/netinfo/ConnectivityReceiver.java and remove that condition

https://github.com/react-native-netinfo/react-native-netinfo/blob/6b01fee211df160d0afce70c5955681c75b24a5a/android/src/main/java/com/reactnativecommunity/netinfo/ConnectivityReceiver.java#L100

and then remember to put patch-package command on postinstall script, you can check it here

then run npx patch-package @react-native-community/netinfo

it’s working fine for me on android and didn’t create issues on ios!

Works for me too! Thank you so much!

• react-native-netinfo: 9.0.0
• react-native: 0.64.3
• react: 17.0.1

@mikehardy, thank you for your answer. I myself have an open source package with ~7K weekly downloads and clearly understand the concept of open source software, how packages are made and responsibilities. I had a look at native codes yesterday. It will require some time to fix this problem, because keeping a single mIsInternetReachable boolean field for all connection types and rewriting it is what causes the issues I believe. There should be a map containing state for each connection type individually so connection types don’t overwrite each other and don’t lead to wrong values. I will try to fix it when I have some spare time.

@imamrobani , thanks, version 6.2.1 works better, but still not perfect.

1. Turn mobile off, wifi on
2. Turn wifi off Listener is not called in this case sometimes. And when WiFi is turned on again, it’s getting called with isInternetReachable: false first, then with isInternetReachable: true.

I think you make the mistake of assuming this is someone’s job. It’s not anyone’s job. The user of an open source package is the developer. Feel free to post a PR, I’ll happily merge it. But you can take your entitled attitude and go somewhere else with it Cheers

Thanks @byCedric - hopefully that will help a big chunk of affected users. The event listener changes from RN64 to RN65 have been problematic in a few modules, I’m looking forward to Expo crossing the chasm and moving past RN64 as well which I know is in progress. Cheers

NetInfo.addEventListener((state: NetInfoState) => { console.log(state); });

Working on iOS but not on Android.

“@react-native-community/netinfo”: “6.0.0”, “@react-native-community/netinfo”: “7.0.0”,
“@react-native-community/netinfo”: “8.0.0”. In none of these versions this addListener is working React native: “react-native”: “0.64.3”, Device: Huawei Mate 10 Pro with Android 10 with SIM card