Before going through the examples we need to focus on some macros or libraries:<\/strong><\/p>\n 1) RCTBridgeModule :<\/strong> RCTBridgeModule is a protocol. It provides an interface for registering a bridge module RCTBridgeModule 2) RCT_EXPORT_MODULE(js_name):<\/strong>\u00a0Register 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.<\/p>\n 3) RCT_EXPORT_METHOD(method)\\RCT_REMAP_METHOD(, method):<\/strong> Bridge modules can also define methods that are exported to JavaScript as Example.,<\/strong><\/p>\n [js] This is exposed to JavaScript as `NativeModules.ModuleName.funcName`.<\/p>\n These methods can also return a Promise that are compatible with JS async functions.<\/p>\n Example.,<\/strong><\/p>\n [js] 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.<\/p>\n Method definition of ‘RCTPromiseResolveBlock’ and ‘RCTPromiseRejectBlock’.<\/strong><\/p>\n [js] 4) RCT_REMAP_METHOD(js_name, method)\\RCT_EXTERN_REMAP_METHOD(js_name, method) :<\/strong> It is similar to RCT_EXPORT_METHOD, but it sets the method name which is exported to the JS.<\/p>\n Example usage:<\/strong><\/p>\n [js] This method is available in JS as Outlined below are some example to explain this<\/strong><\/p>\n Example 1<\/strong><\/p>\n This example contains a text and a button and on clicking the button, the text value changes. The changed text is received from the native iOS code.<\/p>\n In the example, we have a module ‘GetData’ and a method ‘getThing()’ that returns a promise.<\/p>\n Create two files ‘GetData.h’ and ‘GetData.m’ in ios directory. While\u00a0 [js] #import <Foundation\/Foundation.h> ‘GetData’ is the module that is available in ‘NativeModules’ of react native. RCTBridgeModule is the protocol which is used to register module ‘GetData’ for bridging.<\/p>\n [js] #import "GetData.h" [\/js]<\/p>\n In the above code, a method – NSString *thingToReturn = @”Hello World!”; – resolve(thingToReturn); 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’.<\/p>\n [js] [js] constructor(props) { render() { [js] 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’.<\/p>\n Output : <\/strong><\/p>\n After Button Clicking<\/strong><\/p>\n Example 2<\/strong><\/p>\n This example explains a callback in iOS native that can be used in JS.<\/p>\n It contains two files with extensions [js] #import "GetData.h" RCT_EXPORT_METHOD(replaceString:(NSString *)input callback:(RCTResponseSenderBlock)callback) [js] import React, { Component } from ‘react’; export default class IOS_ReactNative_communication extends Component { buttonClick = () => { render() { const styles = StyleSheet.create({ AppRegistry.registerComponent(‘IOS_ReactNative_communication’, () => IOS_ReactNative_communication);<\/p>\n [\/js]<\/p>\n The NativeModules contains the ‘GetData’ module which has ‘replaceString’ method.<\/strong><\/p>\n Output : <\/strong><\/p>\n After clicking on button<\/strong><\/p>\n It is also possible to write the same iOS native code in swift if you are familiar with swift.
\n@protocol RCTBridgeModule<\/code><\/p>\nNativeModules.ModuleName.methodName<\/code>.<\/p>\n
\nRCT_EXPORT_METHOD(funcName:(NSString *)onlyString
\n secondName:(NSInteger)argInteger)
\n { … }
\n[\/js]<\/p>\n
\n RCT_EXPORT_METHOD(funcName:(NSString *)onlyString
\n resolver:(RCTPromiseResolveBlock)resolve
\n rejecter:(RCTPromiseRejectBlock)reject
\n { … }
\n[\/js]<\/p>\n
\n – typedef void (^RCTPromiseResolveBlock)(id result);
\n – typedef void (^RCTPromiseRejectBlock)(NSString *code, NSString *message, NSError *error);
\n[\/js]<\/p>\n
\n RCT_REMAP_METHOD(getThing,
\n resolver: (RCTPromiseResolveBlock)resolve
\n rejecter:(RCTPromiseRejectBlock)reject)
\n { … }
\n[\/js]<\/p>\nNativeModules.GetData.getThing()<\/code>.<\/p>\n'.h'<\/code> file declares the interface,\u00a0'.m'<\/code> file implements the interface.<\/p>\n
\n\/\/ GetData.h file<\/p>\n
\n#import <React\/RCTBridgeModule.h>
\n@interface GetData : NSObject <RCTBridgeModule>
\n@end
\n[\/js]<\/p>\n
\n\/\/ GetData.m file<\/p>\n
\n@implementation GetData
\nRCT_EXPORT_MODULE();
\nRCT_REMAP_METHOD(getThing,
\n resolver: (RCTPromiseResolveBlock)resolve
\n rejecter: (RCTPromiseRejectBlock)reject)
\n{
\n NSString *thingToReturn = @"Hello World!";
\n resolve(thingToReturn);
\n}
\n@end<\/p>\ngetThing()<\/code> is defined which returns a promise.<\/p>\n
\nThis line of code declares a string ‘thingToReturn’ which contains the value “Hello World!”.<\/p>\n
\nThis line returns a resolver in JS code.<\/p>\n
\nimport {NativeModules} from ‘react-native’
\n[\/js]<\/p>\n
\nexport default class IOS_ReactNative_communication extends Component {<\/p>\n
\n super(props);
\n this.state = {
\n text: ‘Bye Bye World’
\n }
\n}<\/p>\n
\n return (
\n <View style={styles.container}>
\n <Text style={styles.welcome}>{this.state.text}<\/Text>
\n <TouchableOpacity>
\n <View style={styles.button}>
\n <Text style={styles.buttonText}
\n onPress={() => { this.buttonClick()}}>Change Text.<\/Text>
\n <\/View>
\n <\/TouchableOpacity>
\n <\/View>
\n );
\n }
\n}
\n[\/js]<\/p>\n
\nbuttonClick = async () => {
\n let newString = await NativeModules.GetData.getThing();
\n this.setState({text: newString})
\n}
\n[\/js]<\/p>\n![\"Screen](\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-10.41.09-AM-164x300.png\")
<\/p>\n![\"Screen](\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-10.42.15-AM-162x300.png\")
<\/p>\n.h<\/code> and .m<\/code>. The content of the .h<\/code> file remains same. In .m<\/code> file we declare a method replaceString<\/code> which is used to replace the ‘First’ text with ‘Second’ in a string ‘input’ received from JS.<\/p>\n
\n\/\/ GetData.m file<\/p>\n
\n@implementation GetData
\nRCT_EXPORT_MODULE();<\/p>\n
\n{
\n callback(@[[input stringByReplacingOccurrencesOfString:@"First" withString:@"Second"]]);
\n}
\n@end
\n[\/js]<\/p>\n
\n\/\/index.io.js<\/p>\n
\nimport {
\n AppRegistry,
\n StyleSheet,
\n Text,
\n View,
\n NativeModules,
\n TouchableOpacity
\n} from ‘react-native’;<\/p>\n
\n constructor(props) {
\n super(props);
\n this.state = {
\n text: ‘First Example’
\n }
\n }<\/p>\n
\n NativeModules.GetData.replaceString(this.state.text, (text) => {
\n this.setState({text});
\n });
\n }<\/p>\n
\n return (
\n <View style={styles.container}>
\n <Text style={styles.welcome}>{this.state.text}<\/Text>
\n <TouchableOpacity>
\n <View style={styles.button}>
\n <Text style={styles.buttonText}
\n onPress={() => { this.buttonClick()}}>Change Text.<\/Text>
\n <\/View>
\n <\/TouchableOpacity>
\n <\/View>
\n );
\n }
\n}<\/p>\n
\n container: {
\n flex: 1,
\n justifyContent: ‘center’,
\n alignItems: ‘center’,
\n backgroundColor: ‘#F5FCFF’,
\n },
\n welcome: {
\n fontSize: 20,
\n textAlign: ‘center’,
\n margin: 10,
\n },
\n instructions: {
\n textAlign: ‘center’,
\n color: ‘#333333’,
\n marginBottom: 5,
\n },
\n button: {
\n backgroundColor: ‘#ff8000’,
\n borderRadius: 4,
\n padding:10
\n },
\n buttonText : {
\n color : ‘#fff’,
\n textAlign:’center’,
\n fontWeight: ‘bold’
\n },
\n});<\/p>\n![\"Screen](\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-11.33.19-AM-300x182.png\")
<\/p>\n![\"Screen](\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-10.59.02-AM-163x300.png\")
<\/p>\n![\"Screen](\"\/blog\/wp-ttn-blog\/uploads\/2017\/02\/Screen-Shot-2017-02-17-at-10.59.14-AM-163x300.png\")
<\/p>\n
\nBridging can also be achieved in Android and react-native in the same way as we have achieved in this blog.<\/p>\n