Skip to content

Getting Started with React Native

Create your app (optional)

If you're starting from scratch, create a new React Native app with Expo. If you already have an app, skip this step.

Create a new Expo app

You can use Expo's create-expo-app to create a blank template Typescript app.

With expo-router
npx --yes create-expo-app@latest my-app --template tabs
cd my-app

Run the app

From your project directory, run one of:

npm run android
npm run ios

Install dependencies

Install the latest version of the Openfort React Native SDK and its required dependencies:

With expo-router
npx --yes expo install expo-router expo-apple-authentication expo-application expo-crypto expo-secure-store expo-constants
npm install react-native-get-random-values @openfort/react-native

Configure Metro

Create or update your metro.config.js to include the necessary Node.js module shims:

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
const resolveRequestWithPackageExports = (context, moduleName, platform) => {
  // Package exports in `jose` are incorrect, so we need to force the browser version
  if (moduleName === "jose") {
    const ctx = {
      ...context,
      unstable_conditionNames: ["browser"],
    };
    return ctx.resolveRequest(ctx, moduleName, platform);
  }
 
  return context.resolveRequest(context, moduleName, platform);
};
 
config.resolver.resolveRequest = resolveRequestWithPackageExports;
 
module.exports = config;

Set up entry point

Create entrypoint.ts. Ensure react-native-get-random-values is imported first. Without it, the library crypto will not be loaded properly and cause an error.

With expo-router
// entrypoint.ts
import "react-native-get-random-values";
import "expo-router/entry";

Also, update your package.json to use the corresponding entry point:

{
  ...
  "main": "entrypoint.ts",
  ...
}

Wrap your app with OpenfortProvider

Add the provider at your root to initialize the SDK.

With expo-router
// app/_layout.tsx
import { OpenfortProvider } from "@openfort/react-native";
import { Slot } from "expo-router";
 
export default function RootLayout() {
 
  return (
    <>
      {/* Your other providers */}
        <OpenfortProvider
          publishableKey="YOUR_PROJECT_PUBLISHABLE_KEY"
          walletConfig={{
            shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
            getEncryptionSession: async () => "<SESSION_ID>"
          }}
        >
          {/* Render nested routes */}
          <Slot />
        </OpenfortProvider>
      {/* Your other providers */}
    </>
  );
}

Next steps