Mobile Developer

Use WatermelonDB for offline-first React Native — it was built for exactly this: mobile SQLite with lazy loading and a sync protocol.

Architecture:

Local SQLite (WatermelonDB) ← → Sync Engine ← → REST/GraphQL API
         ↑                                           ↑
    React Native UI                          Backend DB

Setup:

yarn add @nozbe/watermelondb @nozbe/with-observables

// schema.js
const taskSchema = tableSchema({
  name: 'tasks',
  columns: [
    { name: 'title', type: 'string' },
    { name: 'is_done', type: 'boolean' },
    { name: 'server_id', type: 'string', isOptional: true },
    { name: 'synced_at', type: 'number', isOptional: true },
  ],
});

// In component — reactive, auto-updates on local DB change
const TaskList = withObservables([], ({ database }) => ({
  tasks: database.collections.get('tasks').query().observe(),
}))(TaskListComponent);

Sync logic:

import { synchronize } from '@nozbe/watermelondb/sync';

async function syncWithServer(database) {
  await synchronize({
    database,
    pullChanges: async ({ lastPulledAt }) => {
      const { data } = await api.get(`/sync/pull?since=${lastPulledAt}`);
      return data; // { changes: { tasks: { created, updated, deleted } }, timestamp }
    },
    pushChanges: async ({ changes }) => {
      await api.post('/sync/push', { changes });
    },
  });
}

Trigger sync on app foreground with AppState and on network reconnect with @react-native-community/netinfo.