I can also reproduce this with RN 0.29.0. I was running on 0.26.2 earlier and it worked fine with it. Going to try building from source and debug.

+1

I've reported the same issue before: #8469

Quick workaround is to add an event handler NetInfo.isConnected.addEventListener('change', Function.prototype)

+1 and same issue with NetInfo.fetch().done() - always returns unknown

I solved it this way:

componentDidMount() {
  const dispatchConnected = isConnected => this.props.dispatch(setIsConnected(isConnected));

  NetInfo.isConnected.fetch().then().done(() => {
    NetInfo.isConnected.addEventListener('change', dispatchConnected);
  });
}

+1

we have found this bug in 0.29.2..

we have found this bug in 0.28

0.30.0 still not working

The relevant code hasn't changed so it makes sense that it's still not working.

Note that I previously reported the bug here: #8469 where it details the cause and has sample code attached. Because of this, I think it makes sense to leave this closed.

The number of open RN issues grows daily so it's important to do our part and consolidate where possible.

I noted the same Issue today

I am using 0.30.0 version , And i'm also found this error.

the same issue to me, I am using RN@0.30.0 and the fetch always return unknown.

But we can use addEventListener instead.

NetInfo.addEventListener('change',
    (networkType)=> {
        this.setState({networkType})
    }
)

instead of:

NetInfo.fetch().done(
    (networkType)=> {
        this.setState({networkType})
    }
)

@facebook-github-bot bug

I am having this issue on 0.31, will this be fixed?

same to 0.32

@knowbody How your snippet work? I need to define a setIsConnected method in my class or as a global function or anything else? Because, actually I have an error who said Can't find variable: setIsConnected

@florentsorel so in my project I use redux for state management and setIsConnected is my action creator, which looks something like:

actions/network.js

export const setIsConnected = (isConnected) => ({
  type: 'SET_IS_CONNECTED',
  isConnected
});

and then I have a network reducer:

reducers/network.js

const initialState = {
  isConnected: true
};

const network = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_IS_CONNECTED':
      return {
        isConnected: action.isConnected
      };

    default:
      return state;
  }
}

export default network;

+1

I'm having this issue on v0.34.1

Edit: Updated to v0.35.0 and same problem.

same on v0.35.0

I am having the same issue on v0.36.0

@knowbody snippet works for me in 0.36

@Dnld: @Ehesp says that it works on v.036, you and 5 others not? Is this not solved eventually? I used to have problems with 0.33 too, and I would like to upgrade. Thanks.

The underlying code hasn't really changed so I would be surprised if this is "fixed".

I put fix in quotes because it seems like the motivation for this change is to only set up the native machinery that watches the network status if the application code is interested in observing it.

Apps register interest by adding an event listener which then starts checking reachability.

At this point it seems like this is the desired behaviour so perhaps a documentation change is required. NetInfo.isConnected returns a boolean so it doesn't express that the state is unknown and that that won't change until you add an event listener. Alternatively the function could be changed to return null or a boolean.

My apps have code that is very similar to what @knowbody posted. I don't call NetInfo.isConnected.fetch() at all, however, as it's useless at startup.

i assume there is connectivity, add the listener, and then the state will be updated when the connectivity state is no longer unknown.

0.34.1 still not working

Same issue with RN 0.37.0

Upgraded to 55 specifically because the changelog said it's supposed to fix this -- still broken (0.55.3).

I am able to get it to work using a similar solution to @yuyao110120:

NetInfo.isConnected.fetch().then(() => {
  NetInfo.isConnected.fetch().then(isConnected =>
    // isConnected is now the correct value
  });
});

I no longer trust NetInfo (react-native 0.53.3)
This is what I do to make sure there's internet:

async function handleConnectivityChange(status) {
  const { type } = status;
  let probablyHasInternet;
  try {
    const googleCall = await fetch(
        'https://google.com', {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          Pragma: 'no-cache',
          Expires: 0,
        },
      });
    probablyHasInternet = googleCall.status === 200;
  } catch (e) {
    probablyHasInternet = false;
  }

  console.log(`@@ isConnected: ${probablyHasInternet}`);

}

  NetInfo.getConnectionInfo().then(handleConnectivityChange);
  NetInfo.addEventListener('connectionChange', handleConnectivityChange);

@SudoPlz I pretty did the same thing on my apps, works just fine. But the NetInfo API should def be fixed haha !

@SudoPlz I noticed that fetch caches the request on Android. You'd have to give it some headers to prevent that.

      const googleRequest = await fetch('https://www.google.com', {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          'Pragma': 'no-cache',
          'Expires': 0
        }
      });

Ok thanks for letting me know @abdallamohamed I updated the comment.

same as @kylevdr, worked reliably but adding a small timeout before 2nd call seems to help with flicker where it will disconnected for a split 2nd right after unlocking

Edit: fwiw this works in 55.3, but not 55.4

Adding an initial connection event listener will cause NetInfo.getConnectionInfo() and NetInfo.isConnected.fetch() to work properly on the first call.

const onInitialNetConnection = isConnected => {
    console.log(`Is initially connected: ${isConnected}`);

    NetInfo.isConnected.removeEventListener(
        onInitialNetConnection
    );
};

NetInfo.isConnected.addEventListener(
    'connectionChange',
    onInitialNetConnection
);

// both now work on the first call.
await NetInfo.getConnectionInfo();
await NetInfo.isConnected.fetch();

Thanks #8469

Make sure to import this file or else it will not execute.

P.S. If you are using fetch, use method: 'HEAD' to reduce the amount of data transmitted.

None of the solutions above worked when running the app in debug mode on an iPhone 8 (React Native 0.55.3, iOS 11.3.1) in the following scenario: Close the app and start it with mobile data and wifi off.

Any subsequent events are lost with all solutions mentioned above (except for @SudoPlz's answer). Only running the application in release mode on the device or in debug mode on a simulator triggered any NetInfo events.

@nlindroos so do you actually confirm that NetInfo works fine on devices that run the release version?

In the specific case of starting the application in offline mode on a physical iOS device, running in release mode was the only working solution to get any NetInfo events to trigger. I haven't tested all related scenarios sufficiently to vouch for this as a generic solution to all NetInfo problems.

I can say that combination of the solutions that @woodpav and @abdallamohamed worked for me
I am using RN version 0.55.4

I must ping Google server frequently to check for internet connection 😕

I am using iPhone 8 - 11.3 simulator and on RN version 0.55.4 NetInfo.isConnected.fetch().then(isConnected => console.log('isConnected', isConnected))
Always returns false. This is a problem in production on phone as well. I tried variations of mobile data and wifi.

When switching back to RN version 0.55.3 it seems to be working again.

@octopitus , @martinentelect
this is my code, I am using react native version 0.55.4, and its a sensible and working workaround until NetInfo is fixed.
In my api.js file I have this code

import { NetInfo } from 'react-native';
import { url } from '[AppName]/src/config';

export const onInitialNetConnection = () => {
    NetInfo.isConnected.removeEventListener(onInitialNetConnection);
};

const getDataById = async (dataId) => {
    // both now work on the first call.
    await NetInfo.getConnectionInfo();
    const isConnected = await NetInfo.isConnected.fetch();
    if (!isConnected) {
        throw new Error('networkError');
    }
    const response = await fetch(`${url}${dataId}`, {
        headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            Pragma: 'no-cache',
            Expires: 0,
        },
    });
    if (response.ok) {
        return response.json();
    }
    throw new Error('invalidCode');
};

export default getDataById;

In my App.js file (my entry point to the application) I add the event listener:

NetInfo.isConnected.addEventListener(
            'connectionChange',
            onInitialNetConnection,
        );

@assafb81 Thank you! This helped my use case.

In my case, the event listener works perfectly on iOS but not at all on Android (on the emulator at least).
Are there any workarounds for listeners on Android while still using NetInfo?

    NetInfo.isConnected.addEventListener(
      "connectionChange",
      this.handleConnectionChange
    ); 

Use

this.count = 0
handleConnectivityChange(isConnected) {
   //for iOS
    this.count++
  console.log(isConnected + "isConnected")
  if(this.count > 1){
    console.log(isConnected + "this is the right value")
  }

@tannera,
check on real android device and not emulator

On 0.55.4 this is still a bug, and I just got hit on production 😢

Still not fixed on 0.56

@SudoPlz I've hidden your comment on the 0.57 discussion thread as off-topic. As you know, there's hundreds of open issues in the repo, but that thread is focused on getting a 0.57 release out.

This thread on a closed is pretty much invisible to maintainers, and I'm surprised that six months after a potential fix landed, no one has opened a new issue. If this is something you'd like to see fixed in master, please open a new issue with details, and ideally, send a PR.

Here's a minimal reproducible example (tested on iOS device), with some code from @woodpav shared above to work around the problem commented out at the top: https://snack.expo.io/@notbrent/netinfo-repro.