React Native Native bridge

Anand Kashyap

6 March 2021

React Native Native bridge :

React Native bridge is a way to communicate with the native code. With the help of the Native bridge concept, your .js code can call the native code.

We are going to create a native bridge for IOS :

First of all, open your ios project workspace. Then add a new file to your root project and choose the Objective-C type file. Just named that file that you want to name. In my case, I am used the “IOSNativeBridge”.

IOSNAtiveBridge.h :

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>


NS_ASSUME_NONNULL_BEGIN

@interface IOSNativeBridge : NSObject <RCTBridgeModule>

@end

NS_ASSUME_NONNULL_END

#import <Foundation/Foundation.h>

#import <React/RCTBridgeModule.h>

NS_ASSUME_NONNULL_BEGIN

@interface IOSNativeBridge : NSObject <RCTBridgeModule>

@end

NS_ASSUME_NONNULL_END

After that, there is another file you have to create with the same name but it is .m file.

IOSNAtiveBridge.m :

// IOSNativeBridge.m
#import "IOSNativeBridge.h" // You have to importe the .h file here.

@implementation IOSNativeBridge

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(iosNativeMethod:(NSString *)value1 value2:(NSString *)value2)
{
  RCTLogInfo(@"Your values is here %@ at %@", value1, value2);
}


@end

// IOSNativeBridge.m

#import "IOSNativeBridge.h" // You have to importe the .h file here.

@implementation IOSNativeBridge

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(iosNativeMethod:(NSString *)value1 value2:(NSString *)value2)

{

RCTLogInfo(@"Your values is here %@ at %@", value1, value2);

}

@end

Here iosNativeMethod is our native method name. and value1 and value2 are two parameters that we call from the js code.

Bridge.js (JavaScript code):

Now, from your JavaScript file you can call the method like this (after making sure to rebuild):

import { NativeModules } from 'react-native';
var Bridge = NativeModules.IOSNativeBridge;
Bridge.iosNativeMethod(
  'Here is your value 1 string',
  'Here is your value 2 string'
);

import { NativeModules } from 'react-native';

var Bridge = NativeModules.IOSNativeBridge;

Bridge.iosNativeMethod(

'Here is your value 1 string',

'Here is your value 2 string'

);

Reference: https://reactnative.dev/docs/native-modules-ios/