Skip to main content

React Native

info

This guide is intended for react native projects that utilize @react-native-community/cli without a framework. Visit the Expo page for a guide on using Expo.

To integrate cpp.js into your project using React Native, you can utilize the @cpp.js/plugin-react-native, @cpp.js/plugin-react-native-ios-helper. Start by installing these package with the following command:

npm install @cpp.js/plugin-react-native @cpp.js/plugin-react-native-ios-helper

To enable the plugin, modify the metro.config.js file as shown below.

metro.config.js
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const CppjsMetroPlugin = require('@cpp.js/plugin-metro/metro-plugin.cjs');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
-const config = {};
+const config = {
+    ...CppjsMetroPlugin(getDefaultConfig(__dirname)),
+};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Cpp.js requires a configuration file to work. For a minimal setup, create a cppjs.config.mjs file and add the following content.

cppjs.config.mjs
import getDirName from 'cpp.js/src/utils/getDirName.js';

export default {
    paths: {
        project: getDirName(import.meta.url),
    },
};

Move your C++ code to the src/native directory. For example;

src/native/MySampleClass.h
#pragma once
#include <string>

class MySampleClass {
public:
    static std::string sample() {
        return "Hello World!";
    }
};

Modify the React file to call the c++ function from your React page. For example;

src/App.tsx
import React, { useState, useEffect } from 'react';
import { SafeAreaView, Text, StyleSheet, View} from 'react-native';

+import './native/MySampleClass.h';
+import { initCppJs } from 'cpp.js';

function App(): React.JSX.Element {
+  const [message, setMessage] = useState('compiling ...');

+  useEffect(() => {
+    initCppJs().then(({ MySampleClass }) => {
+        setMessage(MySampleClass.sample());
+    });
+  }, []);

  return (
      <View>
+        <Text>Response from c++ : {message}</Text>
      </View>
  );
}

export default App;

The project is now fully set up and ready to run.

warning

Before proceeding, ensure that you have met all the prerequisites for setting up a working development environment.

Run on iOS​

To install cocoapods packages, run the following command:

cd ios
pod install

You can now run the app on iOS using the following command:

npm run ios

Run on Android​

You can now run the app on Android using the following command:

npm run android
info

Sample Source Code: You can access the sample source code from this link.