Skip to main content

Use MetaMask SDK with React Native and Expo

Import MetaMask SDK into your React Native or Expo dapp to enable your users to easily connect to the MetaMask browser extension and MetaMask Mobile.

Prerequisites​

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 the SDK​

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. Update the configuration file​

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 import statements​

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. Prebuild the project​

If you're using Expo, prebuild the project using the following command:

npx expo prebuild

React Native doesn't require prebuilding.

6. Run the project​

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

7. Use the SDK​

Initialize and use the SDK in your React Native or Expo project using the useSDK hook. The following code snippets demonstrate how to use the hook.

Import the hook:

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

Initialize the SDK in your main component:

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 your dapp's state:

useEffect(() => {
  // Use the account and chainId returned by useSDK.
  if (account && chainId) {
    // Handle account and network changes.
  }
}, [account, chainId]);

Disconnect from MetaMask:

const disconnectWallet = async () => {
  await disconnect();
};

Examples​

See the example React Native dapp and the example Expo dapp in the JavaScript SDK GitHub repository for more detailed implementations.