# How React Native Integrates with Native Platform SDKs: iOS and Android Architecture Explained

> Understand how React Native interfaces with iOS UIKit and Android View systems via a bridge serializing calls to native modules for real UI components. Explore the architecture.

- Repository: [Meta/react-native](https://github.com/facebook/react-native)
- Tags: architecture
- Published: 2026-02-25

---

**React Native executes JavaScript code in a runtime that communicates with iOS UIKit and Android View system through a bridge or runtime layer, serializing method calls to native modules and view managers that instantiate real native UI components.**

React Native is an open-source framework maintained by Meta in the `facebook/react-native` repository that enables developers to build mobile applications using JavaScript while rendering actual native platform SDK components. Understanding how React Native bridges the gap between JavaScript and native platform SDKs is essential for debugging performance issues and creating custom native modules.

## React Native Architecture: Bridging JavaScript and Native Platform SDKs

React Native operates through a layered architecture where JavaScript code runs in a dedicated runtime (Hermes, JSC, or V8) and communicates with the underlying native platform SDKs through an intermediary layer.

| Layer | Responsibility | Core Source Files |
|-------|----------------|-----------------|
| **JavaScript runtime** | Executes the bundle. Holds the React reconciler and the component tree. | `packages/react-native/ReactCommon/react/runtime/platform/ios/ReactCommon/RCTInstance.mm` (iOS)<br>[`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/JavaScriptExecutorFactory.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/JavaScriptExecutorFactory.java) (Android) |
| **Bridge / Runtime** | Serialises method calls and events between JS and native. In bridgeless mode, uses `CallInvoker` for direct C++ calls. | [`packages/react-native/React/Base/RCTBridge.h`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h) & `RCTBridge.mm` (iOS)<br>[`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeReactContext.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/BridgeReactContext.java) (Android) |
| **React Application Context** | Holds the Catalyst instance (iOS) or ReactInstance (Android). Provides access to native modules and view managers. | `packages/react-native/ReactCommon/react/nativemodule/core/platform/ios/ReactCommon/RCTTurboModuleManager.mm` (iOS)<br>[`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/ReactApplicationContext.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/ReactApplicationContext.java) (Android) |
| **Native Modules** | Expose imperative APIs to JavaScript (`RCTBridgeModule` on iOS, `NativeModule` on Android). | [`packages/react-native/React/Base/RCTBridgeModule.h`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridgeModule.h) (iOS)<br>[`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/NativeModule.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/NativeModule.java) (Android) |
| **View Managers** | Map React component types to real UI views (`RCTViewManager` on iOS, `ViewManager` on Android). | [`packages/react-native/React/Views/RCTViewManager.h`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Views/RCTViewManager.h) (iOS)<br>[`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java) (Android) |

The relationship between React Native and native platform SDKs follows this flow:

```

JavaScript (React)  ⇄  Bridge/Runtime  ⇄  Native Modules & View Managers  ⇄  iOS UIKit / Android View System

```

## How the Bridge Connects React Native to iOS UIKit

On iOS, React Native leverages the UIKit framework through a series of Objective-C++ classes that manage the JavaScript runtime and native view hierarchy.

### RCTBridge and the Runtime Layer

The `RCTBridge` class in [`packages/react-native/React/Base/RCTBridge.h`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridge.h) bootstraps the JavaScript engine and manages the communication channel. When initialized, it creates an `RCTCxxBridge` instance that hosts the JavaScript runtime (Hermes or JSC) and sets up the message queue for asynchronous communication between JavaScript and native platform SDKs.

### Native Modules on iOS

Native modules conform to the `RCTBridgeModule` protocol defined in [`packages/react-native/React/Base/RCTBridgeModule.h`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridgeModule.h). These modules receive a reference to the bridge through an internal `bridge` property, allowing them to access the `RCTUIManager` or other core services. When JavaScript calls `NativeModules.ModuleName.method()`, the bridge serializes this call, dispatches it to the main queue, and invokes the corresponding Objective-C method.

### View Managers and UIKit Components

View managers subclass `RCTViewManager` (header in [`packages/react-native/React/Views/RCTViewManager.h`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Views/RCTViewManager.h)) and act as factories for UIKit components. For example, `RCTScrollViewManager` creates a `UIScrollView` instance and maps React props to native properties. The `RCTUIManager` coordinates these updates, batching them for performance and applying them to the native view hierarchy on the main thread.

## Android Integration: React Native with the Android SDK

On Android, React Native interfaces with the Android View system through Java and Kotlin classes that mirror the iOS architecture while adhering to Android SDK patterns.

### ReactInstanceManager and CatalystInstance

The `ReactInstanceManager` in [`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java) serves as the Android equivalent of `RCTBridge`. It constructs a `CatalystInstance`, loads the JavaScript bundle, and manages the lifecycle of the React application context. This manager coordinates with the `JavaScriptExecutorFactory` to instantiate the appropriate JavaScript engine.

### Implementing NativeModule for Android

Native modules implement the `NativeModule` interface defined in [`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/NativeModule.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/NativeModule.java). Unlike iOS's protocol-based approach, Android uses abstract classes like `ReactContextBaseJavaModule` that provide access to the `ReactApplicationContext`. Modules are registered through `ReactPackage` implementations, which the `ReactInstanceManager` queries during initialization.

### ViewManager and Android Views

The `ViewManager` class in [`packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java`](https://github.com/facebook/react-native/blob/main/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java) is parameterized with the native Android view type (e.g., `android.widget.TextView`) and a shadow node class for layout calculations. Subclasses override `createViewInstance` to instantiate Android SDK views and define `@ReactProp` annotated setters to handle property updates from JavaScript. The `UIManagerModule` batches these operations and dispatches them to the main thread for execution.

## The New Architecture: Bridgeless Mode and TurboModules

Starting with React Native 0.71, the framework supports a **bridgeless** architecture that eliminates the JSON serialization bottleneck while maintaining the same conceptual layering between JavaScript and native platform SDKs.

### RuntimeExecutor and CallInvoker

In bridgeless mode, the `RCTBridge` class remains for backward compatibility, but the runtime switches to `facebook::react::RuntimeExecutor` and `facebook::react::CallInvoker` as implemented in `packages/react-native/ReactCommon/react/runtime/`. These C++ components allow direct invocation of native methods from JavaScript without marshaling through a bridge, significantly reducing latency for native module calls.

### TurboModules and JSI

**TurboModules** replace the classic native module system, leveraging the JavaScript Interface (JSI) to expose type-safe, synchronous native APIs. According to the feature flags documentation in [`packages/react-native/src/private/featureflags/__docs__/README.md`](https://github.com/facebook/react-native/blob/main/packages/react-native/src/private/featureflags/__docs__/README.md), the `enableBridgelessArchitecture` flag controls this behavior. TurboModules are registered through `RCTTurboModuleManager` on iOS and corresponding managers on Android, providing direct access to platform SDK functionality while maintaining the abstraction layer that allows cross-platform JavaScript code to run on both iOS and Android native platform SDKs.

## Summary

- React Native executes JavaScript in a dedicated runtime (Hermes/JSC) that communicates with iOS UIKit and Android View system through a bridge or runtime layer.
- The **bridge** (or **CallInvoker** in bridgeless mode) serializes method calls between JavaScript and native code, dispatching them to `RCTBridgeModule` on iOS and `NativeModule` on Android.
- **View managers** (`RCTViewManager` on iOS, `ViewManager` on Android) instantiate real native UI components from the platform SDKs and map React props to native properties.
- The **New Architecture** eliminates the bridge bottleneck using TurboModules and JSI, but maintains the same fundamental relationship between JavaScript and native platform SDKs.
- Key source files include [`RCTBridge.h`](https://github.com/facebook/react-native/blob/main/RCTBridge.h), [`RCTBridgeModule.h`](https://github.com/facebook/react-native/blob/main/RCTBridgeModule.h), [`ReactInstanceManager.java`](https://github.com/facebook/react-native/blob/main/ReactInstanceManager.java), and [`ViewManager.java`](https://github.com/facebook/react-native/blob/main/ViewManager.java), which define the contracts between the JavaScript runtime and native platform SDKs.

## Frequently Asked Questions

### How does React Native render native UI components instead of WebViews?

React Native uses **view managers** to instantiate actual native platform SDK components. On iOS, `RCTViewManager` subclasses create `UIView` instances from UIKit, while on Android, `ViewManager` subclasses create `android.view.View` instances. The JavaScript reconciler communicates property updates through the bridge or JSI, and the native view managers apply these to the real native UI hierarchy.

### What is the difference between the Bridge and the New Architecture runtime?

The **Bridge** is the original serialization layer that converts JavaScript method calls into JSON-like messages queued for the native side, which introduces asynchronous latency. The **New Architecture** removes this bridge in favor of direct C++ bindings via the JavaScript Interface (JSI) and `CallInvoker`, allowing synchronous, type-safe communication through TurboModules while still interfacing with the same iOS and Android native platform SDKs.

### Where are native modules registered in React Native source code?

On iOS, native modules are automatically discovered by `RCTBridge` through the `RCT_EXPORT_MODULE()` macro defined in [`packages/react-native/React/Base/RCTBridgeModule.h`](https://github.com/facebook/react-native/blob/main/packages/react-native/React/Base/RCTBridgeModule.h), which registers conforming classes with the module registry. On Android, modules must be explicitly registered in a `ReactPackage` implementation, such as [`MyAppPackage.java`](https://github.com/facebook/react-native/blob/main/MyAppPackage.java), which returns module instances from `createNativeModules()`; the `ReactInstanceManager` then loads these during initialization.

### Can React Native work without the native platform SDKs?

No, React Native fundamentally depends on the native platform SDKs to render UI and access device capabilities. The framework is not an emulator or abstraction layer that replaces UIKit or the Android View system; rather, it is a coordination layer that marshals JavaScript instructions to these native platform SDKs through view managers and native modules. Without the underlying iOS or Android SDK, React Native cannot instantiate the native components required for rendering.