Skip to content

[Bug]: @metamask/sdk-react useSDK hook gives [TypeError: connect is not a function (it is undefined)] in React Native Expo app #1303

@andriibilyanskii

Description

@andriibilyanskii

SDK

React-Native

Provide environment information

Hello,
I created new Expo React Native project and trying to connect MetaMask SDK according to this documentation, but useSDK hook gives [TypeError: connect is not a function (it is undefined)] error

The problem is the same as in this issue

import 'expo-dev-client';

import React, {useCallback, useEffect} from 'react';
import {AppState, AppStateStatus, Platform, View, Text, Button} from 'react-native';

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


import * as SplashScreen from 'expo-splash-screen';


SplashScreen.preventAutoHideAsync();

function App() {

    useEffect(() => {
        SplashScreen.hide()
    }, []);

    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(() => {
        console.log(account, chainId)

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

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

    return (
        <View style={{flex: 1, backgroundColor: '#fff'}}>
            <Text>App</Text>

            <Button title={'Connect'} onPress={connectWallet}/>
        </View>
    );
}

export default () => (
    <App/>
);

MetaMask SDK Version

0.33.0

MetaMask Mobile app Version

7.46.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Development build of expo app, start it on device

Describe the Bug

useSDK hook does not provide connect property and is giving this error:
ERROR Failed to connect wallet: [TypeError: connect is not a function (it is undefined)]

Also useSDK hook doesn't have disconnect and ethereum properties

Image Image

Also I tried to use sdk property of useSDK hook, but the same result:

const { sdk } = useSDK()

    // Connect to MetaMask
    const connectWallet = async () => {
        try {
            await (sdk as any).connect()
        } catch (error) {
            console.error("Failed to connect wallet:", error)
        }
    }
Image
2025-06-02.13.42.24.mp4

Expected Behavior

  1. useSDK hook should have connect, disconnect, ethereum properties
  2. It should work as in documentation: https://docs.metamask.io/sdk/quickstart/react-native/

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/andriibilyanskii/MetaMask-SDK-issue

To Reproduce

If reproduction example: https://github.com/andriibilyanskii/MetaMask-SDK-issue

If new project:

  1. Create a new project with https://docs.expo.dev/get-started/create-a-project/
  2. Implement steps from documentation: https://docs.metamask.io/sdk/quickstart/react-native/Full package.json:

{
"name": "myapp",
"main": "index.js",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint",
"build:development:android": "eas build --profile development --platform android --local"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@metamask/sdk-react": "^0.33.0",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"@welldone-software/why-did-you-render": "^10.0.1",
"ethers": "5.7.2",
"expo": "~52.0.43",
"expo-blur": "~14.0.3",
"expo-build-properties": "~0.13.2",
"expo-clipboard": "~7.0.1",
"expo-constants": "~17.0.8",
"expo-crypto": "~14.0.2",
"expo-dev-client": "~5.0.19",
"expo-font": "~13.0.4",
"expo-haptics": "~14.0.1",
"expo-linking": "~7.0.5",
"expo-localization": "~16.0.1",
"expo-media-library": "~17.0.6",
"expo-notifications": "~0.29.14",
"expo-router": "~4.0.20",
"expo-splash-screen": "~0.29.22",
"expo-status-bar": "~2.0.1",
"expo-symbols": "~0.2.2",
"expo-system-ui": "~4.0.9",
"expo-web-browser": "~14.0.2",
"node-libs-expo": "^0.0.3",
"node-libs-react-native": "^1.2.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.9",
"react-native-background-timer": "^2.4.1",
"react-native-gesture-handler": "~2.20.2",
"react-native-get-random-values": "1.8.0",
"react-native-randombytes": "^3.6.1",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.3.0",
"jest": "^29.2.1",
"jest-expo": "~52.0.6",
"react-test-renderer": "18.3.1",
"typescript": "^5.3.3"
},
"private": true
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions