4. Connect React Native to C++

In this instalment of our React Native with C++ series, we finally hook up ReactNative and C++ in both Android and iOS using our bridge.

5 min readJan 6, 2019

Mobile development is inherently a multi-lingual enterprise. Usually this means writing the same functionality in multiple languages which is a bad practice. In this series I want to explore an interesting technique for simplifying our codebase by utilising the power of C++ to achieve more maintainable cross platform development.

Making the Connection

In our last instalment, we created a simple C++ backend service to connect to and covered how to generate bridging code with Djinni. In this article we complete the connection and finally get ReactNative talking to C++.

Setting up iOS to talk to C++

Open up Xcode to add the bridging files we created in the last article to our project. The following can be a little fiddly if you have not done this before so please be sure to import each file individually or as a multi-select. Don’t import whole folders or this does not work properly.

Let’s start by adding a few groups for organisational purposes. Right click the CppReactNative group and select “New Group”. Create the following groups:

“ObjCBridge”
“Djinni”
“CppSrc”

Now let’s add some files to our groups. Right click each group and then multi-select the files as you add them. This way Xcode makes the correct associations and doesn’t mess around too much with your files. There might be a better way to manage this but this is the best I could work out.

From ObjCBridge right click and multi-select each file within ./djinni/objc/*
Again from ObjCBridge right click and select the file./djinni/cpp/hello_world.hpp
From Djinni right click and multi-select each file within ./node_modules/djinni/support-lib/objc/*
From CppSrc right click and multi-select each file within ./src/cpp

I don’t know why we have to do this to get Xcode to link to the files properly. I also looked at ways to script this and I could not really work out a better way than doing this. If anyone knows a better way to do this or communicate how to do this I would appreciate a comment.

In the end your Xcode asset browser should look like this:

Finally let’s alter our ReactBridge code to use our Objective-C Bridge:

Type Command + R to build and run the project. You should see React Native provide you a message from our C++ Hello World class!

Congratulations! You have just connected React Native with C++!

Setting up Android to talk to C++

Install the NDK

You need the NDK in Android Studio in order to run C++ code from Java on Android.

Navigate to Android Studio -> Preferences -> Appearance & Behaviour -> System Settings -> Android SDK
Select the SDK Tools tab
Check the NDK item in the tools list.
Click the “Apply” button.

Add the NDK path to your project’s `local.properties` file

Open up the local.properties file and ensure the following vars are set to reasonable locations for your SDK and NDK. The following are the default locations on a macOs system:

ndk.dir=/Users/<yourusername>/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/<yourusername>/Library/Android/sdk

Create make files to build our C++ code

First we need to use a make file to specify our build config for the C++ components of our Android build. NDK will pick up this makefile when the build process runs ndk-build.

Let’s create a JNI folder in our Android project.

mkdir -p ./android/app/src/main/jni

Now we can create an Android.mk file there to specify all our dependencies and paths for our C++ code:

We also need to specify the style of compiler we will be using so next to our Android.mk file so let’s do that in an Application.mk file:

Edit the build.gradle file

Next we need to add the Java code that Djinni created for us to our project. We can do this by altering the gradle config file build.gradle. We do the following:

Specify our module name associated with our JNI calls.
Add the new java sources to our project.
Specify where our makefile is for our C++ code as an external build.

Alter React Native Module

Finally we can now alter our HelloWorldModule.java file to call our JNI component.

React Native meet C++

Now if you shut down your terminal from before start the React Native server again by running the following in the React Native root folder:

yarn start

Then giving the green arrow in Android studio a pop. You should now finally see React Native presenting a message from C++ in Android!

Conclusion

Bridging C++ and React Native is not trivial but it does offer a large amount of promise for cross platform code without duplication.

I look forward to implementing lower level audio processing in React Native but with the full power of C++ now at disposal this opens up infinite possibilities for ReactNative moving forward.

You can find the code associated with this article on my github.