How to Achieve React Native and iOS Bridging?

We love sharing our learning from the project. Recently, in one of our development projects, there was a need of bridging between iOS or Android and react-native. We were required to integrate the apple map with our application by writing the code in native iOS where the application would interact with the operating system. Once we get the relevant data from apple map, we had to send that data to our JS.

This is a great use case of bridging as you would be able to reuse of iOS or Android code in Javascript (react-native). In this blog, we have only covered the iOS and react native part.

Before going through the examples we need to focus on some macros or libraries:

1) RCTBridgeModule : RCTBridgeModule is a protocol. It provides an interface for registering a bridge module RCTBridgeModule@protocol RCTBridgeModule

2) RCT_EXPORT_MODULE(js_name): Register your module with the bridge during class implementation. It has an argument js_name which is optional and it is used as the JS module name. In case if it is not defined, Objective-C class name will be defined as the JS module name.

3) RCT_EXPORT_METHOD(method)\RCT_REMAP_METHOD(, method): Bridge modules can also define methods that are exported to JavaScript as NativeModules.ModuleName.methodName.

This method has two parameters – resolver and a rejecter block. Calling this method from JS such as `NativeModules.ModuleName.funcName(aString)` will return promise which contains a resolver and rejecter.

Method definition of ‘RCTPromiseResolveBlock’ and ‘RCTPromiseRejectBlock’.

In the above code, a method getThing() is defined which returns a promise.

– NSString *thingToReturn = @”Hello World!”;
This line of code declares a string ‘thingToReturn’ which contains the value “Hello World!”.

– resolve(thingToReturn);
This line returns a resolver in JS code.

Furthermore, to use ‘GetData’ native module from JavaScript, you require NativeModules from ‘react-native’ and from NativeModules we get native module ‘GetData’ and use in the Js like ‘NativeModules.GetData’.

As soon as the button clicks, buttonClick function is called and from that buttonClick function we can call the native method ‘getThing()’ similar to ‘NativeModules.GetData.getThing()’ and as this is a promise we can use ‘async’ and ‘await’.

Output :

After Button Clicking

Example 2

This example explains a callback in iOS native that can be used in JS.

It contains two files with extensions .h and .m. The content of the .h file remains same. In .m file we declare a method replaceString which is used to replace the ‘First’ text with ‘Second’ in a string ‘input’ received from JS.

The NativeModules contains the ‘GetData’ module which has ‘replaceString’ method.

Output :

After clicking on button

It is also possible to write the same iOS native code in swift if you are familiar with swift.
Bridging can also be achieved in Android and react-native in the same way as we have achieved in this blog.

You can find the code snippets of above examples here Hope these snippets and information provided in the blog is helpful.

Great article, simple and to the point; I’d done Native coding with React Native 6 months ago and was pulled from the project; when I returned it didn’t work – your example helped me get up and running again