Skip to main content

React Native

This guide covers setting up MetaMask SDK in your React Native or Expo application. With MetaMask SDK, you can enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile.

Prerequisites​

  • MetaMask Mobile v5.8.1+
  • npm installed

Create Project​

npx react-native@latest init MyProject

Install Dependencies​

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

Configure Metro​

For Expo, first generate the config:

npx expo customize metro.config.js

Update your Metro configuration:

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)

Add Required Imports​

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

Build & Run​

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

Using the SDK​

Here's how to integrate MetaMask SDK in your app:

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
  )
}

Example Projects​