[Bug]: Expo react native useSdk hook gives [TypeError: connect is not a function (it is undefined)]

[dkoode]

SDK

React-Native

Provide environment information

Hello,

I'm trying to connect my Metamask wallet in the Expo application I developed using the Metamask SDK. Despite following all the necessary steps for Expo mentioned in the documentation at https://docs.metamask.io/wallet/how-to/use-sdk/javascript/react-native/, I'm unable to establish the connection. I'm encountering the following error for the connect function coming from the useSdk hook:

Failed to connect wallet: [TypeError: connect is not a function (it is undefined)]

Despite meticulously following the documentation and investigating the issue, I haven't been able to find a solution.

MetaMask SDK Version

^0.18.0

MetaMask Mobile app Version

7.18.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

npx expo run:android

Describe the Bug

useSdk connect hook is giving this error:

ERROR Failed to connect wallet: [TypeError: connect is not a function (it is undefined)]

Expected Behavior

Connecting the Metamask wallet with an Expo dApp, as specified in the link https://docs.metamask.io/wallet/how-to/use-sdk/javascript/react-native/, involves performing the connect operation.

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

No response

To Reproduce

After creating an Expo application following the steps outlined in the https://docs.expo.dev/get-started/create-a-project/ link, I proceeded to implement the steps provided in the Metamask React Native SDK documentation (https://docs.metamask.io/wallet/how-to/use-sdk/javascript/react-native/) one by one. However, when attempting to establish a connection, I encountered the error I mentioned earlier. Below are the versions I am using:

"@metamask/sdk-react": "^0.18.0",
"@react-native-async-storage/async-storage": "1.21.0",
"ethers": "5.7.2",
"expo": "~50.0.14",
"expo-crypto": "~12.8.1",
"expo-status-bar": "~1.11.1",
"node-libs-expo": "^0.0.3",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-background-timer": "^2.4.1",
"react-native-get-random-values": "1.8.0",
"react-native-randombytes": "^3.6.1",
"react-native-url-polyfill": "^2.0.0"

[bearsworth]

I would try using the example app in expo. I was able to get it to work, but I ran into localStorage error. Let me know if you get the same once you start it.

I opened a bug 2 weeks ago and there has been no update yet, so maybe you can help push for it.

[christopherferreira9]

Hi all!
The SDK does not provide a connect hook but we do provide a hook called sdk which can be used to call connect. This is what it looks like:

const { sdk } = useSDK();

const connect = async () => {
    try {
      const accounts = (await sdk?.connect()) as string[];
      console.log('accounts', accounts);
    } catch (e) {
      console.log('ERROR', e);
    }
};

We currently updating the docs to reflect this change, we're really sorry for the inconvenience.

[andriibilyanskii]

I have the same problem with MetaMask SDK: "@metamask/sdk-react": "^0.33.0"

I created a new project where I am testing the MetaMask SDK according to this documentation

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
}