Offline-First in React Native: Building an Auto-Sync Engine That Users Never Think About
By Shivkrishna Shah · Engineer Philosophy — @shivkrishnashah · @engineerphilosophy Your app shouldn't have a "no internet" screen. Here's the architecture I use to make mobile apps write locally, sync automatically, and survive the messy reality of field connectivity. Every mobile developer has shipped this screen at least once: a sad cloud icon and the words "No internet connection. Please try again." For consumer apps, that's an annoyance. For enterprise field apps — sales reps in hospital basements, auditors in warehouses, technicians in rural areas — it's a dealbreaker. If the app stops working when the signal drops, people stop trusting it. And once field users stop trusting an app, they go back to paper and WhatsApp. I spent the last few years building and maintaining an offline-first React Native platform used daily by field teams across multiple countries. This post is the architecture I wish someone had handed me on day one: how to structure local storage, detect connectivity, queue writes, auto-sync in the background, and avoid the two bugs that will absolutely bite you (duplicates and conflicts). Everything here is generic — I'll use Realm DB and NetInfo in the examples, but the pattern maps cleanly onto WatermelonDB, SQLite, or MMKV-backed queues. The one rule that changes everything The local database is the source of truth. The server is just a replica you happen to reconcile with. Most apps are built the other way around: the server is the truth, and the app is a thin cache over fetch() . Offline-first inverts this. Every read comes from the local DB. Every write goes to the local DB first. The network is an implementation detail that a background service worries about — never the UI. This single inversion gives you three things for free: Zero-latency UX. Saves are instant because they're local writes. No spinners on submit. Airplane-mode parity. The app behaves identically online and offline, because the UI never talks to the network. Crash safety. D