Skip to main content

Separate iOS and Android to React Native Blueprint

Consolidate separate Swift and Kotlin apps into one React Native (TypeScript) codebase, embedding RN brownfield and migrating screens behind feature flags, with native modules for platform-specific SDKs.

From
Native Mobile
To
React Native
Difficulty
Advanced
Duration
28 weeks
Team Size
medium

What and Why

Maintaining two native apps (Swift/SwiftUI for iOS, Kotlin/Jetpack Compose for Android) doubles feature work and creates platform drift. React Native lets one TypeScript/React codebase target both platforms with near-native UI, while still allowing native modules for platform-specific capabilities. The goal is shared business logic and UI with native escape hatches, not 100% code sharing at any cost.

Phases

Assessment. Inventory screens, native SDK usage (camera, push, payments, Bluetooth), and platform-specific behavior. Decide a brownfield (embed RN into existing apps) versus greenfield strategy. Evaluate the New Architecture (Fabric/TurboModules) for performance-critical paths.

Foundation. Scaffold the React Native app (or Expo), set up navigation (React Navigation), state management, a typed API client, and a shared component library mirroring the design system. Establish CI for both platforms (Fastlane, EAS).

Screen migration. Migrate flows incrementally. In brownfield mode, embed RN views inside the existing native apps and replace screens one at a time behind feature flags, keeping native screens until ported.

Native bridging. Wrap remaining native SDKs as TurboModules/native modules. Reuse existing Swift/Kotlin where rewriting is risky. Ensure parity for push notifications, deep links, and biometrics.

Cutover. Once all flows are RN, retire native screens, simplify the native shells, and ship a unified release pipeline.

Key Risks and Mitigations

  • Performance on heavy lists/animations: Use FlatList tuning, Reanimated, and the New Architecture; profile early.
  • Skills gap: Native engineers must learn React; pair them with web React developers.
  • Platform parity: Test on real devices for both platforms; some native behaviors differ subtly.

Recommended Tooling

React Native (New Architecture), TypeScript, React Navigation, Reanimated, Fastlane/EAS for builds, Detox or Maestro for end-to-end mobile tests, and feature flags for incremental rollout.

Success Metrics

Faster cross-platform feature lead time, improved team efficiency, maintained or improved crash-free session rate, and reduced duplicate code.

Prerequisites

A design system, mobile CI/CD, app store credentials, and an honest assessment of which native modules must be preserved.