React Native - NetInfo.addEventListener not triggering when network reconnected

Question

I am trying to implement a offline (and yet to be added - but also a low connection) network error popup message into a clients React Native app.

here is my full view code:

import React, {useState, useEffect} from 'react';
import {Dimensions, View, Text} from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import * as Animatable from 'react-native-animatable';

export default function InternetCheck() {
  const APP_NAME = 'Security App';
  const [isConnected, setIsConnected] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    //Intial status

    NetInfo.fetch().then((state) => {
      
        setIsConnected(state.isInternetReachable);
    });

    //Internet connection listener
    NetInfo.addEventListener((state) => {
      console.warn('called');
      console.warn(state.isInternetReachable);

      setIsConnected(state.isInternetReachable);

    });
  }, []);

  return (
    <React.Fragment>
      {!isConnected && (
        <Animatable.View
          style={{
            backgroundColor: 'red',
            borderTopLeftRadius: 40,
            flexDirection: 'row',
            position: 'absolute',
            zIndex: 2,
            top: 30,
            width: Dimensions.get('window').width / 1.5,
            height: 40,
            alignItems: 'center',
            alignContent: 'center',
            alignSelf: 'center',
            borderRadius: 50,
          }}
          animation="fadeInDown">
          <View style={{flex: 2}}>
            <Text
              style={{
                color: '#fff',
                textAlign: 'center',
                alignSelf: 'center',
                fontWeight: '700',
              }}>
              * WARNING You are Currently OFFLINE - Please reconnect to use this apps features. 
            </Text>
          </View>
        </Animatable.View>
      )}
      {isConnected && (
        <Animatable.View
          style={{
            backgroundColor: 'green',
            borderTopLeftRadius: 40,
            flexDirection: 'row',
            position: 'absolute',
            zIndex: 2,
            top: 30,
            width: Dimensions.get('window').width / 1.5,
            height: 40,
            alignItems: 'center',
            alignContent: 'center',
            alignSelf: 'center',
            borderRadius: 50,
          }}
          animation="fadeOutUp"
          duration={5000}
          delay={2000}>
          <View style={{flex: 2}}>
            <Text
              style={{
                color: '#fff',
                textAlign: 'center',
                alignSelf: 'center',
                fontWeight: '700',
              }}>
              You're back online!
            </Text>
          </View>
        </Animatable.View>
      )}
    </React.Fragment>
  );
}

My issue is that the error message displays no problem when disconnecting the simulators network. Both the console log messages and the animatable message appear. But when restoring the network the event listener doesn't re-run. so the isConnected state isn't ever returned to true, despite a restored connection.

Can anyone advise where i'm going wrong or suggest an alternate approach please.

Answer 1

There is a known issue with iOS simulators not reconnecting (under troubleshooting) so if you are testing on an iOS simulator, know that it won't trigger and you need to try out a physical device. But if this is happening on an android simulator that could be other things.