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.…