Getting Started on a Bare React Native project

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:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
 
const defaultConfig = getDefaultConfig(__dirname);
 
const extraNodeModules = {
  ...defaultConfig.resolver.extraNodeModules,
  ...require("node-libs-react-native"),
  crypto: require.resolve("crypto-browserify"),
  stream: require.resolve("stream-browserify"),
};
 
const config = {
  resolver: {
    extraNodeModules,
  },
};
 
module.exports = mergeConfig(defaultConfig, 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.

import "node-libs-react-native/globals.js";
import "react-native-get-random-values";
 
// 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/smart-contracts @account-kit/infra @account-kit/react-native-signer

Add supporting dependencies

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

npm install @account-kit/signer 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