Avolve

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 16 Beta: 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 16 Beta.5
│   └── 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

MetricBefore (RN 0.74)After (RN 0.81)Improvement
iOS build time120s10s92% faster
Complete rendersBaselineNew Arch1.3x faster
Complex flowsBaselineNew Arch5.3x faster
Cold startBaselineHermes2-3x faster
Memory usageBaselineHermes15-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

TierPriceBuilds/MonthBuild Time
Free$030 builds8-25 min
Production$99/moUnlimited8-25 min
Enterprise$1,999/mo1000 creditsPriority 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