Getting Started on an Expo project

We would go through the steps to get your environment setup for using Account Kit within a React Native application on Expo.

Upgrade to the latest version of Expo

The first thing we need to do is make sure we're on the latest version of Expo (SDK 52 or later). The reason for this is that we need React Native version 0.76 or higher because it has TextEncoder natively supported.

For more information on upgrading an Expo project, check out the Expo documentation.

npx expo install expo@latest

Then you want to upgrade all dependencies to match the new Expo SDK version.

npx expo install --fix

Set up shims

Once we've got our Expo project setup and running, we need to setup a few shims so we can use crypto libraries in React Native.

Install shim dependencies

npm install --save node-libs-react-native crypto-browserify stream-browserify react-native-get-random-values

Register shim modules in Metro

Create or edit your metro.config.js file in the root of your project so that it includes the following:

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

// The following code ensures we have the necessary
// shims for crypto built into our project
config.resolver.extraNodeModules = {
  ...config.resolver.extraNodeModules,
  ...require("node-libs-react-native"),
  crypto: require.resolve("crypto-browserify"),
  stream: require.resolve("stream-browserify"),
};
 
module.exports = config;

Register global shims

Import the following packages at the top of your App.tsx file so that libraries that depend on globals like crypto have access to them.

import "node-libs-react-native/globals.js";
import "react-native-get-random-values";
 
// rest of App.tsx

Install Account Kit

That's it! Now you can install the packages you want from Account Kit and start building your React Native Account Abstraction app.

npm install -s @account-kit/smart-contracts @account-kit/infra

Install the React Native Signer Package

Prerequisites

There are a few things to note before using the Signer package in your Expo project:

• The Signer package is incompatible with Expo Go and as a result, you'd need to use a Development Build. Check the Expo Development Builds documentation for more information.
• The Signer package requires you to be on React Native's new architecture. For information on how to enable it in your Expo project, check their documentation.

Once the prerequisites are met, you can install the Signer package using the following command:

npm install @account-kit/react-native-signer

Add supporting dependencies

To ensure the Signer package works correctly, you'll need to add the following dependencies to your project:

npm install @account-kit/signer react-native-mmkv zustand abitype

Run a Prebuild!

Now that we've got everything setup, we can run a prebuild to ensure the native modules are properly built and added to your project.

npx expo prebuild --platform android