Getting Started

Using your favorite package manager or expo, install all the require dependencies

npx expo install thirdweb @thirdweb-dev/react-native-adapter

Since react native requires installing native dependencies directly, you also have to install these required peer dependencies:

npx expo install react-native-get-random-values @react-native-community/netinfo expo-application @react-native-async-storage/async-storage expo-web-browser expo-linking react-native-aes-gcm-crypto react-native-quick-crypto amazon-cognito-identity-js @coinbase/wallet-mobile-sdk react-native-mmkv react-native-svg @react-native-clipboard/clipboard

Here's an explanation of each peer dependency and why its needed:

// needed for wallet connect
react-native-get-random-values
@react-native-community/netinfo
expo-application
 
// needed wallet connect + in-app wallet
@react-native-async-storage/async-storage
 
// needed for inapp wallet
expo-web-browser // for oauth flows
amazon-cognito-identity-js // for authentication
react-native-aes-gcm-crypto // for encryption
react-native-quick-crypto@0.7.0-rc.6 // for fast hashing
 
// optional for coinbase wallet
@coinbase/wallet-mobile-sdk
react-native-mmkv

If you don't already have a metro.config.file.js in your project, you can create one by running:

npx expo customize metro.config.js

Then, you need to add 2 properties to the metro resolver: unstable_enablePackageExports and unstable_conditionNames. This is to tell metro to resolve named exports properly.

// file: metro.config.js
 
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
// ADD THESE 2 PROPERTIES
config.resolver.unstable_enablePackageExports = true;
config.resolver.unstable_conditionNames = [
  "react-native",
  "browser",
  "require",
];
 
module.exports = config;

Simply import the package in the entrypoint of your app before any other import. This will polyfill all the required functionality needed.

// file: App.tsx
 
// this needs to be imported before anything else
import "@thirdweb-dev/react-native-adapter";
// ... the rest of your app

If you're using expo-router, you need to polyfill before the router entry:

Create an index.js file at the root of the repo. This will be the new entrypoint to your app, ensuring the polyfills happen before any routing.

// file: index.js
 
// this needs to be imported before expo-router
import "@thirdweb-dev/react-native-adapter";
import "expo-router/entry";

Now you can replace expo-router/entry with ./index.js as your main entrypoint.

// file: package.json
 
"main": "./index.js",

Once all the setup above is all done, you can use the most of functionality in the thirdweb package out of the box, without having to do any react native specific code.

This means that you can follow all the React documentation and expect it all to be exactly the same.

Examples:

// import thirdweb hooks, extensions, provider and wallets as usual
import { ThirdwebProvider } from "thirdweb/react";
import { balanceOf, claimTo } from "thirdweb/extensions/erc721";
import { inAppWallet } from "thirdweb/wallets/in-app";