MetaMask / MetaMask/metamask-sdk
[Bug]: @metamask/sdk-react useSDK hook gives [TypeError: connect is not a function (it is undefined)] in React Native Expo app
- Dominant language
- TypeScript
- Stars
- 338
- Forks
- 260
- PR merge metrics
- No merged PRs in 30d
Description
### SDK
React-Native
### Provide environment information
Hello,
I created new Expo React Native project and trying to connect MetaMask SDK according to this [documentation](https://docs.metamask.io/sdk/quickstart/react-native/), but useSDK hook gives [TypeError: connect is not a function (it is undefined)] error
The problem is the same as [in this issue](https://github.com/MetaMask/metamask-sdk/issues/786)
```
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 (
App
);
}
export default () => (
);
```
### 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
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)
}
}
```
https://github.com/user-attachments/assets/0312f59f-0f68-4fc5-9fc3-b50ff2dd7690
### 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
}
Contributor guide
Research direction
Start with the linked reproduction and its package.json, then follow the React Native quickstart and the useSDK entry point for @metamask/sdk-react 0.33.0. Reproduce the Expo development-build behavior and verify whether connect, disconnect, and ethereum are exposed; done means the documented example works or the supported API is clearly documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100