What is a bridge in React Native ?

A React Native app comprises two sides as given below.

1. The JavaScript Side
2. The Native Side

The Native Side should be Java or Kotlin for Android and Swift or Objective-C for iOS.

The huge reason for the popularity of React Native is that a bridge can be created between the JavaScript code and Native language. React Native is developed in a manner in which we can produce a bridge between the JavaScript code and the Native Language. The Bridge in React Native permits the JavaScript code and the Native code to interact with each other. Without the bridge in React Native, there is absolutely no means for the native code to transmit any information to the JavaScript code and vice versa.

Need of Bridge in React Native: Suppose we need reutilize few existing Java library without implementing it again in JavaScript. So, we can reutilize it in our React Native application with the use of Native Bridge. Sometimes, to build an application of production level, we will most likely need to use Native Bridge.

Working of bridge: When we hit our app icon to open our app then the OS designs the main thread (a UI thread a.k.a) and allots this thread to our app. This main thread creates the JavaScript thread and the shadow thread (also known as the shadow tree). The shadow thread’s task is to compute layouts described on the JavaScript side and redirect that detail to the Native side. Views are set down in JavaScript, computed in the Shadow tree, and redirected to the UI thread.

Dispatching data: Now we know that how layouts are described at the begin however what takes place after the app starts running? what happens when we need to impair a button? Does this detail is sent through the bridge?

To impair a button we may set a feature on the JavaScript side that will be redirected above the bridge like a serialized JSON object. Improvements on native views are grouped simultaneously and redirected over the native side at the ending of all iteration of the event loop.

Along with passing properties, we can pass a function that will run JavaScript code as a reaction to several events on the native side (such as a press to the button). We note this callback in JavaScript, which turns serialized and redirected to the native side. When we press the button, the native event is redirected to the JavaScript domain and the callback is performed. Now, we can also redirect events out from the native side to the JavaScript side directly without utilizing a callback. The issue is that if we begin this interactivity on the native side then we are not aware of who is paying attention to the JavaScript side, which can activate undesired steps and which can make our code difficult to debug. It makes furthermore sense to make use of callbacks of the JS side except have a definite cause not to.

Execution: Most of the time all things pass steadily however sometimes like an original bridge it obtains traffic jams. When there is a big catalog of items and we begin scrolling rapidly then we might recognize a blank screen prior to the rest of the items are conveyed. This happens because the onScroll native event is redirected to the JavaScript thread, the JavaScript thread transmits the new layout detail to the shadow tree, the shadow tree computes the layout and redirects to the native side. While scrolling rapidly we gather these events that give rise to a traffic jam over the bridge. We can try to escape this by pre-computing layouts, in order to cross the bridge a few times. While executing complex animations we can obtain similar execution problems. 

Let us now explore in-depth and recognize how React Native functions under the hood and this will help us to understand the compilation of JavaScript to a Native code and the working of the whole procedure. It is significant to recognize how the whole procedure works, so that sometimes if you have performance issues then you will recognize where this issue originates.

Flow of Information: As we have discussed React ideas that power up React Native, and be one of them is that UI is a function of data. You can convert the condition and React notices that what to be updated. Now let us suppose that how details flow along with the usual React app. Explore the diagram given below :

Explanation of above diagram:

1. We have a React section, which proceeds details to three child sections.
2. What is occurring anonymously is that a Virtual DOM tree is generated, constituting these section hierarchies.
3. When the condition of the parent section is updated, React notices that how to proceed detail to the children.
4. As children are primarily a depiction of UI, React recognizes that how to group Browser DOM updates and implements them.

Now let us detach the Browser DOM and suppose that rather of grouping Browser DOM updates, React Native do the same in return with calls to Native modules. So proceeding details to Native modules can be done by two means, which are given below:

1. Shared mutable data
2. Serializable messages interchanged between JavaScript and Native modules

React Native uses the second method, which is Serializable messages interchanged between JavaScript and Native modules. Rather than mutating data on shareable objects, it proceeds asynchronously serialized grouped messages to the Bridge of React Native. The Bridge in React Native is the layer that permits the JavaScript code and the Native code to interact with each other.

Architecture: Following is the diagram that explains the structure of React Native architecture :

React Native Architecture

Three layers are stated in the diagram above:

1. JavaScript
2. Bridge
3. Native

The Bridge in React Native is the layer that permits the JavaScript and the Native modules to interact with each other and is primarily a carrier layer that conducts nonparallel chronological grouped feedback messages from JavaScript to Native modules. In the picture given above the Native layer is shown last since this layer is nearest to the device itself. 

When an incident is implemented on the Native layer then it might be a timer, touch, or network request, primarily, any incident associating device Native modules. Its data is assembled and this data is sent to the React Native Bridge as a serialized message. After that, the Bridge proceeds this message towards the JavaScript layer.

The JavaScript layer is an incident loop. After the React Native Bridge proceeds the Serialized payload to JavaScript then the incident is processed and the application logic becomes active.

Threading Model: Now, after all the things that we have discussed above it is significant to recognize that all the things discussed above are done on three major threads:

1. UI (the application’s main thread)
2. Native modules
3. JavaScript runtime

Let’s understand about each of the above threads:

The UI (the application’s main thread): It is the Native thread where the native-level perception takes place and It is the place where our platform of choices such as iOS or Android, carries out drawing, styling, and measuring.

Native modules: If the application accesses any Native APIs then the accessing is done on a different Native modules thread. For instance, if the camera, location, photos, and any further Native API is accessed then generally arrangement and indications are also concluded on this thread.

JavaScript runtime: It is the thread where every JavaScript application code will run. After all, it is based on a JavaScript incident loop, so it is steadier than the UI thread. Hence, when complicated calculations are done in an application that conducts many UI changes then these may give on to poor performance.