Docs

Installation

Requirements

  • Android minSdkVersion = 26
  • iOS platform >= 13
  • XCode > 14
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@^13.9.0' 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 ios required 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:

const { getDefaultConfig } = require("expo/metro-config");
const { mergeConfig } = require("@react-native/metro-config");
 
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const extraNodeModules = require("node-libs-browser");
 
const config = {
  resolver: {
    extraNodeModules: extraNodeModules,
  },
};
 
module.exports = mergeConfig(getDefaultConfig(__dirname), 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.