Even a new React Native app starts from a native template, meaning it already mixes native code with React Native runtime. This section reframes what brownfield means, explaining how React Native apps inherently combine native infrastructure (Xcode, Gradle) with cross-platform code. It sets the foundation for thinking of integration as the norm, not the exception.

This chapter covers the official method for embedding React Native in existing apps using the Community CLI template. While this approach is documented, the guide highlights its friction points:

• Disruptive file structure changes
• Native teams needing to adopt and learn Node.js tooling
• Reintroducing CocoaPods (!sic) in modern iOS setups

It outlines both technical and organizational blockers, like the overhead of running JS bundlers and the coordination burden on native developers unfamiliar with the RN toolchain.

It’s time to introduce two complementary solutions:

• Packaging Approach: Bundles RN UI and Hermes bytecode as a native library (XCFramework or AAR), turning React Native into a drop-in dependency.
• React Native Brownfield library: Provides runtime helpers to load React Native views seamlessly and reuse instances across components.

Together, they reduce integration complexity and allow native and React Native teams to work independently within any kind of code setup: monorepos or separate repos. This chapter explains why these tools simplify setup and long-term maintainability across iOS and Android.

A detailed, step-by-step guide to integrating the React Native package into an iOS app:

• Creating a new framework target in Xcode
• Configuring CocoaPods for the RN framework (when not using React Native Enterprise Framework)
• Setting build flags and script phases to generate JS bundles
• Building an XCFramework and importing it into the native app
• Using ReactBrownfieldRootViewManager to instantiate and render RN views in Swift (UIKit or SwiftUI)

This chapter is practical and code-heavy, meaning it’s great for iOS engineers who want to see exactly how it’s done.

The Android counterpart to the iOS walkthrough, this section:

• Sets up a new Android library module in an React Native project
• Uses Callstack’s brownfield-gradle-plugin to generate a Fat-AAR with all dependencies
• Registers React Native views and lifecycle in Kotlin via ReactNativeHostManager and RNViewFactory
• Walks through Maven publishing for local consumption
• Shows how to load React Native views in a fragment, launched from a button in the main activity

It also shows how to wire up lifecycle events and use the AAR in production-ready apps without changing existing native architecture.