How to use Native iOS / Android code in React Native with Promise

Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple Pay or Google Pay, bio metric id, camera. This article covers how to do communicate between JavaScript and Native Modules.

React Native app uses RN bridge to communicate between JavasScript and Native iOS and Native Android modules.

Native iOS code

1. Create Bridging header class for your app for example RNHelper.h and RNHelper.m
2. Import Bridging Module in that header class like this

#import "React/RCTBridgeModule.h"

3. Follow RCTBridgeModule protocol for that header like this:

@interface RNHelper : NSObject<RCTBridgeModule>

4. Open RNHelper.m and below line.

RCT_EXPORT_MODULE()

5. Add your method which you want to call from react native

RCT_EXPORT_METHOD(callNativeMethod:(dataType)param
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject) {
// Business code
if (failure) {
//Here send error in return as failure
reject(@"Fail", @"Error generated", error);
} else {
//Here send desired result in return as success
resolve(success);
}
}

Go to your react native structure and open javascript file and below lines to call native module

import { NativeModules } from 'react-native'
const RNHelper = NativeModules.RNHelper
RNHelper.callNativeMethod(yourparam)

That’s it. You are done with iOS.

Native Android Code

1. Create native file with java class for your app for example RNHelper.java and extend ReactContextBaseJavaModule
2. Import below packages in that file

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

3. Give module name by overriding getName method as below

@Override
public String getName() {
return "RNHelper";
}

4. Add your method which you want to call from react native and annotate it with @ReactMethod.

@ReactMethod
public void callNativeMethod(datatype param, Promise promise) {
// Business code
if (failure) {
//Here send error in return as failure
promise.reject("Fail", "Error message");
} else {
//Here send desired result in return as success
resolve(success);
}
}

5. You need to register native module with React Native for that create java class called RNBridgePackage which implements ReactPackage. Override createNativeModules method and return native file we created earlier in array list

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import your native module;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class RNBridgePackage implements ReactPackage {
@Nonnull
@Override
public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new RNHelper(reactContext));
return modules;
}
}

6. Goto main application class and add package there.

protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNBridgePackage()
);
}

7.Go to your react native structure and open javascript file and below lines to call native module

import { NativeModules } from 'react-native'
const RNHelper = NativeModules.RNHelper
RNHelper.callNativeMethod(yourparam)

That’s it! you are now ready to communicate between native and react native.

References:

https://reactnative.dev/docs/native-modules-intro