Inconsistent while using with 'NetInfo' from '@react-native-community/netinfo'

[kamlesh1000]

I have a simple method for detecting the change in internet connection. Every change in connection must give a snackbar pops up. When internet connection changes from OFF state to ON, it works perfect. But, when changes from ON to OFF, no any snackbar pops up. I checked with log which is perfectly working. Also, checked replaing snackbar with Alertbox which worked perfectly. I used following code:

  handleConnectivityChange = (isConnected) => {

    NetInfo.isConnected.fetch().done((isConnected) => {

    if(isConnected == true)
    {
      console.log('Yes Internet');

      Snackbar.show({
        title: 'Connected to Internet',
        duration: Snackbar.LENGTH_LONG,
        action: {
          title: 'DISMISS',
          color: 'rgb(216,21,88)',
          onPress: () => { /* Dismiss snackbar default */ },
          },
      });
    }
    else
    {
      console.log('No Internet');

      Snackbar.show({
        title: 'No Internet Connection',
        duration: Snackbar.LENGTH_LONG,
        action: {
          title: 'DISMISS',
          color: 'rgb(216,21,88)',
          onPress: () => { /* Dismiss snackbar default */ },
        },
      });
    }
    });

  }

React native environment:

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 2.41 GB / 7.92 GB
  Binaries:
    Node: 12.3.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  3.4.0.0 AI-183.6156.11.34.5522156
  "react": "16.8.6",
  "react-native": "0.60.4",
  "react-native-snackbar": "^2.0.2",
  "@react-native-community/netinfo": "^4.1.3",

[cooperka]

Hmm very strange, it seems like the only difference between the two calls is the Snackbar title. In order to help I'd need to see a demo app so I can debug myself. Are you able to create and share a working demo @kamlesh1000?

[kamlesh1000]

@cooperka This is the demo : https://snack.expo.io/@kamalesh/2d16c2 It gives me the error: Cannot read property 'LENGTH_LONG' of undefined which is the pinned issue. So,I think you can deal with this 👍

[bytewiz]

I am using Expo and I get the same error if this is supposed to be supported by Expo at all:

[cooperka]

Ah, Snackbar is a native module so Expo doesn't support it. You can't use Snackbar with Expo. Thanks for the question and demo.

[kamlesh1000]

I am not using the Expo CLI. I have a different question. Did you just closed this issue refering the issue in the comment?

[cooperka]

Apologies @kamlesh1000, I saw your demo at https://snack.expo.io and assumed that expo was the issue without looking further.

I can't seem to reproduce the issue in your demo because of the same error @bytewiz posted. Is the demo working for you? I don't think https://snack.expo.io supports this module so the demo could be a github repository, for example.

[kamlesh1000]

Yaa, demo is working well on mobile. But, that inconsistency is still a issue to be solved.

[cooperka]

I must be misunderstanding something because the demo seems to require Expo in order to run. Here's the popup I see when I try to run on mobile:

What are the steps you use to run on your device without Expo?

[kamlesh1000]

Sorry, I just missunderstood.. Demo was in expo. Just try with the IDE.

Just removing the third import. import Constants from 'expo-constants'; // remove

And its a demo for the IDE.

[cooperka]

If you could provide me with a working github repo I can clone and run in an IDE that would be really helpful. I maintain this in my spare time and it's hard to debug issues unless they're super quick to reproduce. Thanks for your patience.

[emmx]

I have the same issue. I think it's caused by not being on the app when you try to do Snackbar.show().

For instance if you are testing on a physical device and you slide the Android menu to disconnect the phone, that alone seems to be enough to cause the issue. On the other hand if you add a setTimeout() so the .show() call is delayed and you have enough time to go back to your app after disconnecting the phone (ie, close the sliding Android menu fast enough), then it works as expected.

Not sure how or why, but there's definitely a bug with this. I just confirmed it.

[cooperka]

Exactly @emmx, thanks for weighing in. The snackbar attaches to whatever view is on top of your screen when the snackbar is shown. If that view happens to be the menu or some temporary modal that goes away, you'll never see the snackbar. I'll add a section in the readme to further clarify this.

[madhums]

Ah, Snackbar is a native module so Expo doesn't support it. You can't use Snackbar with Expo. Thanks for the question and demo.

@cooperka Perhaps it's valuable to put this in the readme?

[cooperka]

Good call @madhums, I've added a note to the readme that to use with Expo you need to eject to ExpoKit.