Architect React Native Apps with Expo

Covers React Native app architecture built on Expo, comparing Expo against bare React Native across setup complexity, native-module handling (EAS Build versus manual linking), OTA updates, build service, and custom native code access. Ships six patterns: Expo Router navigation, an authentication flow (an AuthProvider using expo-secure-store to persist a token, protecting routes by redirecting based on an (auth) route group and the current user state, with sign-in, sign-out, and a splash screen while checking auth on mount), offline-first data with React Query (a QueryClient configured with networkMode: offlineFirst, persisted to AsyncStorage via a PersistQueryClientProvider and an async-storage persister, online status synced from NetInfo through React Query's onlineManager, and an optimistic-update mutation pattern that updates the cache immediately, rolls back on error, and invalidates on settle), native module integration, platform-specific code (a Button component using Platform.select for iOS shadow versus Android elevation styling, Platform.OS checks to skip haptics on web, react-native-reanimated for a press-scale animation, and the Button.ios.tsx, Button.android.tsx, and Button.web.tsx per-platform file convention), and performance optimization (Shopify's FlashList in place of FlatList with estimatedItemSize, removeClippedSubviews, maxToRenderPerBatch, and windowSize tuning, plus memoized list items and useCallback-wrapped render and key-extractor functions). Documents EAS Build and Submit commands for building and shipping to app stores, plus OTA update commands for pushing JS-only updates without a store review.

Use it when structuring a new React Native app, deciding between Expo and bare React Native, implementing authentication or offline-first data, integrating native modules, writing platform-specific UI, or optimizing list performance. Skip it for anything unrelated to React Native architecture or outside this scope.

Input is a mobile-architecture concern - project setup, auth, offline data, native integration, platform-specific styling, or list performance; output is the matching Expo or React Native code, ready to adapt into the app's provider tree and navigation structure.

Expo Router for navigation, expo-secure-store for token storage, @tanstack/react-query with @tanstack/query-async-storage-persister and @react-native-async-storage/async-storage for offline-first caching, @react-native-community/netinfo for connectivity, react-native-reanimated and expo-haptics for interaction polish, and @shopify/flash-list for high-performance lists. Ships and updates through EAS Build, EAS Submit, and EAS OTA updates.

React Native and Expo developers architecting a new app or hardening an existing one who need concrete auth, offline, native-integration, and performance patterns rather than a framework overview. Particularly relevant when choosing between Expo's managed workflow and bare React Native early in a project, since that choice determines how native modules, OTA updates, and store submission are handled for the rest of the app's life.