@openfort/react-native NPM

Openfort React native SDK

Install required packages:

Using the package manager of your preference, install the openfort-js react native library, e.g. with yarn: yarn add @openfort/react-native @openfort/openfort-js.

Since react native requires installing native dependencies directly, you also have to install these required dependencies

yarn add buffer react-native-crypto react-native-get-random-values react-native-randombytes stream-browserify react-native-mmkv

Setup your metro config

If you do not already have a metro.config.js, create one with those required extra node modules:

// sample metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  // Add shims for Node.js modules like crypto and stream
  config.resolver.extraNodeModules = {
    crypto: require.resolve('react-native-crypto'),
    stream: require.resolve('stream-browserify'),
    buffer: require.resolve('buffer'),
  };

  return config;
})();

Import `Openfort` at the top of your app

The first file loaded should be Openfort-js polyfills:

import  "@openfort/react-native/polyfills";

This will ensure the correct modules are imported and will ensure openfort-js works properly.

Configure `Openfort`

Configure openfort, the same way that you would with openfort-js

import Openfort from "@openfort/openfort-js";

const openfort = new Openfort({
  baseConfiguration: {
    publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
  },
  shieldConfiguration: {
    shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
  }
});

Check out the documentation here

Render secure WebView

Openfort uses a WebView (from react-native-webview) to operate as a secure environment, managing the private key and executing wallet operations. Learn more.

This WebView needs to always be displayed, it is recommended to put it on top of your app. It is wrapped inside a view with flex: 0

Simply import it from @openfort/react-native

// Sample app/_layout.tsx using expo router
import { Iframe } from  '@openfort/react-native';

export default function RootLayout() {

  return (
    <>
      <Iframe />
      <Slot />
    </>
  );
}