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. Choose the React Native platform, or run

mopro build --platform react-native

Then you will have a MoproReactNativeBindings in the project directory.

Integrate the bindings into a React Native Package

Then, replace the entire bindings directory MoproReactNativeBindings with your generated files in the current folder:

├── android
├── babel.config.js
├── cpp
├── example # Optional: keep this folder
├── ios
├── lib
├── MoproFfiFramework.xcframework
├── node_modules
├── package-lock.json
├── package.json
├── README.md
├── src
├── tsconfig.build.json
├── tsconfig.json
├── turbo.json
└── ubrn.config.yaml

or running e.g.

cp -R \
  MoproReactNativeBindings/android \
  MoproReactNativeBindings/ios \
  MoproReactNativeBindings/src \
  MoproReactNativeBindings/lib \
  MoproReactNativeBindings/MoproFfiFramework.xcframework \
  MoproReactNativeBindings/package.json \
  mopro-react-native-package/

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-ffi": "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 {
    CircomProofResult,
    generateCircomProof,
    ProofLib,
    verifyCircomProof,
} from "mopro-ffi";

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

const res: CircomProofResult = await generateCircomProof(
    ZKEY_PATH,
    JSON.stringify(circuitInputs),
    ProofLib.Arkworks
);

const res: boolean = await verifyCircomProof(
    ZKEY_PATH,
    circomProofResult,
    ProofLib.Arkworks
);

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

note

To learn how to read a .zkey file from an app, please refer to the loadAssets function in the React Native app.

warning

The default bindings are built specifically for the multiplier2 circom circuit. If you'd like to update the circuit or switch to a different proving scheme, please refer to the How to Build the Package section.
Circuit source code: https://github.com/zkmopro/circuit-registry/tree/main/multiplier2
Example .zkey file for the circuit: http://ci-keys.zkmopro.org/multiplier2_final.zkey

And in index.js, for example, replace this with

import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';
+ import { uniffiInitAsync } from 'mopro-ffi';

+ uniffiInitAsync().then(() => {
    AppRegistry.registerComponent(appName, () => App);
+ });

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