Developing an Android Brownfield App With React Native in an Easy Way

Authors

Piotr Drapich

Software Engineer

Callstack

Let's start with answering the question: what is a brownfield application?

The term "brownfield" implies something built with already existing elements. Originally used in urban planning to describe areas that can be repurposed, it was later adopted in mobile app development. A brownfield app is basically an app which is not built from scratch.

What does it mean in practice? It means that we want to run a React Native application as a part of a native app that is already developed with technologies like Java or Kotlin. In other words, we want to integrate React Native in an existing app.

How does it work?

Let’s assume that we have a native Android application where we want to create a new screen using a React Native app that is already implemented. That screen will navigate to another screen inside the React Native application.

Video showing example app without react-native-brownfield

In order to make it work, we need to do a few things.

Add React Native to the project

First of all, we need to add an entry for the local React Native maven directory to the project's <rte-code>build.gradle<rte-code>. Let's add it to the all projects' block, above other maven repositories

  
          allprojects {
        
              repositories {
        
                  maven {
        
                      // All of React Native (JS, Android binaries) is installed from npm
        
                      url "$rootDir/../node_modules/react-native/android"
        
                  }
        
              }
        
          }

view raw gistfile1.txt hosted with ❤ by GitHub

Add react-native from <rte-code>node_modules<rte-code> (thanks to change from the previous point) as a dependency to app's <rte-code>build.gradle<rte-code>

  
          dependencies {
        
            implementation 'com.android.support:appcompat-v7:27.1.1'
        
            implementation "com.facebook.react:react-native:+"
        
          }

view raw gistfile1.txt hosted with ❤ by GitHub

Add autolinking command to at the end of app's <rte-code>build.gradle<rte-code>

  
          apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
        
          applyNativeModulesAppBuildGradle(project, "../")

view raw gistfile1.txt hosted with ❤ by GitHub

Run a React Native app

In order to run our React Native app we are going to:

Create an Activity that implements <rte-code>DefaultHardwareBackBtnHandler<rte-code> interface and uses <rte-code>Theme.AppCompat.Light.NoActionBar<rte-code> theme because some React Native UI components rely on it

  
          public class ReactNativeActivity extends Activity implements DefaultHardwareBackBtnHandler { 
        
            private ReactRootView mReactRootView;
        
            private ReactInstanceManager mReactInstanceManager;
        
            @Override
        
            protected void onCreate(Bundle savedInstanceState) {
        
              super.onCreate(savedInstanceState);
        
            }
        
            @Override
        
            public void invokeDefaultOnBackPressed() {
        
              super.onBackPressed();
        
            }
        
          }

view raw gistfile1.txt hosted with ❤ by GitHub

  
          <activity
        
            android:name=".ReactNativeActivity"
        
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"
        
          />

view raw gistfile1.txt hosted with ❤ by GitHub

Create <rte-code>ReactRootView<rte-code> instance inside onCreate method

mReactRootView = new ReactRootView(this);

view raw gistfile1.txt hosted with ❤ by GitHub

Create <rte-code>ReactInstanceManager<rte-code> instance with needed parameters

  
          mReactInstanceManager = ReactInstanceManager.builder()
        
            .setCurrentActivity(this)
        
            .setApplication(getApplication())
        
            .setBundleAssetName("index.android.bundle")
        
            .setJSMainModulePath("index")
        
            .build();

view raw gistfile1.txt hosted with ❤ by GitHub

Start react-native application within created root view using <rte-code>startReactApplication<rte-code> method where the second parameter is the same string as in <rte-code>AppRegistry.registerComponent()<rte-code> in index.js file

  
          mReactRootView.startReactApplication(mReactInstanceManager, "MainComponent", null);

view raw gistfile1.txt hosted with ❤ by GitHub

Set react-native root view as activity content view

setContentView(mReactRootView);

view raw gistfile1.txt hosted with ❤ by GitHub

Now we are able to run our react-native app by starting <rte-code>ReactNativeActivity<rte-code> but we need still add some code to get all things to work. :)

Pass activity lifecycle callbacks to the <rte-code>ReactInstanceManager<rte-code> and <rte-code>ReactRootView<rte-code>

  
          @Override
        
          protected void onPause() {
        
            super.onPause();
        
            if (mReactInstanceManager != null) {
        
              mReactInstanceManager.onHostPause(this);
        
            }
        
          }
        
          @Override
        
          protected void onResume() {
        
            super.onResume();
        
            if (mReactInstanceManager != null) {
        
              mReactInstanceManager.onHostResume(this, this);
        
            }
        
          }
        
          @Override
        
          protected void onDestroy() {
        
            super.onDestroy();
        
            if (mReactInstanceManager != null) {
        
              mReactInstanceManager.onHostDestroy(this);
        
            }
        
            if (mReactRootView != null) {
        
              mReactRootView.unmountReactApplication();
        
            }
        
          }

view raw gistfile1.txt hosted with ❤ by GitHub

Pass the back button events to avoid closing <rte-code>ReactNativeActivity<rte-code> when hardware back button is pressed and support hardware back button on JS side

  
          @Override
        
           public void onBackPressed() {
        
            if (mReactInstanceManager != null) {
        
              mReactInstanceManager.onBackPressed();
        
            } else {
        
              super.onBackPressed();
        
            }
        
          }

view raw gistfile1.txt hosted with ❤ by GitHub

Even with this change we don't have a mechanism to back to native screen w/o using hardware back button. This issue could be solved by react-native native module which will expose the method to JS that will finish <rte-code>ReactNativeActivity<rte-code>.

Additional points

In debug mode, we need packager to serve JS bundle. To make it possible we need internet permissions. Add the following line to the <rte-code>AndroidManifest.xml<rte-code> file

<uses-permission android:name="android.permission.INTERNET" />

view raw gistfile1.txt hosted with ❤ by GitHub

Starting with Android 9 (API level 28), cleartext traffic is disabled by default. This prevents your application from connecting to the React Native packager. To solve this we need to add <rte-code>usesCleartextTraffic<rte-code> option to your Debug <rte-code>AndroidManifest.xml<rte-code>

<uses-permission android:name="android.permission.INTERNET" />

view raw gistfile1.txt hosted with ❤ by GitHub

To enable Dev Menu in react-native app add <rte-code>DevSettingsActivity<rte-code> to <rte-code>AndroidManifest.xml<rte-code>

view raw gistfile1.txt hosted with ❤ by GitHub

All of the additional points are required only for debug builds where we reload JS code from the development server, so you can strip this in release builds.

I think that all of those steps above are repeated in almost all react-native brownfield android app. But can't it be done a bit simpler? Do we really need care about passing onPause, onDestroyetc?

Of course, it might be easier. :) We can use react-native-brownfield package which will help us with navigation's issues and provide a nice API to run a react-native application.

How does it work with React Native brownfield?

We want to achieve exactly the same effect as before but we will use react-native-brownfield library:

Video showing example app with react-native-brownfield

Adding React Native to the project

The theory is the same as I described in the previous part of this article but with some facilities. In order to run our react-native app in native one using react-native-brownfield we need to add that package as a dependency to <rte-code>package.json<rte-code> using:

npm install @callstack/react-native-brownfield

view raw gistfile1.txt hosted with ❤ by GitHub

yarn add @callstack/react-native-brownfield

view raw gistfile1.txt hosted with ❤ by GitHub

Next, we need to add react-native app as we did in Add react-native to project point.

Additional steps

All additional steps are needed to be added here as well and only for debug builds.

Running a React Native app

And now the fun begins. :) Instead of creating a root view and instance manager by ourselves we can simply use <rte-code>ReactNativeBrownfield<rte-code> package. Since autolinking script to <rte-code>build.gradle<rte-code> and <rte-code>react-native-brownfield<rte-code> are added we can use that package without additional effort.

Add <rte-code>ReactNativeActivity<rte-code> to <rte-code>AndroidManifest.xml file<rte-code>

  
          <activity android:name="com.callstack.reactnativebrownfield.ReactNativeActivity"/>

view raw gistfile1.txt hosted with ❤ by GitHub

Initialize react-native app with context as a first parameter (this in the snippet below)

  
          List<ReactPackage> packages = new PackageList(getApplication()).getPackages();
        
          HashMap<String, Object> options = new HashMap<>();
        
          options.put("packages", packages);
        
          options.put("mainModuleName", "example/index");
        
          ReactNativeBrownfield.initialize(this, options);

view raw gistfile1.txt hosted with ❤ by GitHub

Start react-native app

  
          ReactNativeBrownfield.getShared().startReactNative(init -> {
        
              Log.d("RN", "react-native app has started :)");
        
          });

view raw gistfile1.txt hosted with ❤ by GitHub

Create <rte-code>ReactNativeActivity<rte-code> Intent with context and <rte-code>moduleNam<rte-code>e as parameters and star activity

  
          Intent intent = ReactNativeActivity.createReactActivityIntent(
        
            this,
        
            "MainComponent"
        
          );
        
          startActivity(intent);

view raw gistfile1.txt hosted with ❤ by GitHub

And voilà! We are ready to go. :) We don't have to worry about passing activity lifecycles, back button events or native module that enable to back from react-native to native screen. All of those things are handled by react-native-brownfield package.

Conclusion

Lastly, it is a popular thing to use react-native within existing native apps especially by larger organizations that have multiple teams working on the same app for multiple platforms. Thanks to <rte-code>react-native-brownfield<rte-code> the integration is easier, enjoyable and some issues that exist in every <rte-code>react-native brownfield<rte-code> app are solved.

Working examples of using React Native brownfield are inside an example directory.

As part of The React Native Show, we released a podcast fully dedicated to future of Brownfield Development with React Native.

Adding React Native to existing apps?

We help teams introduce React Native into brownfield projects effectively.

Let’s chat

Insights

Learn more about Brownfield

View all

Aug 27Article

React Native in .NET MAUI: A Practical Brownfield Integration Guide

Learn how to embed React Native inside a .NET MAUI app with a brownfield setup. This guide covers runtime packaging, lifecycle wiring, navigation, and shared state across both runtimes.

Aug 3Article

Migration to React Native in 2026 Starts With a Delivery Question

Choosing between brownfield and greenfield React Native migration? Learn where risk sits, when to use a checkpoint, and what to prove before committing.

Jul 8Article

How we made Hybrid iOS apps compile 39% faster with React Native Brownfield

See how React Native Brownfield uses iOS prebuilts to cut packaging times by up to 39% for hybrid apps, with details on setup, internals, and benchmark results.

Jun 18Article

How We Made the Brownfield Gradle Plugin 22% Faster

See how task-driven Gradle optimization made the Brownfield Gradle Plugin 22% faster for clean Android release builds.

Jun 3Article

AI-Supported Brownfield Migration to React Native

See how AI-supported workflows cut brownfield React Native evaluation from weeks to days by speeding up setup, planning, implementation, and QA.

May 18Article

Unlocking Expo Updates in an Isolated Brownfield Architecture with SDK 55

Learn how to enable Expo Updates in an Isolated Brownfield setup with Expo SDK 55, including iOS packaging, Android patching, and OTA testing.

Apr 23Talk

State of Brownfield in React Native

A practical look at Brownfield React Native adoption in mature native apps, architecture, tooling, and real-world tradeoffs.

Apr 2Webinar

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

Reduce migration time from months to days by using AI in real React Native workflows. Learn when to migrate incrementally and when starting fresh is the better option.

Nov 17Talk

Vega Developer Meetup

Learn how to integrate React Native into Android TV apps at the Vega Developer Meetup. Workshop, roadmap, and community talks, live in Munich.

May 16Podcast

You Don’t Need a Rewrite, You Need React Native Brownfield

Discover how modern React Native Brownfield integration enables cross-platform power in native apps, without rewriting from scratch.

Jan 13Podcast

Lessons from Shopify's Migration to React Native with Mustafa Ali

Learn how Shopify's migration to React Native led to 86% code unification, reduced build times, and seamless feature parity across platforms.

Jun 14Podcast

Migration to React Native

The 13th episode of React Universe On Air (formerly known as The React Native Show) is fully focused on migrating from different technologies to React Native, the two most popular approaches to this process (greenfield and brownfield software development), and our state-of-the-art brownfield approach.

Mar 19Tutorial

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Learn how React Native AI uses a unified provider model to switch between cloud and on-device LLMs without rewriting application logic, enabling reliable AI experiences online and offline.

Mar 12Tutorial

Build Smarter Apps: Tool Calling & AI Orchestration Explained

Learn how on-device models in React Native can call tools, interact with external APIs, and return structured outputs you can use directly in application logic.

Mar 5Tutorial

MLC LLM + React Native: On-Device AI Without the Pain

Learn how to run third-party on-device LLMs in React Native using MLC LLM. Choose your models, run them efficiently across platforms, and keep a unified JavaScript API with React Native AI.

Feb 24Tutorial

Intelligent Fallbacks with Apple Intelligence in React Native

Learn how to use Apple’s built-in Foundation Models in React Native apps, reduce memory usage, and enable fast, fully on-device AI with React Native AI Apple.

Feb 10Tutorial

What Is the React Native AI SDK? A Complete Intro & Quickstart

Learn why on-device AI matters for React Native apps, how local LLMs behave offline, and what problems React Native AI is designed to solve from day one.

Jan 29Tutorial

Implementing an Android TurboModule with Kotlin

Learn how to implement a React Native TurboModule on Android, from the TypeScript spec and Codegen to the Kotlin implementation and package registration.

Jan 19Tutorial

Working with Different Threads in Swift TurboModules

Learn how JavaScript, native module, background, and main threads interact in React Native TurboModules, and how to use GCD queues to run async work safely in Swift.

Jan 9Tutorial

How to Add Type-Safe Constants to Swift TurboModules

Learn how to expose typed, immutable constants from a Swift TurboModule using Codegen, and get full end-to-end type safety between native and JavaScript.

Dec 30Tutorial

Adding Event Emitters to Your TurboModule in Swift

Learn how to emit native events from a Swift TurboModule and subscribe to them in JavaScript, including proper memory management and Codegen integration.

Writing a Swift TurboModule in React Native

Dec 22Tutorial

Writing Your First TurboModule in Swift

Learn how to build a fully working TurboModule in Swift, integrate it with Codegen, and bridge it through Objective‑C inside an Expo app.

	allprojects {
	repositories {
	maven {
	// All of React Native (JS, Android binaries) is installed from npm
	url "$rootDir/../node_modules/react-native/android"
	}
	}
	}

	dependencies {
	implementation 'com.android.support:appcompat-v7:27.1.1'
	implementation "com.facebook.react:react-native:+"
	}

	apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
	applyNativeModulesAppBuildGradle(project, "../")

	public class ReactNativeActivity extends Activity implements DefaultHardwareBackBtnHandler {
	private ReactRootView mReactRootView;
	private ReactInstanceManager mReactInstanceManager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	}
	@Override
	public void invokeDefaultOnBackPressed() {
	super.onBackPressed();
	}
	}

	<activity
	android:name=".ReactNativeActivity"
	android:theme="@style/Theme.AppCompat.Light.NoActionBar"
	/>

	mReactInstanceManager = ReactInstanceManager.builder()
	.setCurrentActivity(this)
	.setApplication(getApplication())
	.setBundleAssetName("index.android.bundle")
	.setJSMainModulePath("index")
	.build();

	mReactRootView.startReactApplication(mReactInstanceManager, "MainComponent", null);

	@Override
	protected void onPause() {
	super.onPause();
	if (mReactInstanceManager != null) {
	mReactInstanceManager.onHostPause(this);
	}
	}

	@Override
	protected void onResume() {
	super.onResume();
	if (mReactInstanceManager != null) {
	mReactInstanceManager.onHostResume(this, this);
	}
	}

	@Override
	protected void onDestroy() {
	super.onDestroy();
	if (mReactInstanceManager != null) {
	mReactInstanceManager.onHostDestroy(this);
	}
	if (mReactRootView != null) {
	mReactRootView.unmountReactApplication();
	}
	}

	@Override
	public void onBackPressed() {
	if (mReactInstanceManager != null) {
	mReactInstanceManager.onBackPressed();
	} else {
	super.onBackPressed();
	}
	}

	List<ReactPackage> packages = new PackageList(getApplication()).getPackages();
	HashMap<String, Object> options = new HashMap<>();
	options.put("packages", packages);
	options.put("mainModuleName", "example/index");

	ReactNativeBrownfield.initialize(this, options);

	ReactNativeBrownfield.getShared().startReactNative(init -> {
	Log.d("RN", "react-native app has started :)");
	});

	Intent intent = ReactNativeActivity.createReactActivityIntent(
	this,
	"MainComponent"
	);
	startActivity(intent);

How does it work?

Add React Native to the project

Run a React Native app

Additional points

How does it work with React Native brownfield?

Adding React Native to the project

Additional steps

Running a React Native app

Conclusion

Execute complex migrations fast and with confidence.

Migration to React Native

Migration to Self-Hosted Infrastructure

Migration to Modular Architecture

Migration to Expo

Migration to Next.js

Migration to New Architecture

React Native Upgrades

UX Modernization

Tech Debt Reduction

Learn more about Brownfield

React Native in .NET MAUI: A Practical Brownfield Integration Guide

Migration to React Native in 2026 Starts With a Delivery Question

How we made Hybrid iOS apps compile 39% faster with React Native Brownfield

How We Made the Brownfield Gradle Plugin 22% Faster

AI-Supported Brownfield Migration to React Native

Unlocking Expo Updates in an Isolated Brownfield Architecture with SDK 55

State of Brownfield in React Native

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

Vega Developer Meetup

You Don’t Need a Rewrite, You Need React Native Brownfield

Lessons from Shopify's Migration to React Native with Mustafa Ali

Migration to React Native

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Build Smarter Apps: Tool Calling & AI Orchestration Explained

MLC LLM + React Native: On-Device AI Without the Pain

Intelligent Fallbacks with Apple Intelligence in React Native

What Is the React Native AI SDK? A Complete Intro & Quickstart

Implementing an Android TurboModule with Kotlin

Working with Different Threads in Swift TurboModules

How to Add Type-Safe Constants to Swift TurboModules

Adding Event Emitters to Your TurboModule in Swift

Writing Your First TurboModule in Swift