Integrate native Android & iOS SDKs in a react-native app (bridging)

Sometimes while developing apps with react-native we find ourselves in a situation where we don’t have a library for react-native but it exists for native Android and iOS apps. In such cases we need to write native modules for Android and iOS and bridge it to call it from JavaScript.

For this tutorial, we will integrate SatisMeter native SDK’s for iOS and Android and use it from JS side of the app.

Let’s start with creating a react-native project,

npx react-native init rn_bridge_satismeter

First, we will integrate iOS SDK

You can refer to the documentation for iOS SDK integration here.

Step 1.
Open project on xcode.

cd rn_bridge_satismeter
cd ios
open `rn_bridge_satismeter.xcworkspace` file

Step 2.
Let’s create a Cocoa Touch class RCTSatisMeter using xcode.

This will create 2 files inside: RCTSatisMeter.h and RCTSatisMeter.m

Step 3.
Add pod to your podfile

pod 'SatisMeter'

Step 4.
Update RCTSatisMeter.h file to look like this:

Step 5.
Update RCTSatisMeter.m file to look like this:

• RCT_EXPORT_MODULE macro, which exports and registers the native module class with React Native.
• RCT_REMAP_METHOD() to specify the JavaScript method's name.

Step 6.

cd ios
pod install

And we are done with SatisMeter sdk integration in ios.

Let’s call it from JavaScript.

Call SatisMeter.hook() from App.js

And run the app on iOS simulator,

npx react-native run-ios

We have successfully integrated the SDK on our iOS App : )

Let’s integrate the SDK on Android now,

You can refer to the documentation for Android SDK integration here.

Step 1.
Create SatisMeterModule.java & SatisMeterPackage.java

android/app/src/main/java/com/rn_bridge_satismeter

Step 2.

Update SatisMeterModule.java to look like this:

• getName() to specify the native module’s name.
• All native module methods meant to be invoked from JavaScript must be annotated with @ReactMethod.

Step 3.
Update SatisMeterPackage.java to look like this:

Step 4.
Add package to MainApplication.java,

To register the SatisMeterModule package, we must add SatisMeterPackage to the list of packages returned in ReactNativeHost's getPackages() method.

Step 5.
Add satismeter package to app/build.gradle,

We don’t need to do any changes on App.js, everything will work just fine.

And run the app on Android emulator,

npx react-native run-android

We have successfully integrated the SDK on our Android App too : )

Thanks for reading.
I hope you enjoyed this article and it helped you in some way.

More articles to come. Stay tuned.

You can find the code for this tutorial in this repo.

Also, find me on LinkedIn.