Alchemy Logo

Getting started with Smart Wallets on bare React Native

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

Here are the steps to get your environment setup for using Smart Wallets within a Bare React Native application.

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

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.

npm install --save node-libs-react-native crypto-browserify stream-browserify react-native-get-random-values

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 path = require("path");
const fs = require("fs");
const projectRoot = __dirname; // <-- Adjust this as fits your project setup
const config = getDefaultConfig(projectRoot);
 
// Add aliases for file-system import based modules
const ALIASES = {
  "@noble/hashes/crypto": path.resolve(
    projectRoot,
    "node_modules/@noble/hashes/crypto.js",
  ),
  "@sinclair/typebox": path.resolve(
    projectRoot,
    "node_modules/@sinclair/typebox/build/cjs/index.js",
  ),
};
 
config.resolver.extraNodeModules = {
  ...config.resolver.extraNodeModules,
  ...require("node-libs-react-native"),
  crypto: require.resolve("crypto-browserify"),
  stream: require.resolve("stream-browserify"),
};
 
config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (ALIASES[moduleName]) {
    return {
      filePath: ALIASES[moduleName],
      type: "sourceFile",
    };
  }
 
  // Handle .js/.jsx extensions on TypeScript files
  if (
    (moduleName.startsWith(".") || moduleName.startsWith("/")) &&
    (moduleName.endsWith(".js") || moduleName.endsWith(".jsx"))
  ) {
    const moduleFilePath = path.resolve(
      context.originModulePath,
      "..",
      moduleName,
    );
 
    // if the file exists, we won't remove extension, and we'll fall back to normal resolution.
    if (!fs.existsSync(moduleFilePath)) {
      return context.resolveRequest(
        context,
        moduleName.replace(/\.[^/.]+$/, ""),
        platform,
      );
    }
  }
 
  return context.resolveRequest(context, moduleName, platform);
};
 
// Important to allow importing package exports
config.resolver.unstable_enablePackageExports = true;
 
config.resolver.unstable_conditionNames = [
  "browser",
  "require",
  "react-native",
];
 
module.exports = config;

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

That's it! Now you can install the packages you want from Smart Wallets 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:

"module": "NodeNext",
"moduleResolution": "nodenext",

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

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

npx react-native run-android

Move on to app integration!

Was this page helpful?