react-native-netinfo: isInternetReachable is returning null on first attempt on ios

“their” --> It is open source. There is no “they”, you are the they! All users of the library are the library developers! Welcome to the club 🤗 "waiting … " --> no need to wait! Make a PR with the fix!

This is what I am using right now:

import NetInfo from '@react-native-community/netinfo';
import { useEffect } from 'react';

export const useInternet = () => {

  useEffect(() => {
    // Fixes first call to NetInfo.fetch() returning `isInternetReachable` null on iOS
    // https://github.com/react-native-netinfo/react-native-netinfo/issues/572
    NetInfo.fetch();
  }, []);

  const hasConnectionError = async () => {
    const state = await NetInfo.fetch();
    const { isConnected, isInternetReachable } = state;
    return !isConnected || !isInternetReachable;
  };

  return { hasConnectionError };
};

@rassemdev I’ve just confirmed your issue on iOS. The first call to the listener set with NetInfo.addEventListener returns isInternetReachable = null. However, a second callback is fired right after (~100ms later) with the correct value.

I don’t know the exact cause, but my guess above still applies (the time between the check is made and the header request response is received). You should not rely on one single result when checking whether there’s internet or not, as it will be constantly changing.

I will still dig a bit to see if something can be improved, but I doubt it.

At all times please keep these in mind: https://stackoverflow.com/help/minimal-reproducible-example https://stackoverflow.com/help/how-to-ask

so do we know for sure if this is only on the first call? If you send out two requests close enough together, will the second one always return with a value? I think the recursive call is likely the best answer in this thread, but the real solution is to have some indicator as to why that value is null in the first place, and not return the call from fetch until whatever needs to init has inited, right?

This is what I am using right now:

import NetInfo from '@react-native-community/netinfo';
import { useEffect } from 'react';

export const useInternet = () => {

  useEffect(() => {
    // Fixes first call to NetInfo.fetch() returning `isInternetReachable` null on iOS
    // https://github.com/react-native-netinfo/react-native-netinfo/issues/572
    NetInfo.fetch();
  }, []);

  const hasConnectionError = async () => {
    const state = await NetInfo.fetch();
    const { isConnected, isInternetReachable } = state;
    return !isConnected || !isInternetReachable;
  };

  return { hasConnectionError };
};

thank you for the idea, but i prefer this

import { useEffect, useRef } from 'react';
import NetInfo from '@react-native-community/netinfo';

const useInternet = () => {
  useEffect(() => {
    // Fixes first call to NetInfo.fetch() returning `isInternetReachable` null on iOS
    // https://github.com/react-native-netinfo/react-native-netinfo/issues/572
    NetInfo.fetch();
  }, []);

  const hasInternet = async () => {
    const { isConnected, isInternetReachable } = await NetInfo.fetch();
    return isConnected && isInternetReachable ? true : false;
  };

  return { hasInternet };
};

export default useInternet;

Definitely going to merge the refresh PR it’s just a holiday here, been busy

If there really is a platform issue I’d welcome any PR that fixes it

  isInternetReachable = (await NetInfo.fetch()).isInternetReachable;

  if (isInternetReachable) {
    return isInternetReachable;
  }

  await timeout(200);

  isInternetReachable = (await NetInfo.fetch()).isInternetReachable;

No, I’m still waiting for their fix.