AI Assisted Migrations to React Native: From Months to Days

Brownfield development adds new capabilities to an existing application. Hur describes two ways to integrate React Native: configure it inside the native app, or package it separately as an iOS XCFramework or Android Archive Library. Teams may face setup complexity, runtime and compiler errors, limited React Native experience, and weeks of work to evaluate a migration.

Hur introduces Brownfield Navigation for showing existing native screens from React Native, Brownie for sharing data between native and React Native code, and a postMessage API for communication such as clearing storage on sign-out. The tooling also supports Expo. Callstack’s Brownfield Skills are designed to help agents initialize React Native, configure builds, and link generated frameworks to native apps.

The proposed migration path is to evaluate React Native, choose one or both platforms, and start with a low-impact screen such as Settings. Teams can then validate the approach and expand to a feature with greater business impact. Hur summarizes the stages as analyze, rewrite, validate, and expand, while emphasizing the need to configure agent skills for React Native quality and performance.

In a Mastodon demo, an agent sets up React Native in the native app and checks that it builds. A requirements analyst then explores the login screen and records screenshots, layout hierarchy, colors, fonts, and spacing in a requirements file. A developer agent rewrites and wires the screen, and a tester checks it against acceptance criteria and produces a QA report.

The demo reveals issues with login navigation and header alignment, which the developer agent fixes after receiving the QA report; the tester then confirms the acceptance criteria pass. Hur says human review remains necessary because agents can make mistakes, and highly customized setups such as Bazel builds may exceed their ability to resolve dependency conflicts. The speakers also describe packaging React Native as standard native artifacts so it can be reused in Flutter applications.