Offline state is clearly communicated to users

Without a visible offline indicator, users cannot distinguish between a live response and stale cached data, so they act on outdated inventory, prices, messages, or bookings and then blame the app when their changes silently fail to reach the server. This erodes trust fast on flaky cellular connections, drives one-star reviews tied to 'lost my data,' and undermines the user-experience taxon by hiding a critical system state. Support tickets spike because users assume a hang is a crash.

Render a persistent banner at the top of your root navigator that subscribes to @react-native-community/netinfo (or the browser navigator.onLine event) and appears whenever connectivity drops. Place the component in App.tsx or your top-level layout, include the text 'You are offline — changes will sync when connection returns,' and ensure it is announced to screen readers via accessibilityLiveRegion.

{!isOnline && (
  <View accessibilityLiveRegion="polite" style={styles.offlineBar}>
    <Text>You are offline. Changes will sync when connection returns.</Text>
  </View>
)}

• ID: mobile-offline-storage.offline-behavior.offline-ui-indicator

• Severity: medium

• What to look for: Examine UI code for visual indicators of offline state. Look for offline banners, disabled buttons, loading states, or other UI elements that show when the app is offline or syncing.

• Pass criteria: Count all offline UI indicator components or conditional renders in the codebase. When offline, the UI shows at least 1 clear, visible indicator (banner, icon, disabled state, message) that informs the user the app is offline or that data is cached. The indicator must be rendered conditionally based on network state.

• Fail criteria: No visual offline indicator found in UI. Users would not know if the app is offline or if they're viewing stale data. No more than 0 primary screens should lack an offline state indicator.

• Skip (N/A) when: Never — users must know if they're in offline mode or viewing cached data.

• Detail on fail: "No offline indicator in UI. Users cannot tell if the app is offline or if displayed data is current."

• Remediation: Add a visible offline banner to your main screen component:

  import { View, Text } from 'react-native';
  import { useNetworkStatus } from './hooks/useNetworkStatus';
  
  export function App() {
    const isOnline = useNetworkStatus();
  
    return (
      <View style={{ flex: 1 }}>
        {!isOnline && (
          <View style={{ backgroundColor: '#ffa500', padding: 12 }}>
            <Text style={{ color: 'white', fontWeight: 'bold', textAlign: 'center' }}>
              You are offline. Changes will sync when connection returns.
            </Text>
          </View>
        )}
        {/* Main app content */}
      </View>
    );
  }