React Native SDK

In this section, you'll learn how to build a React Native SDK using Mopro's native bindings. The process includes the following steps:

1. Generate the binding using the Mopro CLI
2. Integrate the binding into a React Native Package
3. How to install the React Native SDK via npm
4. How to use the package
5. How to run an example app

Generate the bindings using the Mopro CLI

To get started with building Mopro bindings, refer to the Getting Started section. If you’d like to generate custom bindings for your own circuits or proving schemes, see the guide: Rust Setup for Android/iOS Bindings.

Then you will have a MoproAndroidBindings and/or MoproiOSBindings in the project directory.

Integrate the bindings into a React Native Package

1. Clone the SDK template repository:

git clone https://github.com/zkmopro/mopro-react-native-package

2. Replace the generated bindings:

• iOS: Replace the bindings directory MoproiOSBindings with the generated files in the following location:

  • ios/MoproiOSBindings

• Android: Replace the bindings directory MoproAndroidBindings/uniffi and MoproAndroidBindings/jniLibs with your generated files in the following location:

  • android/src/main/java/uniffi
  • android/src/main/jniLibs

3. Define the module API

• iOS:
  • Define the native module API in ios/MoproReactNativePackageModule.swift to match the React Native type. Please refer to Expo - Argument Types.
• Android:
  • Then define the native module API in android/src/main/java/expo/modules/moproreactnativepackage/MoproReactNativePackageModule.kt to match the React Native type. Please refer to Expo - Argument Types.
• React Native:
  • Define React Native's module APIs to pass messages between React Native and your desired platforms.
    • src/MoproReactNativePackageModule.ts
    • src/MoproReactNativePackageView.tsx

How to install the React Native SDK via npm

Use a Node.js package manager in your React Native app to install dependencies. For example:

# npm
npm install https://github.com/zkmopro/mopro-react-native-package # Or change to your own URL
# yarn / pnpm
yarn add https://github.com/zkmopro/mopro-react-native-package # Or change to your own URL

Alternatively, you can manually add it to your package.json:

"dependencies": {
 "mopro-react-native-package": "github:zkmopro/mopro-react-native-package", // Or change to your own URL
}

How to use the package

Here is an example of how to integrate and use this package

import MoproReactNativePackage, { Result } from "mopro-react-native-package";

const circuitInputs = {
    a: [a],
    b: [b],
};

const proofResult: CircomProofResult =
    MoproReactNativePackage.generateCircomProof(
        ZKEY_PATH,
        JSON.stringify(circuitInputs)
    );

const isValid: boolean = await MoproReactNativePackage.verifyProof(
    ZKEY_PATH,
    parsedProofResult
);

console.log("Proof verification result:", isValid);

How to run an example app

• Open the example app that uses the defined react native package in the example/ folder

  cd example

• Install the dependencies

  npm install

• Run on iOS simulator

  npm run ios

  Run on iOS device

  npm run ios:device

• Run on Android emulator/device (if connected) Set the ANDROID_HOME environment variable.

  export ANDROID_HOME=~/Library/Android/sdk/

  Run on Android emulator/device (if connected)

  npm run android