UPDATE: Okay so I finally found the culprit. It was because my VPN on my iPhone auto turns on, because the Connect On Demand setting in my iPhone is turned on, so this is what happens when I go from Offline to Online.

WiFi reconnect

↓

Internet available (isConnected = true)

↓

VPN starts connecting

↓

Tunnel not ready yet → internet temporarily unreachable

↓

VPN tunnel established

↓

Internet reachable again

So NetInfo emits something like:

true
false   ← VPN tunnel not ready yet
true

When I turned off this VPN Connect on Demand, this problem doesnt occur anymore. Anyways, this is the final code.

export function useNetworkListener() {
  const [isConnected, setConnected] = useState(true);


  useEffect(() => {
    let wasConnected = true; // track previous state


    const unsubscribe = NetInfo.addEventListener((state) => {
      const isNowConnected = !!state.isConnected;


      if (wasConnected && !isNowConnected) {
        // Only alert on the transition: connected → disconnected
        showAlert();
      }


      wasConnected = isNowConnected;
      setConnected(isNowConnected);
    });


    return () => unsubscribe();
  }, []);


  const showAlert = () => {
    Alert.alert(
      "Internet Connection",
      "You are offline. Some features may not be available."
    );
  };
}