# App handles no-network state without crashing or blank screens

- **Pattern:** `ab-000497` (`app-store-review-blockers.completeness-stability.offline-behavior-graceful`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000497
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000497)

## Why it matters

Apple explicitly tests offline behavior during review, and ISO 25010:2011 fault-tolerance requires graceful degradation under abnormal network conditions. An app that shows a blank white screen or a frozen loading spinner when launched without connectivity fails the most basic resilience test. `TypeError: Network request failed` propagating to a blank screen is indistinguishable to the reviewer from a crash. Apps that rely entirely on live API calls with no offline fallback and no timeout fail not just on review but in real-world use — poor connectivity is not an edge case.

## Severity rationale

High because an app that shows a blank screen offline will fail Apple's explicit offline testing during review, causing rejection under guideline 2.1.

## Remediation

Add a network state listener and set timeouts on all fetch calls.

```tsx
// src/hooks/useNetworkStatus.ts
import NetInfo from '@react-native-community/netinfo';
import { useEffect, useState } from 'react';

export function useNetworkStatus() {
  const [isConnected, setIsConnected] = useState(true);
  useEffect(() => {
    return NetInfo.addEventListener(state => {
      setIsConnected(state.isConnected ?? true);
    });
  }, []);
  return isConnected;
}
```

Wrap all fetch calls with an `AbortController` that times out after 10–15 seconds. Show a clear "No internet connection" banner when offline with a retry button. Cache frequently accessed data with `AsyncStorage` or MMKV so the app has something useful to show.

## Detection

- **ID:** `offline-behavior-graceful`
- **Severity:** `high`
- **What to look for:** Count all relevant instances and enumerate each. Look for network connectivity checks: `NetInfo` (React Native), `Connectivity` (Flutter), `NWPathMonitor` (iOS), `ConnectivityManager` (Android). Check if the app has any offline-capable state or gracefully communicates loss of connectivity. Search for unhandled fetch rejections that occur when the device is offline (`TypeError: Network request failed`). Look for screens that show a blank white area when offline rather than a cached state or "You're offline" message. Check if the app's loading spinner runs indefinitely when there is no network (no timeout).
- **Pass criteria:** The app either: (a) shows a clear "you're offline" state when connectivity is lost and handles it gracefully, or (b) has offline-capable data (cache, local storage) and degrades gracefully. At least 1 implementation must be verified. No crash or blank screen on network loss.
- **Fail criteria:** App crashes or shows a blank screen when network is unavailable. Loading spinners run indefinitely with no timeout or error fallback. Raw network error messages rendered to the user.
- **Skip (N/A) when:** Never — all apps must handle the offline case.
- **Detail on fail:** `"App shows blank white screen when launched without network — all screens depend on live API calls with no offline fallback"` or `"Network timeout is not set — loading spinner runs indefinitely on poor connections"`
- **Remediation:** Reviewers test apps under various network conditions. Apple explicitly tests for offline behavior.
  1. Add a network connectivity listener:
     ```tsx
     import NetInfo from '@react-native-community/netinfo';
     NetInfo.addEventListener(state => {
       if (!state.isConnected) showOfflineBanner();
     });
     ```
  2. Set timeouts on all fetch calls (e.g., `AbortController` with 10-15 seconds)
  3. Cache frequently accessed data with `AsyncStorage`, MMKV, or SQLite so the app is useful offline
  4. Show a clear "No internet connection" state when offline, with a retry button

- **Cross-reference:** For related patterns and deeper analysis, see the corresponding checks in other AuditBuffet audits covering this domain.

---

## External references

- iso-25010 fault-tolerance

Taxons: error-resilience, user-experience

HTML version: https://auditbuffet.com/patterns/ab-000497