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


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

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 {
std::string sayHello();
#endif /* Cpp_to_RN_hpp */

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


b. Open the 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
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;
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;

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

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

Write a function to wrap the WrapCpp_to_RN() from

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])


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)
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} />
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
export default App;

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.


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: