setup-solana-react-native-app

Setup Solana React Native App with MetaMask

When to use

Use this skill when:

• Integrating MetaMask with Solana in a React Native application
• Setting up the required polyfills and metro shims for @metamask/connect-solana
• Building Solana sign and send flows in React Native using invokeMethod
• You need Solana support in React Native where @solana/wallet-adapter-react is not available

Workflow

Step 1: Install dependencies

npm install @metamask/connect-solana @metamask/connect-multichain @solana/web3.js react-native-get-random-values buffer readable-stream @react-native-async-storage/async-storage

@metamask/connect-multichain is a regular dependency of @metamask/connect-solana and is installed transitively — but this skill imports createMultichainClient directly (to configure mobile.preferredOpenLink, which createSolanaClient does not forward), so declare it explicitly to keep strict package managers (pnpm) happy. The SDK warns at runtime if duplicate or mismatched copies are resolved.

Step 2: Create the polyfills file

Create polyfills.ts at the root of your project.

// polyfills.ts
import { Buffer } from 'buffer';

// Buffer — connect-multichain self-polyfills this, but set early as a safety
// net for peer deps (e.g. @solana/web3.js) that may load first.
global.Buffer = Buffer;

// window object — required for correct platform detection and deeplink behaviour.
const eventListeners = new Map<string, Set<EventListener>>();
if (typeof global.window === 'undefined') {
  (global as any).window = {
    location: {
      hostname: 'my-rn-app',
      href: 'https://my-rn-app.local',
    },
    navigator: { product: 'ReactNative' },
    addEventListener: (event: string, listener: EventListener) => {
      if (!eventListeners.has(event)) eventListeners.set(event, new Set());
      eventListeners.get(event)?.add(listener);
    },
    removeEventListener: (event: string, listener: EventListener) => {
      eventListeners.get(event)?.delete(listener);
    },
    dispatchEvent: (_event: Event) => true,
  };
}

// NOTE: Event and CustomEvent are NOT needed for standalone connect-solana —
// the SDK uses eventemitter3 internally. Add them only if using wagmi.