Brownfield Development with React Native

Miho defines brownfield development as extending an existing native app, which means working with its code, systems, and constraints. Greenfield projects start from scratch and allow more choice, but teams must decide their own direction and build the system foundation.

A brownfield project starts with an existing app that needs a new feature. Teams can build that feature in React Native and release it to iOS and Android without stopping the existing product. Miho says this can reduce duplicated development, but successful integration requires knowledge of JavaScript, React Native internals, and native iOS and Android development.

Miho describes packaging a module's JavaScript bundle, assets, React Native runtime, and native bindings into a single artifact: an XCFramework for iOS or a fat AAR for Android. Native teams can consume it through tools such as CocoaPods or Maven and use exposed view controllers, fragments, or views. In one project, packaging reduced build overhead and kept native teams from needing to manage Node.js, Yarn, or Metro.

The library's CLI can build an artifact in CI and publish it to a GitHub release, CocoaPods repository, Maven repository, or JitPack. For development, Miho describes a playground app for working on JavaScript independently, plus a planned debug artifact that can load code from Metro inside the destination native app.

At the time of the episode, the library was under development, and its available legacy version lacked the discussed features. Planned work included a project generator with a playground, a TypeScript or Flow to native type generator, support for integrating with existing React Native apps, over-the-air updates, and a React Navigation navigator.