What is React Native Bridging?

React Native Bridging is a technique developed by the React team to allow mobile app developers to create custom modules when the built-in components provided by React Native do not fulfill specific needs.

While React Native offers a variety of pre-built modules (such as the “NetInfo” module for checking internet connectivity), there are cases where an app might require access to a platform API that React Native doesn’t support yet. Alternatively, the app might need a unique feature that can’t be implemented with the existing React Native modules.

React Native bridging enables developers to write native code for both Android and iOS and establish communication between this native code and React Native’s JavaScript. This makes it possible to achieve custom functionality beyond what React Native offers by default.

There are two main ways to bridge native code to JavaScript:

1. Native Modules
2. Native UI Components

In this Post, we’ll focus on Native Modules, which allow access to native iOS and Android features from JavaScript.

Creating a Native Android Module:

Here’s a simplified overview of the steps to create a native Android module:

1. Create a Java class that contains the native logic and any variables or callbacks you want to export to JavaScript.
2. Create a Java package for your class and register the module in this package.
3. In your MainApplication.java file, add the package to the array returned by the getPackages() method. This step makes the native module available to your JavaScript code.

Once this process is complete, you can access your native module from JavaScript using the NativeModules object in React Native.

We’ll understand this process in more detail by practically implementing a native module. For understanding i create a native module in android which clear cache of app.

1. Create a Java class:- here we create CacheModule.java class at the below path.

2. Create a Java package:- we also create below CacheModulePackage.java file.

3. Here in MainApplication.java file, we add our package to the array returned by the getPackages() method. This step makes the native module available to your JavaScript code.

4. Once we done with above process we can access our native module from JavaScript using the NativeModules object in React Native.

Conclusion :- React Native bridging enables developers to write native code for both Android and iOS and establish communication between this native code and React Native’s JavaScript.