Account Kit

Appearance

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.

WARNING

The Alchemy Signer is not yet supported in React Native applications. For 3rd party signer support in React Native, refer to your signer provider's documentation.

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.

bash
npx expo install expo@next --fix
bash
yarn 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 ​

bash
npm install --save node-libs-react-native crypto-browserify stream-browserify react-native-get-random-values
bash
yarn add 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:

js
// 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.

TIP

If you're using bare React Native, you would add the above imports to your index.js file.

tsx
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.

bash
npm install -s @alchemy/aa-alchemy @alchemy/aa-accounts @alchemy/aa-core
bash
yarn add @alchemy/aa-alchemy @alchemy/aa-accounts @alchemy/aa-core