AI-Assisted Migrations to React Native: From Months to Days

This session focuses on how AI-assisted migrations can support brownfield adoption in React Native. The discussion starts by defining brownfield as building on top of existing structures and systems rather than starting from scratch. In engineering terms, that means adding something new to an existing application instead of treating it as a greenfield project.

The speakers introduce the topic through the lens of React Native adoption inside native apps and explain why this matters for teams working with existing products rather than new builds.

Two ways to do brownfield with React Native

The session then explains two main approaches to brownfield implementation. The first is the integrated approach, where React Native and its configuration are added directly into the native app. This means bringing in the JavaScript ecosystem, Node.js tooling, executable configuration, and build configuration as part of the native application itself.

The second is the framework-based approach. In this model, React Native UI and configuration are built into standard native artifacts such as a framework or Android archive library. The speakers describe this as a more familiar setup for native developers because it keeps React Native more isolated from the host application and avoids embedding React Native configuration directly into the native codebase.

What makes adoption challenging for native teams

Although brownfield can sound straightforward at first, the session outlines several challenges teams face when adopting React Native. These include setup complexity, runtime and compiler errors, lack of React and React Native knowledge, and the time required to prepare a proper proof of concept or validation.

The speakers also highlight the organizational side of adoption. Teams often need to compare UI and performance, validate whether React Native is the right fit, and convince the business without investing too much time or effort before the decision is de-risked.

From around a week to a few hours

One of the key points in the discussion is the timeline for introducing a minimal React Native UI into a native application. The speakers say that from their experience it usually takes around a week, although it can take longer for teams that are not familiar with brownfield and React Native internals or complex applications.

They then position AI-assisted migrations as a way to reduce that work to a matter of a few hours for each platform, setting up the rest of the session around how that reduction becomes possible.

What is new in the brownfield area

The webinar also covers what is new in the brownfield space. One update is brownfield-navigation, a package that allows existing native screens to be presented from React Native. This is framed as important for incremental migration, especially when some screens remain native while new work is done in React Native.

Another update is Brownie, which is presented as a way to share a single piece of data between native and React Native. The speakers describe it as useful when existing native applications already hold data that new React Native screens need to consume.

The session also introduces brownfield skills, described as a set of skills gathered from Callstack’s brownfield experience for agentic development. Other updates mentioned include support for a post message API in the React Native brownfield package and Expo support across the tooling.

What AI-assisted migration means in practice

The speakers break AI-assisted migration into four core parts. First, the agent sets up the brownfield environment in a native application. Second, it gathers context such as layout, tokens, and hierarchy and outputs that into a requirements file. Third, it rewrites screens based on those requirements. Fourth, it verifies that the new UI matches the requirements.

This structure frames AI assistance not as a single action, but as a sequence of setup, analysis, implementation, and verification steps.

What brownfield skills are meant to do

Brownfield skills are described as agent skills that can reduce proof-of-concept evaluation timelines from weeks to a few hours for each platform. The speakers explain that these skills can prepare a full brownfield setup for Android and iOS, generate XCFrameworks and Android archive libraries from Expo or React Native applications, and link those outputs to native apps.

They also say the skills support both bare React Native and Expo, and summarize their scope as covering React Native initialization, UI presentation, framework generation, linking, and build configuration.

How teams can approach migration patterns

The webinar then moves into migration patterns. The suggested flow begins with evaluating whether React Native is a possibility for the application. After that, teams choose a path, such as starting with Android first or both platforms in parallel, and then build a proof of concept using a low-impact screen like settings or preferences.

That low-impact screen helps establish confidence before expanding into screens or features with greater business impact. The speakers summarize the broader migration pattern in four steps: analyze, rewrite, validate, and expand.

Common use cases AI-assisted migration can help with

Several common patterns are highlighted. One is end-to-end brownfield setup, where the AI system scaffolds the brownfield environment, links it to the native application, and verifies that both sides build successfully.

Another is rewriting native screens into React Native with near-complete accuracy. The session also covers data sharing between native and React Native, presenting existing native screens from React Native, validating implementations against requirements, handling communication between the two sides, and resolving some dependency issues in simpler setups.

Where AI still has limits

The speakers also make clear what AI-assisted migration cannot fully solve. They stress that agents are not completely trustworthy on their own in brownfield environments because there is too much at stake if something goes wrong. Human intervention is still required to validate the work the system produces.

They also point out that while AI can help with dependency conflicts in simpler setups, more advanced or customized environments can go beyond what the agent can reliably resolve.

How the agentic workflow is structured

The webinar’s most detailed section walks through the agentic workflow. The process is divided into five steps, beginning with brownfield setup. In this phase, the agent uses brownfield skills to scaffold the required framework or library, apply build configuration, link the result to the native app, run a build, and verify that React Native can initialize and present UI correctly.

This serves as the foundation for everything that follows in the workflow.

Using an agent to analyze requirements

The next stage is requirement analysis. Here, the agent interacts with an existing feature, gathers context such as snapshots, layout hierarchy, colors, fonts, and tokens, and writes that into a requirements.md file under a dedicated migration folder.

The speakers demonstrate this on the login screen of the Mastodon iOS application, showing how the agent interacts with elements, records information, and prepares a structured requirements file for the next step.

Using an agent to rewrite the feature in React Native

After requirements are gathered, another subagent rewrites the feature in React Native using the generated requirements file. According to the session, this subagent uses brownfield skills, React and React Native best practices, testing, and other supporting skills to produce the implementation and wire it into the native application.

The demo focuses on the login screen and shows the agent writing React Native code and native-side wiring so the React Native screen can be presented instead of the original native one.

Testing, QA reporting, and the feedback loop

Once the UI is rewritten, a tester subagent verifies the implementation against the requirements file. It uses agent device tooling to interact with the app, check acceptance criteria, and produce a QA report. The process also records snapshots so teams can see what was actually tested.

When bugs are found, the workflow moves into a feedback loop between the developer and tester. The developer fixes the issues, verifies the build again, and the tester reruns validation until the work is ready for QA sign-off.

What the demo revealed about human review

The login screen example shows why human review still matters. One reported bug involved navigation behavior after tapping the login button, and another involved the “Welcome back” header not matching the expected placement. These issues were then addressed by updating the implementation and rerunning the tester.

The speakers use this to underline that agentic migration works best with human oversight, especially while the subagents are still under development.

‍

Watch the full session to see how AI-assisted migrations work step by step, from setup and requirement analysis to implementation, testing, and iteration, and explore how these workflows can be applied to your own brownfield projects.