Hey there! I’ve built similar offline-first scanning apps with React Native/Expo and Firebase, so I totally get where you’re stuck. Let’s walk through a practical, battle-tested approach that fits your use case:

First, shift your workflow to prioritize local storage: every scan gets saved locally first, then we handle syncing to Firebase when connectivity returns. This ensures no data is lost if the user goes offline mid-scan.

You mentioned researching Expo’s Storage APIs—here’s which one to use based on your data type:

• Small, structured data (scan IDs, timestamps, metadata): Use expo-secure-store (it’s encrypted and persistent) or @react-native-async-storage/async-storage (ideal for larger JSON arrays).
• Large files (like scan images): Use expo-file-system to save files locally, then upload blobs to Firebase Storage when online.

For your scanning records (likely structured data), expo-secure-store is a solid choice for sensitive company data.

Wrap your storage operations in a reusable utility to avoid repetitive code. Here’s a quick example:

import * as SecureStore from 'expo-secure-store';
import { v4 as uuid } from 'uuid'; // Generate unique IDs for each record

// Save a new scan to local storage
export const saveLocalScan = async (scanData) => {
  const newScan = {
    id: uuid(),
    data: scanData, // Your scan payload (e.g., barcode, device info)
    createdAt: new Date().toISOString(),
    synced: false // Flag to track if it's been uploaded to Firebase
  };

  // Get existing local scans
  const existingScans = await SecureStore.getItemAsync('company_scans');
  const scansArray = existingScans ? JSON.parse(existingScans) : [];
  
  // Add new scan and save back
  scansArray.push(newScan);
  await SecureStore.setItemAsync('company_scans', JSON.stringify(scansArray));
  
  return newScan;
};

// Fetch all local scans (for debugging or UI)
export const getLocalScans = async () => {
  const scans = await SecureStore.getItemAsync('company_scans');
  return scans ? JSON.parse(scans) : [];
};

You need to trigger sync when the app comes online, or on app startup. Here’s how to handle this with Expo’s Network API:

First, install the dependency if you haven’t:

npx expo install expo-network

Then implement the sync logic and network listener:

import * as Network from 'expo-network';
import firebase from 'firebase/app';
import 'firebase/firestore'; // Or Firebase Storage if you're uploading files

// Sync unsynced local scans to Firebase
export const syncLocalScansToFirebase = async () => {
  const localScans = await getLocalScans();
  const unsyncedScans = localScans.filter(scan => !scan.synced);
  
  if (unsyncedScans.length === 0) return;

  try {
    // Use Firestore batch writes for efficiency
    const batch = firebase.firestore().batch();
    unsyncedScans.forEach(scan => {
      const docRef = firebase.firestore().collection('scans').doc(scan.id);
      batch.set(docRef, scan);
    });

    await batch.commit();

    // Mark scans as synced in local storage
    const updatedScans = localScans.map(scan => 
      unsyncedScans.some(s => s.id === scan.id) ? {...scan, synced: true} : scan
    );
    await SecureStore.setItemAsync('company_scans', JSON.stringify(updatedScans));
    
    console.log(`Synced ${unsyncedScans.length} scans to Firebase!`);
  } catch (error) {
    console.error('Sync failed:', error);
    // Add retry logic here (e.g., exponential backoff) if needed
  }
};

// Set up network listeners to trigger sync
export const setupSyncListeners = () => {
  // Check network on app start
  const checkNetworkOnLaunch = async () => {
    const networkState = await Network.getNetworkStateAsync();
    if (networkState.isConnected) {
      await syncLocalScansToFirebase();
    }
  };

  // Listen for network changes
  const networkSubscription = Network.addNetworkStateListener(state => {
    if (state.isConnected) {
      syncLocalScansToFirebase();
    }
  });

  // Run on mount
  checkNetworkOnLaunch();

  // Cleanup listener on unmount
  return () => networkSubscription.remove();
};

Call saveLocalScan() immediately when a user completes a scan—don’t wait for Firebase. Then, in your root component (like App.js), call setupSyncListeners() to handle auto-sync:

import { useEffect } from 'react';
import { setupSyncListeners } from './utils/storage';

export default function App() {
  useEffect(() => {
    const cleanup = setupSyncListeners();
    return cleanup;
  }, []);

  // Rest of your app code...
}

• Retry failed syncs: If a sync fails (e.g., flaky network), add a retry mechanism with exponential backoff (wait 1s, then 2s, then 4s, etc.) instead of trying immediately again.
• Duplicate prevention: Using unique UUIDs for each scan ensures you don’t upload duplicates to Firebase even if sync runs multiple times.
• Local data cleanup: After syncing, you can optionally delete old synced records from local storage to save space, or keep them as a backup.
• UI feedback: Show a badge or notification to users when there are unsynced records, so they know their data is safe offline.

To keep your app organized, use a layered architecture:

• Data Layer: Handles all local/Firebase storage operations (the utilities we wrote above)
• Business Logic Layer: Validates scan data, triggers storage/sync
• UI Layer: Renders scan forms, record lists, and sync status

This separation makes it easy to maintain and test each part independently.

内容的提问来源于stack exchange，提问作者juicy89