Mobile System
React Native 0.81 + Expo SDK 54 + Next.js code sharing - production mobile architecture
Overview
The 2025 React Native/Expo ecosystem represents a mature, production-ready platform for extending Next.js applications to mobile with 40-50% code sharing between web and native.
- React Native 0.81.3 with New Architecture enabled by default (5.3x faster flows)
- Expo SDK 54 with iOS 26 support, 92% faster builds (120s → 10s)
- 3.57M+ weekly downloads powering Meta, Microsoft, Shopify, Tesla
- 40-50% code reduction sharing business logic with Next.js
- 26% of top 100 business apps built with React Native
System Components
Architecture Stack
- React Native 0.81: New Architecture (Fabric + TurboModules), Hermes engine, React 19.1 support
- Expo SDK 54: Managed workflow, Expo Router 6.0 with API routes, precompiled frameworks
- Next.js 15.5: Web app sharing code via monorepo (apps/web + apps/mobile)
- Monorepo Tool: Nx (complex) or Turborepo (simple) for shared packages
- State Management: Zustand (versatile) or Legend State (performance)
- Styling: NativeWind v4 (Tailwind) or Tamagui (performance)
- Deployment: EAS Build + EAS Update for OTA updates
Monorepo Setup
1. Initialize with Turborepo
# Create monorepo npx create-turbo@latest my-app # Structure: my-app/ ├── apps/ │ ├── web/ # Next.js 15.5.4 │ └── mobile/ # Expo SDK 54 ├── packages/ │ ├── ui/ # Shared React components │ ├── api-client/ # API integration │ ├── types/ # TypeScript types │ └── utils/ # Business logic └── turbo.json # Build pipeline config
2. Create Expo App
cd apps npx create-expo-app mobile --template tabs # Install dependencies cd mobile npx expo install expo-router react-native-reanimated npm install nativewind tailwindcss # Enable New Architecture (expo.json) { "expo": { "newArchEnabled": true, "ios": { "newArchEnabled": true }, "android": { "newArchEnabled": true } } }
3. Shared Package Example
// packages/api-client/src/index.ts export class ApiClient { constructor(private baseUrl: string) {} async getUser(id: string) { const response = await fetch(`${this.baseUrl}/users/${id}`); return response.json(); } } // apps/web/app/page.tsx (Next.js) import { ApiClient } from '@repo/api-client'; // apps/mobile/app/index.tsx (React Native) import { ApiClient } from '@repo/api-client'; // Same code, works on both platforms!
Performance Improvements
Metric | Before (RN 0.74) | After (RN 0.81) | Improvement |
---|---|---|---|
iOS build time | 120s | 10s | 92% faster |
Complete renders | Baseline | New Arch | 1.3x faster |
Complex flows | Baseline | New Arch | 5.3x faster |
Cold start | Baseline | Hermes | 2-3x faster |
Memory usage | Baseline | Hermes | 15-25% less |
Deployment with EAS
EAS Build Configuration
# Install EAS CLI npm install -g eas-cli # Login to Expo eas login # Configure builds (eas.json) { "build": { "development": { "developmentClient": true, "distribution": "internal" }, "preview": { "distribution": "internal", "ios": { "simulator": true } }, "production": { "autoIncrement": true } } } # Build for iOS + Android eas build --platform all
OTA Updates with EAS Update
# Configure updates eas update:configure # Publish update (no app store review needed) eas update --branch production --message "Fix critical bug" # Users get update on next app restart # Average deployment: < 5 minutes vs 2-7 days for app store
Cost Comparison
Tier | Price | Builds/Month | Build Time |
---|---|---|---|
Free | $0 | 30 builds | 8-25 min |
Production | $99/mo | Unlimited | 8-25 min |
Enterprise | $1,999/mo | 1000 credits | Priority queue |
Additional Costs:
- • Apple Developer Program: $99/year
- • Google Play Developer: $25 one-time
- • Alternative CI/CD (GitHub Actions): $0.28 per Android build vs EAS $1.00
What Breaks in Production
Third-party library New Architecture incompatibility
Firebase core libraries, some navigation libraries, and legacy native modules don't support New Architecture.
Fix: Check library compatibility before upgrade. Use interop layer for legacy modules. Consider alternatives (Supabase instead of Firebase). Test thoroughly in development.
Offline support requires third-party solutions
Supabase React Native has no native offline support. Network drops lose real-time connections without recovery.
Fix: Integrate WatermelonDB for offline-first architecture. Use PowerSync for enterprise WAL-based sync. Implement connection recovery logic. Cache critical data locally.
Monorepo Metro bundler path resolution issues
Metro doesn't resolve workspace packages correctly in monorepo by default. Symlinks cause module not found errors.
Fix: Configure Metro watchFolders to include packages directory. Use metro.config.js with nodeModulesPaths. Set up proper package.json exports. Test imports thoroughly.
EAS Build timeout on large projects
Complex monorepos with many dependencies can exceed build time limits. iOS builds timeout after 30 minutes.
Fix: Use build caching with eas.json. Reduce dependency size. Optimize native modules. Consider self-hosted CI/CD for large projects. Use GitHub Actions alternative.
Best Practices
Code Sharing Strategy
- • Share business logic: API clients, data transformations, validation, utilities
- • Share types: TypeScript interfaces, GraphQL types, API schemas
- • Don't share UI: Keep platform-specific components separate (web vs mobile UX differs)
- • 40-50% code reduction: Typical sharing ratio in real projects
- • Use workspace packages: @repo/api-client, @repo/types, @repo/utils
Performance Optimization
- • Enable Hermes engine: 2-3x startup improvement, 15-25% memory reduction
- • Use FlashList v2: 50% better scrolling performance vs FlatList
- • Lazy load screens: Use React.lazy for route-based code splitting
- • Optimize images: Use expo-image with caching, proper dimensions
- • Profile with New Arch Profiler: Find synchronous render bottlenecks
Development Workflow
- • Expo Dev Client: Custom development builds with any native modules
- • React Native DevTools: Browser-aligned debugging with breakpoints
- • EAS Update for testing: Deploy preview builds to testers instantly
- • TypeScript strict mode: Catch errors at compile time
- • Automated testing: Detox for E2E, Jest for unit tests
Key Technology Decisions
Monorepo Tool
Turborepo (Simple)
- ✅ Official React Native + Next.js templates
- ✅ Rust-based performance (40-85% faster)
- ✅ Simpler setup for small/medium projects
- ✅ Watch mode for development
Nx (Complex)
- ✅ Superior React Native/Next.js integration
- ✅ Distributed task execution (50+ machines)
- ✅ Proven scalability (26k+ components)
- ✅ Enterprise features and plugins
Styling Solution
NativeWind v4 (Tailwind)
- ✅ Full Tailwind CSS v4 support
- ✅ 40% faster refresh than v2
- ✅ Familiar if using Tailwind on web
- ✅ CSS variables + container queries
Tamagui (Performance)
- ✅ Within 10% of vanilla RN performance
- ✅ Optimizing compiler
- ✅ Best for animation-heavy apps
- ✅ Built-in design system
State Management
Zustand 4.5 (Versatile)
- ✅ 46.7% usage rate, proven choice
- ✅ 4KB bundle size, minimal overhead
- ✅ Excellent TypeScript support
- ✅ 160ms initial render times
Legend State 3.0 (Performance)
- ✅ Proxy-based reactivity
- ✅ 140ms initial renders, 20ms updates
- ✅ Best performance benchmarks
- ✅ Built-in persistence
How Mobile System Relates to Other Layers
- • Built with Software: React Native, Expo, Next.js, TypeScript in monorepo
- • Extends Solutions: Brings web solutions to iOS/Android with native performance
- • Uses Services: EAS Build ($0-1,999/mo), Supabase mobile SDKs, Apple/Google app stores
- • Requires Support: Monitor crash rates, track performance, manage app store releases