Data sync does not block UI thread

Running sync operations synchronously on the JavaScript thread blocks the event loop, freezing animations, touch responses, and navigation during large data transfers. ISO 25010:2011 performance-efficiency.time-behaviour requires that background operations do not degrade foreground frame rate. A frozen UI during sync is indistinguishable from a crash for the user — they force-quit the app, potentially interrupting the sync and corrupting queue state. Sync must be non-blocking even when processing hundreds of queued records.

Move heavy sync work to a background task using react-native-background-fetch or Expo's TaskManager. For foreground sync, ensure every I/O operation uses async/await and never calls synchronous storage APIs.

// npm install react-native-background-fetch
import BackgroundFetch from 'react-native-background-fetch';

export function registerBackgroundSync() {
  BackgroundFetch.configure(
    { minimumFetchInterval: 15, stopOnTerminate: false, startOnBoot: true },
    async (taskId) => {
      try {
        await drainQueue(executeAction);
        await fetchRemoteUpdates();
      } finally {
        BackgroundFetch.finish(taskId);
      }
    },
    (err) => console.error('BackgroundFetch failed to start:', err)
  );
}

For in-app sync, never use AsyncStorage.getItemSync or equivalent; every call must be awaited. Wrap sync triggers in a debounce so rapid reconnect/disconnect cycles don't spawn concurrent sync runs.