Most React Native devs use these five pieces every single day without knowing how they connect. Let's fix that.
🏗️ Build time — Metro
Metro is your only build-time actor. It takes your JSX/TS files, transforms them to plain JavaScript, resolves imports, tree-shakes, and bundles everything.
In dev mode → raw JS bundle.
In production → Hermes pre-compiles it to bytecode before it ships inside the app.
Think of Metro as Vite or Webpack, but purpose-built for React Native.
⚡ Runtime: JS layer — Hermes
Hermes receives the bundle and executes it on device. The key difference from V8: Hermes is AOT (Ahead-of-Time), not JIT.
By the time the app launches, the bytecode is already compiled. No parsing, no JIT warmup — execution starts immediately. That's where the startup speed win comes from.
🔗 Runtime: The bridge killer — JSI
When JS needs to talk to native code, it used to go through the old bridge — JSON-serialized messages passed asynchronously. Slow, unpredictable, and batched.
JSI (JavaScript Interface) replaces it entirely. JS now holds actual C++ host object references. Calls can be synchronous or asynchronous, and there's no serialization cost.
📐 Runtime: Native layer — Yoga + Fabric
JSI feeds two parallel systems:
Yoga — a C++ flexbox layout engine (built by Meta). It runs on the shadow thread, computing x, y, width, and height from your style props — completely off the main thread.
Fabric — the new concurrent renderer (also C++). It builds the native view tree and replaces the old UIManager bridge.
Both feed into the UI thread, which commits the final render to iOS UIKit or Android ViewGroups. Pixels hit the screen.
The flow in one line
Your code → Metro → JS bundle → Hermes → JSI → Yoga + Fabric → Native views → Screen
The new architecture isn't just a performance upgrade — it's a complete rethink of the JS ↔ native boundary.
Drop a question below if any layer is still unclear 👇
Top comments (0)