How React Native Bridges JavaScript and Objective‑C: A Step‑by‑Step Guide

React Native JS‑OC Bridge Overview

React Native uses iOS’s built‑in JavaScriptCore as the JavaScript engine, allowing JavaScript to call Objective‑C (OC) modules directly and receive callbacks.

Calling OC Modules from JavaScript

Extract the registered OC module and invoke its function with parameters.

Use the callback parameter to access the OC function and obtain its return value.

Callback function: the first argument is an error object (null when no error), and the remaining arguments are the function’s return values.

If OC needs to call JavaScript, use NativeAppEventEmitter and its addListener method to register listeners.

Key points for addListener:

First argument: event name

Second argument: handler function

Always provide a corresponding removal, typically in componentWillUnmount.

Building a Native UI Component with JavaScript

Example: a native video view component with pinch‑zoom and native gesture support.

To control the component from JavaScript, add properties and methods as shown.

Module Configuration Table

OC generates a module configuration table containing all modules and their methods, which is passed to JavaScript.

OC‑JS Call Flow

Both OC and JS maintain a bridge that holds the same module configuration table. When JS calls an OC method, the bridge translates the call into module ID and method ID, sends it to OC, which executes the method and returns via callback.

Detailed JS‑to‑OC Invocation Process

The following steps describe the full flow, including callback handling:

JS calls an exposed OC module method.

The call is broken into ModuleName, MethodName, and arguments, then handed to the MessageQueue.

JS callback is cached in MessageQueue with a CallbackID; ModuleName and MethodName are converted to ModuleID and MethodID.

ModuleID, MethodID, CallbackID, and arguments are sent to OC.

OC retrieves the corresponding module and method from the configuration table.

RCTModuleMethod processes each argument from JS.

OC method executes and invokes its block callback.

The block generated by RCTModuleMethod is called.

The block calls MessageQueue.invokeCallbackAndReturnFlushedQueue with CallbackID and results.

MessageQueue locates the original JS callback using CallbackID.

The JS callback is executed with the parameters supplied by OC, completing the round‑trip.

The overall process can be summarized as: JS function call → ModuleID/MethodID → CallbackID → OC method execution → OC callback → JS callback execution.