Logo
OFFLINEPIXEL
Native iOS (Swift) + Android (Kotlin) → React Native / Flutter

Native to Cross-Platform App Development

A guide to migrating native iOS and Android apps to cross-platform frameworks (React Native, Flutter, Tauri).

Native iOS (Swift) + Android (Kotlin) → React Native / Flutter Strangler MEDIUM Difficulty

Native to Cross-Platform App Development

A guide to migrating native iOS and Android apps to cross-platform frameworks (React Native, Flutter, Tauri).

Estimated Timeline6-9 months
Primary Roleapp-developer

Executive Summary

A consumer app maintained separate iOS (Swift) and Android (Kotlin) codebases—2x engineering cost and 4-week feature parity lag. Over 7 months, they migrated to React Native using a module-by-module approach, reducing development cost by 60% and eliminating platform feature lag. This guide covers module extraction, platform-specific code handling, and performance optimization.

✓Migrate one screen/module at a time (hybrid app)
✓Platform-specific code (camera, biometrics) requires native modules
✓UI should be completely rewritten (not reused)
✓Business logic can be shared (80% code reuse)

Why Migrate from Native to Cross-Platform

The company maintained two codebases (iOS and Android), doubling engineering costs. Features took 4 weeks to reach parity across platforms, frustrating users.

  • → 2x engineering cost ($1M/year for two teams)
  • → 4-week feature parity lag (iOS always first, Android second)
  • → Inconsistent UX across platforms
  • → Harder to hire native mobile developers (scarce)

Cross-Platform Migration Readiness

The team spent 2 months preparing: evaluating frameworks (React Native vs Flutter), setting up hybrid architecture, and training iOS/Android developers on React Native.

  • • Framework evaluation (React Native vs Flutter)
  • • Hybrid app architecture (native + cross-platform together)
  • • Cross-platform training for 10 mobile developers (4 weeks)
  • • Module extraction plan (priority order)
  • • CI/CD for both platforms

Native Apps Assessment

iOS app had 50K lines Swift, Android 50K Kotlin. The biggest differences were UI (SwiftUI vs Jetpack Compose) and platform-specific APIs (Face ID vs Fingerprint).

Technical Debt

  • • Duplicated business logic (2x maintenance)
  • • Inconsistent UI (navigation, gestures)
  • • Platform-specific bugs (each platform different)
  • • 4-week feature parity lag

Risks

  • • Performance degradation (cross-platform vs native)
  • • Platform-specific API gaps (camera, biometrics)
  • • Developer resistance (learning new framework)
  • • App size increase (RN adds 10MB)

Target Cross-Platform Architecture

The target was React Native with native modules for platform-specific APIs.

React Native core (shared business logic, UI)Native modules (camera, biometrics, payments)Platform-specific UI overrides (iOS vs Android design patterns)Shared state management (Redux Toolkit)TypeScript for type safety

7-Month Native to Cross-Platform Migration

  1. Step 1: Phase 1: Foundation (Month 1-2)

    Set up hybrid app, React Native training, migrated settings screen (simple).

  2. Step 2: Phase 2: UI Screens (Month 3-4)

    Migrated 10 UI screens (80% UI of app).

  3. Step 3: Phase 3: Business Logic (Month 5-6)

    Migrated API clients, storage, and shared logic.

  4. Step 4: Phase 4: Native Module Replacement (Month 7)

    Replaced custom native modules with React Native libraries.

Local Data Migration

Both apps used SQLite for local storage. Migrated to WatermelonDB (cross-platform).

  • • Schema compatibility (SQLite → WatermelonDB)
  • • Data migration on first launch (detect old format)
  • • Dual writes during transition period (both systems)
  • • User data integrity (no loss during migration)

Common Native to Cross-Platform Mistakes

Expecting 100% code reuse

Impact: UI differences require platform-specific code (20% not reusable)

Prevention: Accept 80% reuse, plan for platform-specific overrides

Migrating complex UI first

Impact: 3-month delay, team frustrated

Prevention: Start with simple screens (settings, profile)

No performance testing on low-end devices

Impact: React Native slower on Android 8 (janky scrolling)

Prevention: Test on 5 year old device, optimize lists (FlatList)

Ignoring platform design patterns

Impact: iOS-looking app on Android (users dislike)

Prevention: Platform-specific UI overrides (navigation, gestures)

Migration Success Metrics

✓Engineering cost: $1M/year → $400k/year (60% reduction)
✓Platform feature lag: 4 weeks → 0 days (100% elimination)
✓Code reuse: 0% → 80%
✓Developer satisfaction: 3.1/5 → 4.6/5

Who Should Lead Native to Cross-Platform Migration

Recommended Roles

Lead Mobile Architect (8+ years)React Native Engineer (3+ years)iOS/Android Developers (training transition)

Required Experience

  • • Deep experience in iOS (Swift) and Android (Kotlin)
  • • 2+ years React Native or Flutter
  • • Native module development
  • • Performance optimization on low-end devices

Related Roles

App Developer React Native Developer Mobile Engineer

Frequently Asked Questions

React Native vs Flutter—which is better?
React Native for JavaScript ecosystem (easier hiring). Flutter for better performance and consistent UI. Evaluate with your team skills.
Can we reuse existing UI code?
No—UI must be rewritten in React Native/Flutter. Business logic (API, storage) can be reused.
What about platform-specific features like Widgets?
Build native modules for platform-specific features (iOS widgets, Android home screen widgets).