SECRET OF CSS

Native Modules: Export C++ Function to React Native | by Wynne Tran | Jul, 2022


Call Swift from React Native and more

Today, I continue sharing my experience with the Native Module and C++.

Since we will see a lot of C/C++ libraries writing for the mobile platforms, we need to implement them to our iOS or React Native application. That is why I want to write an article on how to export a function from C++ to React Native, which is easy to understand and saves time for beginners. I will start with a new react native application

1. Create a new react native app, open your terminal and run

npx react-native init NativeModules

2. Open Xcode and navigate to NativeModules/ios/NativeModule.xcworkspace

0*32d8JlGHwOtVZapN

3. Working on the C++ side

Create a new C++ file and name it Cpp_to_RN.cpp

When we create a new C++ file, Xcode will create a header file Cpp_to_RN.hpp for us

1*uf2usS1Eod6g hMFdfU57A
1*hNy2A2h5sKTMmtvqQ6S1nw

First, open the “Cpp_to_RN.hppfile, and create a class that includes a function without the body.

#ifndef Cpp_to_RN_hpp
#define Cpp_to_RN_hpp
#include <stdio.h>
#include <string>
class Cpp_to_RN {
public:
std::string sayHello();
};
#endif /* Cpp_to_RN_hpp */
1*0P1yPD90rSXW3skOsmMLWg

Then open the Cpp_to_RN.cpp file and write a simple function “sayHello()

#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
return "Hello from CPP";
}
1*w lY3hNLdNhfg9boSNU1Ig

4. Working on Wrapping C++ file.

To wrap the C++ files and export them to IOS (swift) side

a. Create an Objective C file and name it Cpp_to_RN.m

Rename the Cpp_to_RN.m to Cpp_to_RN.mm

1*aCOtBuUwsA1jyTTcYJRRsQ

b. Open the WrapCpp_to_RN.mm file and write the body content that will wrap the function sayHello from the C++ file.

#import <Foundation/Foundation.h>
#import "WrapCpp_to_RN.h"
#import "Cpp_to_RN.hpp"
@implementation WrapCpp_to_RN- (NSString *) sayHello {
Cpp_to_RN fromCPP;
std::string helloWorldMessage = fromCPP.sayHello();
return [NSString
stringWithCString:helloWorldMessage.c_str()
encoding:NSUTF8StringEncoding];
}
@end
1*i7j3hlKAKV 2Co9jPRJ6Qw

c. Create a header file and name it WrapCpp_to_RN.h

Export the wrapSayHello function to the Swift file

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end
1*UgUFFh7cq9nBi 5 ay6cFA

5. Working on iOS (Swift) side

To Export the C++ function to React Native

a. Create a Swift file and name it SendCpp_to_RN.swift

Note: Xcode will ask us to create a NativeModules-Bridging-Header.h file for us.

Create a class SendCpp_to_RN and declare it as NSObject

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Write a function requiresMainQueueSetup() to prevent warning when we run the application

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

Write a function to wrap the WrapCpp_to_RN() from WrapCpp_to_RN.mm

import Foundation@objc(SendCpp_to_RN)
class SendCpp_to_RN : NSObject {

@objc static func requiresMainQueueSetup() -> Bool {
return false
}

@objc func fromCpp(_ successCallback: RCTResponseSenderBlock) -> Void {
successCallback([NSNull(), WrapCpp_to_RN().wrapSayHello() as Any])
}

}
1*f5c2gkGL2v4OXgkTN4e3ag

b. Export a wrap function in Swift file to React Native

Create an Objective C file to export the Swift class and its function using Callback

#import <React/RCTBridgeModule.h>
#import <Foundation/Foundation.h>
#import "UIKit/UIKit.h"
@interface RCT_EXTERN_MODULE(SendCpp_to_RN, NSObject)
RCT_EXTERN_METHOD(fromCpp:(RCTResponseSenderBlock)successCallback)@end
1*mkJSslkLzNyqYCkG Lhhpw

c. Connect Swift to React Native, open the NativeModules-Bridging-Header.h file

#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"

6. Working on React Native side

Call the Swift class and its functions

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';
const App = () => {
const onPress = () => {
const {SendCpp_to_RN} = NativeModules;
SendCpp_to_RN.fromCpp((_err, res) => console.log(res));
};
return (
<View style={styles.container}>
<Text> Practice !</Text>
<Button title="C++ to React Native" color="#841584" onPress={onPress} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
1*CR44CQrdZdWSjmTUrSTz3Q

And we are done, just run the application

react-native run-ios

Or just click the button “run” on Xcode and see what we have done.

1*bL2jK

I hope my article is helpful to you, thank you for reading time.

Here is a GitHub link for all tips on Native Module, please reach the branch you want to clone it.





News Credit

%d bloggers like this: