TanStackT
TanStack4w ago
1 reply
ordinary-sapphire

React Native offline transactions

I was successfully able to make the new offline-transactions package work in my react native project.

Claude summarized the following hacks/workarounds that were required to get it to work:

Here are the React Native-specific hacks/fixes for @tanstack/offline-transactions:

  1. offline-polyfill.ts - Browser API stubs

  The library expects browser APIs that don't exist in React Native:
  // Stub document (visibility detection)
  globalThis.document = { addEventListener: () => {}, hidden: false, ... }

  // Stub window (online/offline events)
  globalThis.window = { addEventListener: () => {}, navigator: { onLine: true }, ... }

  2. ReactNativeLeaderElection class - Multi-tab coordination

  The library uses WebLocks or BroadcastChannel for multi-tab coordination. React Native has neither, so we implement a simple leader election that always returns "leader":
  class ReactNativeLeaderElection implements LeaderElection {
    // Always leader since RN is single-instance
    isLeader(): boolean { return true }
    onLeadershipChange(callback) { callback(true); ... }
  }

  3. asyncStorageAdapter - Storage backend

  The library defaults to IndexedDB with localStorage fallback. React Native has neither, so we implement the StorageAdapter interface with AsyncStorage.

  4. Pre-initialization timing

  The executor initializes asynchronously but the library's default behavior assumes sync initialization. We add a 100ms delay + pre-initialize at app startup to ensure leadership is established before any actions run.


I thought this might help other people trying to make things work in a react native context. Would there be interest in supporting this natively by the package?
Was this page helpful?