Skip to main content


thirdweb logo

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.

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.

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

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

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:

/**
* 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,
},
}),
},
};

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.

Full Reference

React Native SDK