WhoBuilt

Adding React Native to iOS and Android Apps Has Never Been Easier

May 30, 2025· 1 h 4 min· 2.1K views·Watch on YouTube
#Mobile Development

Speakers

Buraksoftware engineer at Callstack
Miho Kushhawaprincipal engineer at Callstack

Miho Kushhawa, principal engineer at Callstack, and Burak, a software engineer who maintains React Native Builder Bob, explain how to add React Native to existing iOS and Android apps and demonstrate the setup in a webinar.

Why teams choose brownfield development

Brownfield development adds React Native screens or modules to an existing native app. Teams can adopt it gradually, replace web views with native UI, and reuse components across platforms instead of rewriting an entire app. The speakers note that this can help teams share work across web, iOS, and Android, though web developers still need to learn mobile tools and environments.

Where the usual setup gets difficult

The speakers describe common integration hurdles: changing repository structure, adding Node.js and npm, relying on CocoaPods for iOS, and wiring React Native dependencies into native build systems. These steps can tightly couple the native project to React Native upgrades. Their proposed alternative packages the React Native app as an XCFramework for iOS or an AAR for Android, which the host app can consume as a framework or library.

Packaging and loading React Native screens

The setup adds a framework target to the React Native app, builds it, then imports it into the native app. On iOS, the demo uses an XCFramework and a SwiftUI view that loads a registered JavaScript module by name; the speakers describe a similar path for Android with Jetpack Compose. They recommend React Native Enterprise Framework for packaging and React Native Brownfield for runtime helpers, and say the tools work with both the new and old architectures.

A working demo and practical caveats

Burak demonstrates building the framework, starting React Native from a SwiftUI app, and loading the `main` module. In debug mode, the app connects to Metro, and a JavaScript text change appears in the native app and SwiftUI preview. The speakers also flag dependency issues, including React Native Firebase bringing its own native framework, and advise checking for duplicate or missing frameworks.

Adoption advice and team workflow

The speakers say React Native Enterprise Framework and React Native Brownfield complement each other: one handles packaging and setup, while the other helps with communication and runtime behavior. They describe teams developing React Native separately and sharing framework builds, sometimes through Git submodules. For skeptical native developers, they suggest keeping native tooling changes limited and using React Native selectively where it fits.

Takeaways

  • Package React Native as a framework to reduce changes to an existing native app’s repository and dependency setup.
  • Use React Native Enterprise Framework for packaging and React Native Brownfield for runtime integration helpers.
  • Register multiple JavaScript modules by name to load different React Native screens from native code.
  • Check which native frameworks each React Native dependency requires, and avoid bundling the same framework twice.
  • Adopt React Native screen by screen where it fits, rather than making a full rewrite the prerequisite.

Mentioned in this talk

CallstackExpoReact Native BrownfieldBobReact Native Enterprise FrameworkRe.PackReact Native PaperReact Native for visionOSReassurePodsHermes AgentReact Native FirebaseFirebaseReact NativeiOSAndroidJavaScriptReactWebviewsSwift Package ManagerAARXCFrameworkbrownfield development

Search inside this talk

What was claimed 20

Related talks