Using within React Native applications

This hasn't been tested extensively, but it is possible to use Account Kit within a React Native application. We've built a simple example using expo here. This guide assumes you're using Expo, but the same principles should apply to a bare React Native app as well.

Getting Started

Upgrade to the latest Beta version of Expo

We first need to get our environment setup. The first thing we need to do is make sure we're on the latest Beta version of Expo. The reason for this is that we need React Native version 0.74 or higher because it has TextEncoder natively supported.

npx expo install expo@next --fix

Set up shims

Once we've got that setup, 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 and build!

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 @alchemy/aa-alchemy @alchemy/aa-accounts @alchemy/aa-core