WhoBuilt

Using React Native in Existing Apps for Faster Cross-Platform Features

Mar 25, 2025· 59 min· 1.1K views·Watch on YouTube

Speakers

Mike, CEO and founder at Callstack, and Bartek, a React Native Builder Bob maintainer, explain how teams can add React Native to existing mobile apps, with production experience from Burak.

React Native’s role in existing apps

Mike explains how JavaScript and React describe shared UI and logic while React Native renders platform-specific components. He says React Native can coexist with Swift and Kotlin, letting teams keep performance-sensitive or sensitive-data features native and add shared features gradually.

Two ways to integrate React Native

Mike outlines a straightforward setup: keep React Native code alongside the native app, install dependencies with npm, configure iOS with CocoaPods, and register components through AppRegistry. He notes that this approach asks native engineers to work with the JavaScript toolchain. Burak presents an advanced option that packages prebuilt React Native code as an XCFramework for iOS and an AAR for Android, with a typed native interface.

Migration and production practices

Mike recommends migrating incrementally, either screen by screen or component by component, and treating a mixed native and React Native app as a valid end state. He suggests starting with lower-risk screens such as FAQ or help, then using telemetry and real user monitoring to compare results. Burak says a client used the approach to replace WebView-based payment flows and reported a better user experience.

Team workflows and adoption

Mike points to Shopify’s migration and Meta’s use of React Native in Marketplace as examples of adoption, while noting Shopify took a top-down approach that started with high-impact screens. In the Q&A, Burak describes a client setup with a React Native repository, a shell app, and CI that published packages through Swift Package Manager and a private Maven repository. The team integrated both full screens and smaller components.

Takeaways

  • Start with a contained screen or component, then expand based on measured results.
  • Keep native code for work that benefits from native performance or handles sensitive data.
  • Prebuilt XCFramework and AAR packages can spare native teams from building React Native themselves.
  • Define a typed interface between native code and React Native to catch incorrect names and arguments at compile time.
  • Plan CI, package distribution, and telemetry as part of the integration, not as follow-up work.

Mentioned in this talk

Search inside this talk

What was claimed 6

Related talks