# How to Set Up Android Studio React Native Integration: A Complete Developer Guide

> Master Android Studio React Native integration for mobile development. Learn how to seamlessly set up and manage your projects to build powerful cross-platform apps.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Android Studio React Native integration works by opening the `android/` Gradle module in Android Studio while Metro bundles the `react-native-renderer` (located in [`packages/react-native-renderer/src/ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js)) to bridge JavaScript components with native Android views via the `UIManager`.**

Setting up Android Studio React Native integration requires understanding how the React repository's renderer architecture translates JavaScript code into native Android UI components. In the `facebook/react` monorepo, the `packages/react-native-renderer` directory contains the core bridge that connects React's reconciliation algorithm to Android's view hierarchy through Android Studio's Gradle build system.

## Understanding the React Native Renderer Architecture

The React Native renderer serves as the translation layer between React's fiber-based reconciliation and Android's native UI toolkit. According to the source code in `facebook/react`, this integration relies on several critical files:

- **[`packages/react-native-renderer/src/ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js)** – The entry point that creates the root container, batches updates via `batchedUpdates`, and exposes `render` and `unmountComponentAtNode` methods to mount React trees into native view hierarchies.

- **[`packages/react-native-renderer/src/ReactFiberConfigNative.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactFiberConfigNative.js)** – The host configuration that instructs React's reconciler how to create, update, and delete native views. It implements platform-specific operations like `createInstance`, `appendChild`, and `finalizeInitialChildren` that map directly to Android `ViewGroup` operations.

- **[`packages/react-native-renderer/src/ReactNativeTypes.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeTypes.js)** – Type definitions declaring the renderer's public API surface, including `render`, `unmountComponentAtNode`, and `createPortal` signatures used when type-checking against the core React codebase.

- **[`scripts/rollup/packaging.js`](https://github.com/facebook/react/blob/main/scripts/rollup/packaging.js)** – The build script that packages the renderer into `build/react-native/implementations`, producing the bundle that Metro serves to Android Studio builds.

When Android Studio compiles your project, the `react-native` Gradle plugin (applied in `android/app/build.gradle` via `apply from: "../../node_modules/react-native/react.gradle"`) links these JavaScript renderer files with the native C++ React Native libraries.

## Step-by-Step Android Studio React Native Setup

### Initializing the Project Structure

Begin by generating a React Native project using the official CLI. This creates the dual-platform structure where Android Studio manages the native Android layer while Metro handles the JavaScript bundling.

```bash
npx react-native@latest init AwesomeApp
cd AwesomeApp

```

This command scaffolds the `android/` directory containing the Gradle project files that Android Studio will open directly.

### Configuring the Android Gradle Module

Open the `android/` folder in Android Studio as an existing project. Do not open the root project folder; Android Studio must load the Gradle configuration specifically from the `android/` subdirectory to recognize the React Native plugin integration.

Key files Android Studio will index:

1. **`android/app/build.gradle`** – Applies the React Native Gradle plugin and configures SDK versions. The critical line `apply from: "../../node_modules/react-native/react.gradle"` injects the bundling logic that connects to Metro.

2. **[`android/app/src/main/java/com/awesomeapp/MainApplication.java`](https://github.com/facebook/react/blob/main/android/app/src/main/java/com/awesomeapp/MainApplication.java)** – Instantiates `ReactInstanceManager`, which loads the JavaScript bundle at runtime and registers the `react-native-renderer` with the native `UIManager`.

3. **[`android/app/src/main/AndroidManifest.xml`](https://github.com/facebook/react/blob/main/android/app/src/main/AndroidManifest.xml)** – Declares `com.facebook.react.devsupport.DevSettingsActivity` for development mode debugging.

After opening the project, click **Sync Project with Gradle Files** to resolve dependencies including the renderer binaries shipped in `node_modules/react-native/`.

### Starting Metro and Running the App

Metro serves as the JavaScript bundler that compiles React core plus the `react-native-renderer` into a consumable package for the Android runtime.

```bash
npx react-native start

```

This starts the bundler watcher. Then launch the app from Android Studio by selecting a device and clicking **Run 'app'**, or use the CLI:

```bash
npx react-native run-android

```

The APK build process compiles the native code, while the running app connects to Metro via WebSocket to download the JavaScript bundle containing the renderer logic from [`ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/ReactNativeRenderer.js).

### Enabling Fast Refresh for Development

Activate Fast Refresh by shaking the device or emulator to open the React Native Dev Menu, then select **Enable Fast Refresh**. This leverages the renderer's `setBatchingImplementation` in [`ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/ReactNativeRenderer.js) to apply JavaScript changes instantly without rebuilding the APK, as the reconciler diffs updates against the native view tree maintained by [`ReactFiberConfigNative.js`](https://github.com/facebook/react/blob/main/ReactFiberConfigNative.js).

## Managing Native Modules in Android Studio

To extend your app with custom Android views, you must expose Java or Kotlin components through the ReactPackage interface so the renderer can instantiate them as host components.

### Creating a Custom View Manager

Create a Java class extending `SimpleViewManager` in `android/app/src/main/java/com/awesomeapp/`:

```java
package com.awesomeapp;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import android.widget.Button;

public class MyCustomViewManager extends SimpleViewManager<Button> {
  public static final String REACT_CLASS = "MyCustomButton";

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  @Override
  protected Button createViewInstance(ThemedReactContext ctx) {
    return new Button(ctx);
  }

  @ReactProp(name = "title")
  public void setTitle(Button view, String title) {
    view.setText(title);
  }
}

```

### Registering the Package

Create a package implementation to aggregate your view managers:

```java
package com.awesomeapp;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(
      com.facebook.react.bridge.ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<ViewManager> createViewManagers(
      com.facebook.react.bridge.ReactApplicationContext reactContext) {
    List<ViewManager> managers = new ArrayList<>();
    managers.add(new MyCustomViewManager());
    return managers;
  }
}

```

Register this package in [`MainApplication.java`](https://github.com/facebook/react/blob/main/MainApplication.java):

```java
@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new com.awesomeapp.MyPackage());
  return packages;
}

```

Consume the native component from JavaScript:

```javascript
import { requireNativeComponent } from 'react-native';

const MyCustomButton = requireNativeComponent('MyCustomButton');

export default function App() {
  return (
    <MyCustomButton 
      title="Native Android Button" 
      style={{ height: 40, width: 200 }} 
    />
  );
}

```

The renderer's host configuration in [`ReactFiberConfigNative.js`](https://github.com/facebook/react/blob/main/ReactFiberConfigNative.js) translates the `<MyCustomButton>` JSX element into a call to your Java `ViewManager.createViewInstance()` method.

## Debugging and DevTools Integration

Android Studio provides native debugging through **Logcat**, while React DevTools connects to the renderer's `injectIntoDevTools()` function (called at the end of [`ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/ReactNativeRenderer.js)) to inspect the component tree.

Launch DevTools separately:

```bash
npx react-devtools

```

The renderer registers its fiber tree with the DevTools extension, allowing you to inspect props and state while Android Studio captures native logs and performance traces from the underlying `UIManager` operations.

## Summary

- **Android Studio React Native integration** requires opening the `android/` Gradle module directly, not the project root, to ensure the React Native Gradle plugin resolves correctly.
- The **`react-native-renderer`** in [`packages/react-native-renderer/src/ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js) bridges React's reconciliation to Android's native views via the `UIManager` and [`ReactFiberConfigNative.js`](https://github.com/facebook/react/blob/main/ReactFiberConfigNative.js) host config.
- **Metro** bundles the renderer code with your JavaScript, serving it to the Android runtime through a WebSocket connection for live reloading.
- Custom native views require implementing `SimpleViewManager` and registering them in [`MainApplication.java`](https://github.com/facebook/react/blob/main/MainApplication.java) so the renderer can instantiate them as host components.
- **Fast Refresh** leverages the renderer's batching implementation to update the UI instantly without APK rebuilds.

## Frequently Asked Questions

### How does Android Studio communicate with the React Native JavaScript bundle?

Android Studio builds the native APK through Gradle, but the JavaScript logic is served separately by Metro. When the app launches, `ReactInstanceManager` (instantiated in [`MainApplication.java`](https://github.com/facebook/react/blob/main/MainApplication.java)) downloads the bundle from Metro over a localhost WebSocket. The `react-native-renderer` (from [`packages/react-native-renderer/src/ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js)) then registers itself with the native `UIManager` to translate React elements into Android views.

### What is the role of ReactFiberConfigNative.js in Android rendering?

[`ReactFiberConfigNative.js`](https://github.com/facebook/react/blob/main/ReactFiberConfigNative.js) acts as the host configuration for React's reconciler. It provides the platform-specific implementation of methods like `createInstance`, `appendChild`, and `finalizeInitialChildren`. When you render a `<View>` component, the reconciler calls these methods to generate corresponding Android `ViewGroup` instances through the `UIManager` bridge.

### How do I add a custom native module to my Android Studio React Native project?

Create a Java class extending `SimpleViewManager` for views or `ReactContextBaseJavaModule` for APIs, then wrap it in a `ReactPackage` implementation. Add this package to the `getPackages()` method in [`MainApplication.java`](https://github.com/facebook/react/blob/main/MainApplication.java). The renderer will treat your native code as a host component, creating instances via the methods defined in your `ViewManager` when referenced from JavaScript using `requireNativeComponent`.

### Why is Metro required when running React Native in Android Studio?

Metro is required because it performs the build-time bundling of React core plus the `react-native-renderer` (handled by [`scripts/rollup/packaging.js`](https://github.com/facebook/react/blob/main/scripts/rollup/packaging.js) in the React repository). It also provides the development server that enables Fast Refresh, allowing the renderer to receive incremental JavaScript updates via WebSocket without requiring Android Studio to rebuild the native APK for every code change.