Thiery shows how repeated pop-ups, endless loading screens, and apps that forget user data make poor offline experiences. He recommends keeping familiar parts of the interface available, giving calm status messages, preserving critical data such as tickets, and offering retry when useful.
Offline first applications in React Native done well
Speaker
Adrien Thiery of Veeva discusses building offline-first React Native apps at a Callstack conference.
Trello lets users reopen previously loaded boards and cards, and mark checklist items complete while offline. This optimistic approach lets people keep working, but it depends on reliably saving and syncing their changes.
Thiery uses his sample app InstaMeow to show how React Native Offline can expose connection status and adapt the interface. He stores selected cat images in Redux before attempting uploads, and uses Redux Persist to restore state after an app closes or crashes.
For uploads, Thiery keeps pending images locally, moves successful uploads into the feed, and puts failed ones in a retryable state. React Native Offline can queue actions until connectivity returns and cancel queued uploads; he also recommends checking access to the app's server, not just general internet access.
Thiery says background and post-closure action queues remain a gap for React Native offline apps, and notes that Redux Offline was not production-ready at the time. His guidance is to keep the UI responsive, be cautious with requests, save app state often, and prioritize the device over connectivity.
Takeaways
- Keep familiar screens and useful local data available when the network drops.
- Save user actions locally before sending them, then preserve failed work for retry.
- Use optimistic UI only when queued changes can be reliably persisted and synced.
- Check whether your own server is reachable, since internet access alone may not be enough.
- Persist critical app state often so crashes or closures do not erase pending work.
Mentioned in this talk
Search inside this talk
What was claimed 10
- usesVeeva uses React Native
“We've been working with React Native since mid-2015.”
YouTube Unverified1 source· Talk
- metricVeeva: 22 people
“We're 22 people right now.”
YouTube Unverified1 source· Talk
- works atAdrien Thiery works at Veeva
“At Veeva, we're a web and mobile shop.”
YouTube Unverified1 source· Talk
- usespersists data based on Redux stores
“allows you to persist data through AsyncStorage based on your Redux stores”
7:29inReact And React Native: Siblings, Not TwinsYouTube Verified2 sources· Talk
- feature
Trello: Users can access previously loaded boards and cards, make checklist changes offline, and have those actions applied later.“You can still go into your boards if you've loaded them before.”
YouTube Unverified1 source· Talk
- featureInstaMeow: Retrieves cat pictures from an API when connected and allows users to queue uploads from their device while offline.
“allow you to upload several cat pictures from your device even when you don't.”
YouTube Unverified1 source· Talk
- uses
“First, I'm going to add the images locally and store them in my Redux store.”
YouTube Unverified1 source· Talk
- featureRedux Persist: Persists Redux state locally and restores it when the app launches.
“Every time you launch your app, it's going to restore everything stored locally.”
YouTube Unverified1 source· Talk
- featureReact Native Offline: Provides connectivity status and middleware that queues actions until network connectivity returns.
“only dispatch them when you have network connectivity”
YouTube Unverified1 source· Talk
- launchedAWS Amplify launched React Native Need
“At AWS Amplify, we really want to give back to the community. We're launching a program called React Native Need.”
YouTube Unverified1 source· Talk
