MetaMask SDK React Native

The MetaMask SDK React Native allows developers to integrate MetaMask seamlessly into React Native applications.

Getting Started

Installation

Install the SDK:

yarn add @metamask/sdk-react-native

iOS Setup

1. Add the following imports to your AppDelegate.m:

#import <React/RCTBundleURLProvider.h>
#import <React/RCTBridge.h>
#import <React/RCTLinkingManager.h>

2. Implement the following method in AppDelegate.m to handle deep links:

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:app openURL:url options:options];
}

3. Add the URL scheme to your Xcode project:

   • Open your project in Xcode.
   • Go to the Info tab.
   • Under URL Types, click the + button to add a new URL type.
   • In the URL Schemes field, add your custom scheme (e.g., yourappscheme).

4. Install CocoaPods dependencies:

cd ios && pod install

Wrap Your Application in the Provider

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { MetaMaskProvider } from '@metamask/sdk-react-native';

const sdkOptions = {
  dappMetadata: {
    name: 'Demo React Native App',
    url: 'https://yourdapp.com',
    iconUrl: 'https://yourdapp.com/icon.png',
    scheme: 'yourappscheme',
  },
  infuraAPIKey: 'YOUR_INFURA_API_KEY', // Optional, but highly recommended for a better user experience
};

const Root = () => (
  <MetaMaskProvider sdkOptions={sdkOptions}>
    <App />
  </MetaMaskProvider>
);

AppRegistry.registerComponent('YourAppName', () => Root);

Use the SDK in Your Components

import { useSDK } from '@metamask/sdk-react-native';
import React from 'react';
import { View, Button, Text } from 'react-native';

const App = () => {
  const { sdk, connected, connecting, provider, chainId, account } = useSDK();

  const connect = async () => {
    try {
      await sdk?.connect();
    } catch (err) {
      console.warn('Failed to connect..', err);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <Button title="Connect" onPress={connect} disabled={connecting} />
      {connected && (
        <View>
          {chainId && <Text>Connected chain: {chainId}</Text>}
          {account && <Text>Connected account: {account}</Text>}
        </View>
      )}
    </View>
  );
};

export default App;

SDK Options

| Option | Type | Description | Mandatory | | ---------------------- | ------ | --------------------------------------- | --------- | | dappMetadata.name | string | Name of your dApp | Yes | | dappMetadata.url | string | URL of your dApp | Yes | | dappMetadata.iconUrl | string | URL of the icon of your dApp | No | | dappMetadata.scheme | string | Custom scheme for your React Native app | Yes | | infuraAPIKey | string | Your Infura API key | No |

SDK Methods

• connect(): Connect to MetaMask.
• connectAndSign({ msg }): Connect to MetaMask and sign a message.
• connectWith(req): Connect to MetaMask with a specific request.
• terminate(): Terminate the MetaMask connection.

Provider Methods

• request(req): Make a request to MetaMask.
• batchRequest(requests): Make batch requests to MetaMask.
• getChainId(): Get the current chain ID.
• getSelectedAddress(): Get the selected address.

Example

Refer to the example folder for more info on how to use the SDK.

Contacts

For additional support, open an issue on our GitHub repository.