Getting started with Account Kit on bare React Native

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

Pre-requisites

• React Native version 0.76 or later
• iOS Minumum Deployment Target: 17.0
• Hermes and Fabric must be enabled (if using expo these are on by default)
• 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.
• 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.

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:

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.

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

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