React Native Architecture

I assume that I don’t have to give an introduction to React Native. Everyone these days has heard about it, and knows what it is and what is being used for. But have you ever dive into the it’s core architecture? I guess the answer is no right?. Over the past few years I also heard about this bridge thing, but didn’t get a proper chance to learn about it. Fast few months I have been researching about the react native architecture, and was able to dig some finding. So here I am writing a whole article about react native architecture.

What is this Bridge?

Hey trust me this bridge thing is same as bridges that we use to cross the rivers. So that being said, before talking about “what is react native bridge”, will talk bit about “what is react native”.

React Native is a framework for building native apps using React a UI library by Meta(previously known as Facebook). React native enable us to use native UI views provided by the android/IOS SDKs. That means when you use a button which provided by the react native, under the hood you are using the native button provided by host native os SDK(android or IOS).

As you can see in the above diagram. React Native has to communicate both Application’s business logic(which written in JavaScript) and the Native android or IOS SDKs. React Native is doing this by,

1. Exposing a layer(which consists mostly native modules. This layer is responsible for implementing native functionalities) implemented using Java/Objective-C which communicate with the android/IOS SDKs.

2. Exposing a layer to the React Native developers.

3. A thin layer written in C++ which connecting these two run time environments. (This thin layer is “NOT” the Bridge)

Where is the damn Bridge?

Hold on, will come into that part. But before we have to talk about something else. Let’s see how react native app during installation and run time.

So as we mentioned above we do have a native code as well as JavaScript code. In order our react native app to work these codes should be executed.

Who is responsible for executing these codes?

1. Javascript part(optimised JS file) will be executed by the JavaScript Virtual machine which uses JavaScript core as the engine(yeah not v8).
2. Native part(binary files) will be executed by the Main UI thread and the other background threads.

*APK file contains an optimised JS file and binary files.

So here it is. The Bridge that you are looking for.

Bridge

The bridge is nothing but responsible to pass messages(handle communication) between these two sides.

• Bridge uses asynchronous way to communicate between the JavaScript side and the Native side.
• In order to communicate, bridge will serialize and deserialize the data.
• This process is very time consuming.

Following image shows how much data passes between the JavaScript side and the Native side just for a single button click.

New React Native architecture : JSI(JavaScript Interface)

As we mentioned earlier React Native bridge architecture has is own problems. So React Native team is working on a new architecture called JSI(JavaScript Interface), which allows communication between JavaScript side and Native side more efficiently.

• The proposed architecture will expose the Native methods/object to JavaScript side vie C++ object called “HostObject”.
• JavaScript side will hold a reference to this hostObject. By doing this JavaScript side can reference this object to access methods and props directly.
• Most important thing is this can be achieve by both synchronically and asynchronically.

This will bring more performance to the React Native framework and speed things up.

The chart that follows displays react-nativeWith the aid of JSI, the library mmkv executes a straightforward key-value storage transaction. It completes read/write operations 30 times faster than AsyncStorage by using synchronous calls.

Please note that this architecture is being developed at the moment. We can expect this to be released in the future.

A huge thanks to Lev Vidrak from Wix Engineering team for proving s such a good explanation about the React Native architecture. You can find more about in here : https://www.youtube.com/watch?v=ZwX3i3e1Vfs&t=1441s