Network connectivity is actively detected

Without active network detection, your app has no basis for deciding when to serve cached data, queue actions, or display an offline banner. Blind network calls on a disconnected device generate unhandled promise rejections that ripple into broken UI states. ISO 25010:2011 reliability.fault-tolerance requires apps to detect and respond to connection loss at runtime. The absence of a NetInfo or equivalent listener means every network-dependent feature silently fails rather than gracefully degrading — a qualitatively worse user experience than a clear offline indicator.

Register a NetInfo.addEventListener at app startup and store connection state in a shared hook. Every screen that needs network access reads from this hook before attempting a fetch.

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

export function useNetworkStatus() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    const unsub = NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected ?? false);
    });
    return unsub;
  }, []);

  return isOnline;
}

Then gate network calls on this value and show an <OfflineBanner /> when isOnline is false. Wire this listener before your root navigator mounts so the value is stable on first render.

• ID: mobile-offline-storage.offline-behavior.network-detection

• Severity: high

• What to look for: Examine whether the app uses a network detection library like netinfo or expo-network. Look for code that listens to network state changes (connected/disconnected, wifi/cellular/none) and responds accordingly.

• Pass criteria: Count all network state listener registrations in the codebase. App imports and uses a network detection library with at least 1 active listener that updates app state when connection changes. The listener must differentiate between connected and disconnected states.

• Fail criteria: No network detection library found, or the library is imported but not used. Do NOT pass when the network library is imported but no addEventListener or equivalent listener is registered.

• Skip (N/A) when: Never — knowing network status is essential for offline handling.

• Cross-reference: The Mobile Navigation & Deep Linking audit (mobile-navigation-linking) checks navigation state persistence, which depends on network-aware state management.

• Detail on fail: "No network detection library found. App cannot differentiate between online and offline states."

• Remediation: Use react-native-netinfo to monitor network state:

  // Install: npm install @react-native-community/netinfo
  
  import NetInfo from '@react-native-community/netinfo';
  import { useEffect, useState } from 'react';
  
  export function useNetworkStatus() {
    const [isOnline, setIsOnline] = useState(true);
  
    useEffect(() => {
      const unsubscribe = NetInfo.addEventListener(state => {
        setIsOnline(state.isConnected ?? false);
      });
  
      return unsubscribe;
    }, []);
  
    return isOnline;
  }
  
  // Usage in your app:
  export function MyScreen() {
    const isOnline = useNetworkStatus();
  
    return (
      <View>
        {!isOnline && <OfflineBanner />}
        {/* ... rest of UI ... */}
      </View>
    );
  }
  

  Or use Expo's built-in network module:

  import * as Network from 'expo-network';
  
  export async function checkConnection() {
    const result = await Network.getNetworkStateAsync();
    return result.isConnected ?? false;
  }