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]

1 const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
2 const path = require("path");
3 const projectRoot = __dirname;
4 const config = getDefaultConfig(projectRoot);
5 
6 // Add aliases for file-system import based modules
7 const 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 
14 config.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 
21 config.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
32 config.resolver.unstable_enablePackageExports = true;
33 
34 config.resolver.unstable_conditionNames = [
35   "browser",
36   "require",
37   "react-native",
38 ];
39 
40 module.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]

1 import "node-libs-react-native/globals.js";
2 import "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