The great Divide: Bridging Native Modules And React Native

Restrepo describes the bridge as the part of React Native that sends messages between JavaScript and native code. In the older architecture, those messages are asynchronous JSON payloads sent in batches, letting JavaScript use platform APIs and native modules.

Restrepo outlines TurboModules and JSI as parts of React Native's planned new architecture. TurboModules are intended to load modules lazily, improve type safety, reduce call overhead, and start faster. JSI provides an interface for C++ and JavaScript to interact, addressing limits she associates with the bridge, such as batching and bottlenecks.

On the native side, events such as timers, network activity, touch gestures, and Bluetooth are collected and serialized before reaching JavaScript; calls back to native code also pass through the bridge. Restrepo traces module registration, method configuration, JavaScript execution, and callbacks, describing how exported modules and methods become available to the app.

At Major League Soccer, the login flow used a web view connected to a web login page and Gigya, which handles registration, social login, profiles, and preferences. The team replaced that flow with a native module using Gigya's SDK, implementing the login screen in Kotlin and Swift and exposing native methods and events to React Native.