React Native theorytheory 0/50 · 0%
Networking · medium

34. Offline support and caching

Working with intermittent connectivity.

Mobile networks are unreliable, so a robust app caches recent data (last known balance, recent transactions) and clearly indicates staleness rather than showing a blank screen offline.

import NetInfo from "@react-native-community/netinfo";

function useIsOnline() {
  const [online, setOnline] = useState(true);
  useEffect(() => {
    const unsub = NetInfo.addEventListener((state) => setOnline(!!state.isConnected));
    return unsub;
  }, []);
  return online;
}

Queueing user actions performed offline (like a pending swap request) and retrying them once connectivity returns gives a far better experience than failing silently.

Check your understanding

  1. 1. What package detects network connectivity changes?

  2. 2. Why cache recent data instead of showing a blank screen offline?

  3. 3. What's a good pattern for actions performed offline?