What is the React Native bridge and how does it work?

The bridge was the communication mechanism in the old React Native architecture between the JavaScript thread and native code. Understanding it explains many performance characteristics and limitations. Thread model (old architecture): (1) JS Thread: runs your React component code, business logic, state updates. Single-threaded JavaScript; (2) Native/UI Thread: renders native views, handles touch events, runs native animations; (3) Shadow Thread: calculates layout using Yoga (Flexbox engine) — translates React component trees to native layout; (4) Background Thread(s): networking, images, etc. How the bridge worked: all communication between JS and native was serialized to JSON and passed asynchronously across the bridge. JS calls a native method → JSON message queued → native thread processes → result JSON queued back → JS processes result. This was the biggest performance bottleneck. Problems with the bridge: serialization overhead (JSON encode/decode every message); asynchronous only (can't get synchronous values from native); bridge could become congested under heavy load; "dropped frames" when bridge was overwhelmed. New Architecture solution (JSI): JavaScript Interface allows JS objects to directly reference C++ objects. JS can call native methods synchronously. No JSON serialization. Direct function calls. Example: JS reads a scroll position from native synchronously via JSI — not possible with the old bridge. Bridge vs JSI timing: bridge ≈ 1-10ms for a round trip; JSI synchronous call ≈ microseconds. This is why the new architecture is a fundamental improvement for complex interactive UIs.