In this lesson, you will learn how React Native moved from sending "text messages" between threads to allowing JavaScript to "speak" directly to the native side.
The Problem: The "Mailroom" Bottleneck
For years, React Native relied on the Bridge. Think of the Bridge like an old-school mailroom. If your JavaScript code wanted to do something native—like show an alert—it couldn't just reach out and tap the native layer on the shoulder. Instead, it had to write a message, serialize that message into a JSON string, and send it through the Bridge. The native side would eventually pick up the message, decode the JSON, and execute the task.
This created two major problems:
- Serialization Latency: Turning objects into strings and back again takes time.
- Asynchronicity: Because the communication was asynchronous, the JavaScript thread didn't know if the native side was busy or when exactly the task would finish. It was "fire and forget."
The Solution: JSI (JavaScript Interface)
The JavaScript Interface (JSI) changes the game by removing the "mailroom" entirely. With JSI, the JavaScript engine holds a direct reference to native methods.
Instead of passing messages, JavaScript can now call native functions directly in memory. Imagine the difference between sending a letter to a chef (the Bridge) versus standing in the kitchen and handing the chef the ingredients yourself (JSI).
In code, the shift looks conceptually like this:
The Bridge (Old way):
// We send a command and wait for a callback later
Bridge.send({ type: 'SHOW_ALERT', message: 'Hello' });
JSI (New way):
// We call the function directly as if it were part of JS
NativeModule.showAlert('Hello');
Because JSI provides direct memory access, the JavaScript thread doesn't have to wait for the bridge to process a queue. It simply executes the native code synchronously. This removes the overhead of JSON serialization and ensures that when you call a native method, it happens immediately. This architecture is the foundation that allows for much smoother animations and more complex interactions in modern React Native apps.
Key Takeaway: The evolution from the Bridge to JSI is the transition from slow, asynchronous message passing to fast, direct, and synchronous memory access between JavaScript and Native code.