Bridging In React Native

Here we have a smash topic to learn.!!

Bridging in React Native is the process of establishing a connection between JavaScript, the language used for building cross-platform mobile apps, and the native code of the underlying mobile platforms, iOS and Android.

This connection enables developers to access platform-specific features, leverage existing native libraries, and interact with native APIs when developing mobile applications. It acts as a bridge that facilitates seamless communication between JavaScript and the native code, allowing developers to maintain a unified codebase for most of their app while incorporating platform-specific functionality as needed.

Here’s why bridging is necessary:-

• Accessing Native Functionality: Many mobile apps require access to platform-specific features and APIs like the camera, GPS, Bluetooth, sensors, or hardware-specific functionality. Bridging allows you to leverage these features by writing code in the native languages (Objective-C/Swift for iOS and Java/Kotlin for Android) and exposing them to your JavaScript code.
• Reusing Existing Native Code: If you have existing native code (for example, libraries or modules) that you want to use in your React Native app, bridging allows you to integrate this code seamlessly into your application.
• Optimising Performance: In certain cases, using native code can offer better performance or provide a more efficient solution compared to implementing the functionality in JavaScript.
• Platform-Specific UI: If you need to create custom or platform-specific user interface components, you would typically implement them using native code and bridge them to your React Native app.

Here’s a high-level overview of how the React Native bridge works:-

JavaScript Thread:

The primary logic and user interface of a React Native app are written in JavaScript.

This JavaScript code runs on a separate thread called the JavaScript thread.

Native Modules:

React Native provides a way to create native modules, which are JavaScript modules that encapsulate native code.

These modules can expose native APIs and functionality to the JavaScript code.

Bridge:

The React Native bridge acts as a communication channel between the JavaScript thread and the native code.

When a JavaScript function from a native module is called, the bridge facilitates the communication.

Native Code:

Native code can be written in Java (for Android) or Objective-C/Swift (for iOS).

This code can access device-specific APIs and features, such as camera, GPS, or platform-specific UI components.

Method Calls:

When a JavaScript function is invoked that belongs to a native module, the bridge serializes the function call and its arguments.

It sends this serialized data to the native code running on the respective platform.

Execution:

The native code processes the request and performs the required native operations.

It can access platform-specific APIs, manipulate UI elements, or perform any other native tasks.

Callbacks:

Once the native code completes its task, it can send back a response to the JavaScript thread through the bridge.

This response can include data or trigger callback functions provided by the JavaScript code.

Updating UI:

If the native code manipulates the user interface, such as rendering a native component, the bridge ensures that these changes are reflected in the app’s UI.

Asynchronous Operations:

Many native operations are asynchronous, and the bridge handles these scenarios by using promises or callbacks to deliver results to the JavaScript code when they are ready.

Let’s look at how it works:-

• When you open up an application at that moment OS will create the main thread also called it ui thread and assign it to our application. And this main thread will generate Js thread and shadow thread.
• Shadow thread’s job is to calculate the layout which we have defined in javascript and it will send the information to native side.

Eg: We want to disable a button on javascript so we set a disabled property on the JS side, which will be sent over the bridge as a serialized JSON object.

• We can pass a function across a bridge and Native will send an event to JS and a callback will be performed, But when we have a big list of items and when we scroll fast on the screen sometimes we get blank screen, This is because the onScroll Native Event has been sent to JS thread.
• Js thread will send the new layout information to the shadow tree, shadow tree will calculate a layout and send back to the native side and this process course performance issue. That’s when we got the bridge.

Summary:-

React Native bridge is responsible for facilitating communication between the JavaScript thread and the native code. This enables developers to build mobile apps with a consistent JavaScript codebase while still having access to the full range of native features and functionality on both Android and iOS platforms.