thirdweb React Native SDK

A collection of 100+ React hooks and React Native UI components for your web3 mobile apps, for any EVM-compatible blockchain.

Connect to user’s wallets, interact with smart contracts, sign messages, and utilize common standards such as tokens, NFTs, marketplaces; all with built-in caching, RPC URLs, IPFS gateways, and more.

Open Source

The React Native SDK is open-source. You can view the source code and contribute to it on GitHub.

View on GitHub

Installation

Requirements:

• Android minSdkVersion = 23
• iOS platform >= 13
• XCode > 14

It is recommended that you use a physical device while testing your app, as the emulator/simulator might not support the desired wallets or may not function properly.

Existing Projects

React Native CLI Project

yarn

yarn add 'ethers@^5' @thirdweb-dev/react-native @thirdweb-dev/react-native-compat node-libs-browser react-native-crypto react-native-randombytes react-native-get-random-values react-native-svg react-native-mmkv @react-native-async-storage/async-storage

npm

npm i 'ethers@^5' @thirdweb-dev/react-native @thirdweb-dev/react-native-compat node-libs-browser react-native-crypto react-native-randombytes react-native-get-random-values react-native-svg react-native-mmkv @react-native-async-storage/async-storage

Our wallets package uses the Expo Modules API, please configure it in your app:

npx install-expo-modules@latest

Move into your /ios folder and run the following command to install the ios' pods:

cd ios/ && pod install

React Native Expo Project

We have a dependency on the Coinbase Wallet Mobile SDK to support connecting with Coinbase, this dependency contains custom native code, which breaks support for Expo Go (see issue here). We are working on turning this into an optional dependency but for now you need to prebuild the Expo project:

npx expo prebuild

Now, we can add the dependencies:

yarn

yarn add 'ethers@^5' @thirdweb-dev/react-native @thirdweb-dev/react-native-compat node-libs-browser react-native-crypto react-native-randombytes react-native-get-random-values react-native-svg react-native-mmkv @react-native-async-storage/async-storage

npm

npm i 'ethers@^5' @thirdweb-dev/react-native @thirdweb-dev/react-native-compat node-libs-browser react-native-crypto react-native-randombytes react-native-get-random-values react-native-svg react-native-mmkv @react-native-async-storage/async-storage

Our wallets package uses the Expo Modules API, please configure it in your app:

npx install-expo-modules@latest

Add shims for the crypto nodejs' libraries

React Native is based on JavaScriptCore (part of WebKit) and does not use Node.js or the common Web and DOM APIs. As such, there are many operations missing that a normal web environment or Node.js instance would provide. [1].

For this reason we need to add shims for some of the operations not available in closed out environments like React Native:

In your metro.config.js (please, create one if you don’t have it) add the following to shim the nodejs modules needed:

React Native CLI Project

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const extraNodeModules = require("node-libs-browser");
module.exports = {
  resolver: {
    extraNodeModules,
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

React Native Expo Project

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const extraNodeModules = require("node-libs-browser");
const config = getDefaultConfig(__dirname);
config.resolver.extraNodeModules = extraNodeModules;
config.transformer.getTransformOptions = async () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: true,
  },
});
module.exports = config;

We provide a package that imports all the necessary polyfills for you, please, import this package into your index.js file. Make sure it is at the top of your imports.

// Import polyfills
import "@thirdweb-dev/react-native-compat";

Why are all these packages needed?

As explained in the intro of this doc, we need to shim some of the packages available in Node and web environments. Find below who’s using these packages:

WalletConnect

• WalletConnect uses Node’s crypto package when signing transactions. Since this package is not available in React Native we need an alternative implementation for it and its dependencies, the following packages accomplishes this:
  • node-libs-browser
  • react-native-crypto
  • react-native-randombytes
  • react-native-get-random-values
• Coinbase wallet connector package depends on react-native-mmkv and expo-modules.
• WalletConnect V2 connectors depend on @react-native-async-storage/async-storage.

New Projects

Make sure to have your React Native environment setup before using the template. Please follow React Native's Setting up the development environment

thirdweb CLI

npx thirdweb create --template react-native-typescript-starter

thirdweb CLI Expo

Note that running through Expo Go app currently isn't supported. You need to connect your device and build manually. Use the following command to create an Expo React Native app using thirdweb CLI:

npx thirdweb create --template react-native-expo-starter

React Native CLI

Alternatively you can use the React Native CLI. Note that you need to follow the "Existing Projects -> React Native CLI Project" steps in this guide after executing the following command:

npx react-native init MyRNApp --template react-native-template-typescript

Expo CLI

Alternatively you can use the Expo CLI. Note that you need to follow the "Existing Projects -> React Native Expo Project" steps in this guide after executing the following command:

npx create-expo-app AwesomeProject