How does React Native talk to native code?

Model answer

React Native runs your JavaScript in a JS engine (Hermes by default) and renders real native views, not a web view.

In the old architecture, JS and native talked through an asynchronous bridge that serialized messages as JSON. That added overhead and made synchronous calls impossible.

The new architecture replaces it:

JSI (JavaScript Interface) lets JS hold direct references to native objects and call them, including synchronously.
TurboModules are native modules loaded lazily and typed with a spec, which codegen turns into native interfaces.
Fabric is the new renderer. It can read layout synchronously and supports concurrent features.

To expose native functionality you write a TurboModule or native component in Swift/Kotlin or Objective-C/Java and call it from JS. Most apps use existing libraries, but understanding this helps when debugging performance or writing custom modules.

Key points

JavaScript runs in an engine such as Hermes and renders real native views
The old bridge was asynchronous and JSON-serialized
JSI allows direct, even synchronous, calls between JS and native
TurboModules and Fabric are built on JSI

Likely follow-ups

What is codegen used for in the new architecture?
When would you write a custom native module?

Common mistakes

Saying React Native renders HTML in a web view
Sending large payloads across the JS/native boundary on every frame