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

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)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 & RCTBridge.mm (iOS)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)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 (iOS)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 (iOS)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 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. 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) 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 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. 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 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, 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, RCTBridgeModule.h, ReactInstanceManager.java, and 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, which registers conforming classes with the module registry. On Android, modules must be explicitly registered in a ReactPackage implementation, such as 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}