React NativeGetting started

Getting started with Account Kit on bare React Native

This guide assumes you already have a Bare React Native app and want to integrate Account Kit. If you are starting a project from scratch, we recommend following the Expo guide instead.

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

Something went wrong!

Set up shims

Once we’ve got our React Native 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:

metro.config.js
1const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
2const path = require("path");
3const projectRoot = __dirname;
4const config = getDefaultConfig(projectRoot);
5
6// Add aliases for file-system import based modules
7const ALIASES = {
8  "@noble/hashes/crypto": path.resolve(
9    projectRoot, // <-- Adjust this as fits your project setup
10    "node_modules/@noble/hashes/crypto.js",
11  ),
12};
13
14config.resolver.extraNodeModules = {
15  ...config.resolver.extraNodeModules,
16  ...require("node-libs-react-native"),
17  crypto: require.resolve("crypto-browserify"),
18  stream: require.resolve("stream-browserify"),
19};
20
21config.resolver.resolveRequest = (context, moduleName, platform) => {
22  if (ALIASES[moduleName]) {
23    return {
24      filePath: ALIASES[moduleName],
25      type: "sourceFile",
26    };
27  }
28  return context.resolveRequest(context, moduleName, platform);
29};
30
31// Important to allow importing package exports
32config.resolver.unstable_enablePackageExports = true;
33
34config.resolver.unstable_conditionNames = [
35  "browser",
36  "require",
37  "react-native",
38];
39
40module.exports = config;

Register global shims

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

index.js
1import "node-libs-react-native/globals.js";
2import "react-native-get-random-values";
3
4// rest of index.js

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 @account-kit/react-native @account-kit/smart-contracts @account-kit/infra

The @account-kit/react-native package is an ESM module. As such, you might have to add the following to your tsconfig.json’s compilerOptions:

1"module": "NodeNext",
2"moduleResolution": "nodenext",

Add supporting dependencies

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

$npm install react-native-mmkv zustand abitype react-native-inappbrowser-reborn

Build and run your project

Now that we’ve got everything setup, we can build our project!

$npx react-native run-android