How to Create Bridge in React Native for iOS and Android?

What is React Native Bridge?

React Native is developed in such a way that we will create a bridge between the language and therefore the JavaScript code. A “bridge” is nothing but how to line up communication between native platform and React Native.

One of the most important reasons for the recognition of React Native app development is that we can create a bridge between the language and JavaScript code, which suggests we will reuse all the reusable libraries created in the iOS and Android world.

To create a production grade application at some point of your time you would like to use Native Bridge. There are only a few articles and tutorials on cross-platform React Native bridge which works on both iOS and Android. During this article, we'll create a Native Bridge to access Swift and Java class from JavaScript.

Create the LightApp

To better understand Native Modules we'll create an easy LightApp example using react-native CLI.

$ react-native init LightApp

$ cd LightApp

Next, we'll create a category Bulb in Swift for iOS and Java for Android, and this may be utilized in this app during a React component. This may be a cross-platform example and therefore the same React code will add both iOS and Android.

As we've created a basic skeleton of the project, next we've divided this text into two sections:

Section 1 — Native Bridge in iOS

Section 2 — Native Bridge in Android

Section 1 — Native Bridge iOS
In this section, we'll specialise in iOS and make a bridge between Swift/Objective C and your React Component. it's these three steps:
Step 1 - Create a Bulb class and Bridge Header
Step 2 - Understanding GCD Queue and fixing the warning:
Step 3 - Accessing a variable in JavaScript from Swift and Callbacks

Step 1 - Create a Bulb class and Bridge Header

To get started we'll create a Bulb class in swift, which can have a static class variable isOn and a couple of other functions. then we'll access this swift class from Javascript. Let's start by opening LightApp.xcodeproj in the ios folder. It should open Xcode together with your ios code.
Once you open the project in Xcode, then create a replacement Swift file Bulb.

We have also clicked on Create Bridging Header which can create a file LightApp-Bridging-Header.h this may help to speak between Swift and Objective C code. Remember that during a project we've just one Bridge Header file. So if we add new files, we will reuse this file.
Update following code in LightApp-Bridging-Header.hfile:

#import “React/RCTBridgeModule.h”

RCTBridgeModule will arrange an interface to join a bridge module.
Next update Bulb.swift with the subsequent code:

We have created a Bulb class which is inherited from NSObject. The base class of most Objective-C class ranking is NSObject, from which subclasses acquire a basic interface to the runtime system and therefore the capability to behave as Objective-C objects. we will see that we've used @objc before a function and sophistication , this may make that class, function or object available to Objective C

React Native won't expose any function of Bulb to React JavaScript unless explicitly done. to try to do so we've used RCT_EXPORT_METHOD() macro. So we've exposed the Bulb class and turnOn function to our Javascript code. Since Swift object is converted to Javascript object, there's a kind of conversation. RCT_EXPORT_METHOD supports all standard JSON object types:

NSString to string

NSInteger, float, double, CGFloat, NSNumber to number

BOOL to boolean

NSArray to array

NSDictionary to object with string keys and values of any type from this list

RCTResponseSenderBlock to function

Now let’s modernize JavaScript code and approach this Bulb class from our React component. to try to to so open App.js and update with the subsequent code:

Now open Xcode console to ascertain the logs and that we can see that Swift turnOn method is named from JavaScript code. (As we've done logging within the method)

Step 2 - Understanding GCD Queue and fixing the warning:

Now let's fix the warning shown at rock bottom of the simulator and in browser console:

To understand it better let's understand about all the thread React Native runs:

Main thread: where UIKit work

Shadow queue: where the layout happens

JavaScript thread: where your JS code is really running

Every native module has its own GCD Queue except it determines otherwise. Now since this Native module will run on a special thread and our main thread depends thereon , it's showing this warning. And to form this code to run on MainQueue, open Bulb.swift and add this function.

You can explicitly mention return false to run this during a separate threat.

Step 3 - Accessing a variable in JavaScript from Swift and Callbacks

add the Bulb Status(ON or OFF) value to our React screen. to try to do so we'll add the getStatus function to Bulb.swift and call that method from JavaScript code. we'll create this method as a callback.

Let's update the code in bold in Bulb.swift

getStatus() method receives a callback parameter that we'll pass from your JavaScript code. and that we have called the callback with an array of values, which can be exposed in JavaScript. we've passed NSNull() because the first element, which we've considered as a mistake within the callback.

And then finally update the React Code:

Rebuild the code and run the app, you'll see the Bulb Status value and once you click on activate then it'll show Bulb is ON

Do remember to rebuild the code rather than refresh, as we changed Native Code.

Section 2 — Native Bridge in Android

In this section, we'll make an equivalent Javascript code which we return for iOS to figure with Android. At this point we'll create a Bulb class in Java and expose an equivalent function turnOn, TurnOff and getStatus to Javascript.

Open Android Studio and click on Open an existing Android Studio project then select the android folder inside our LightApp. Once all gradle dependency is downloaded, create a Java Class Bulb.java as shown:

And update the subsequent code in Bulb.java:

We have created a Bulb Java class which is rooted from ReactContextBaseJavaModule. ReactContextBaseJavaModule requires that a function called getName is usually implemented. The aim of this method is to return the string name of the Native Module which represents this class in JavaScript. So here we'll call this Bulb in order that we will access it through React.NativeModules.Bulb in JavaScript. rather than Bulb, we will have a special name also.

Not all functions are exposed to Javascript explicitly, to show a function to JavaScript a Java method must be annotated using @ReactMethod. The return sort of bridge method is usually void.

We have also created a getStatus function which has params as callback and it returns a callback and passes the worth of static variable isOn.

Next step is to register the module, if a module isn't registered it'll not be available from JavaScript. Create a file by clicking on Menu File -> New -> Java Class and therefore the filename as BulbPackage then click OK. then add following code to

We demand to Override createNativeModules function and compute the Bulb object to the modules array. If this is often not added here then it'll not be available in JavaScript.

We don’t have to change any JavaScript code written in iOS, as we've exposed an equivalent class name and performance . If you've got skipped the iOS part then you would like to repeat the React Javascript code from App.js

Now run the App over Android Studio or from react-native run-android:

We can detect the Bulb status on the screen and may turn on or distant from the button. The good thing is that we've created a Native Bridge which is Cross Platform.

Develop robust native-style applications for both Android and iOS with the help of top rated React Native development company. React Native mobile applications for both iOS and Android platform. Since it requires to be coded only once, React Native quickly gained popularity amongst developers as well as businesses because of its fast time to market and cost-effectiveness.