Skip to main content

React Native

Get started with MetaMask SDK in your React Native or Expo dapp.

Steps​

1. Create a new project​

Create a new React Native or Expo project using the following commands:

npx react-native@latest init MyProject

2. Install dependencies​

Install the SDK and its dependencies using the following commands:

npm install eciesjs @metamask/sdk-react ethers@5.7.2 @react-native-async-storage/async-storage node-libs-react-native react-native-background-timer react-native-randombytes react-native-url-polyfill react-native-get-random-values

3. Configure Metro​

If you're using Expo, run the following command to create a default Metro configuration file:

npx expo customize metro.config.js

In React Native or Expo, update the default Metro configuration file to the following:

metro.config.js
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config")

const defaultConfig = getDefaultConfig(__dirname)

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    extraNodeModules: {
      ...require("node-libs-react-native"),
    },
  },
}

module.exports = mergeConfig(defaultConfig, config)

4. Add required imports​

Add the following import statements to the React Native or Expo entry file:

index.js or App.tsx
import "node-libs-react-native/globals"
import "react-native-url-polyfill/auto"
import "react-native-get-random-values"

5. Build and run​

Run the React Native or Expo project on Android or iOS using the following commands:

npx react-native run-android
npx react-native run-ios

6. Use the SDK​

Initialize and use the SDK in your React Native or Expo project using the useSDK hook. For example:

import { useSDK } from "@metamask/sdk-react"

function App() {
  const { connect, disconnect, account, chainId, ethereum } = useSDK()

  // Connect to MetaMask
  const connectWallet = async () => {
    try {
      await connect()
    } catch (error) {
      console.error("Failed to connect wallet:", error)
    }
  }

  // Handle state changes
  useEffect(() => {
    if (account && chainId) {
      // Handle account and network changes
    }
  }, [account, chainId])

  // Disconnect wallet
  const disconnectWallet = async () => {
    await disconnect()
  }

  return (
    // Your app UI
  )
}

Examples​

See the following examples on GitHub for more information: