React native Connection status on background / locked screen NetInfo

Question

Description: When the app is running in a background state or Locked, When the user unlock or foreground the app, useNetInfo(); hook return as isConnected as false. Even I tried to re-fetch the state still using NetInfo.fetch() return the same state.

It's happening in Android real device connected to Wifi

Package Name: "@react-native-community/netinfo": "^7.1.2",

Code:

 const netInfo = useNetInfo();
  const [show, setShow] = useState(false);

  useEffect(() => {
    setShow(!(netInfo.isConnected && netInfo.isInternetReachable));
  }, [netInfo]);

  useEffect(() => {
    fetchConnection();
  }, []);

  const fetchConnection = () => {
    NetInfo.fetch().then((state: any) => {
      setShow(!(state.isConnected && state.isInternetReachable));
    });
  };

Answer 1

I fixed this issue by reverting the package version into "@react-native-community/netinfo": "5.9.7", Also, change the androidXCore version into 1.6.0. Now it's working as expected.

Reason: Due to the hibernation features changes in androidXCore version 1.7.0. Netinfo does not return the state properly if the app is in a hibernation state. Please fix this issue in the upcoming release. Thanks.

Answer 2

add navigation focus event listener and check for network update whenever the screen is focused.

Answer 3

Please try this, it's from the package npm site

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