Skip to content
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, follow the Expo guide instead.

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

  • React Native version 0.76 or later
  • iOS minimum deployment target: 17.0
  • Hermes and Fabric must be enabled (if using Expo these are on by default)
  • The authentication package requires React Native's new architecture. For information on how to enable it in your Expo project, see the documentation.
  • The authentication package is incompatible with Expo Go, so you need to use a Development Build. See the Expo Development Builds documentation for more information.

Once the React Native project is set up and running, set up a few shims so you 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 install the packages you want from Smart Wallets and start building your React Native 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 authentication package works correctly, add the following dependencies to your project:

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

Now that everything is set up, build your project!

npx react-native run-android

Move on to app integration!

Was this page helpful?