Running the reactNativeDemo gives an error

[iketw]

Describe the bug Downloading the latest from the repo and trying to run the reactNativeDemo throws an error when running yarn android.

Also, links in the README.md file are broken: https://github.com/MetaMask/metamask-sdk/blob/main/README.md?plain=1#L11C20-L11C110

I see you access the DappMetadata using: {sdk._getDappMetadata()?.name} but the _ convention is usually for methods that shouldn't be accessed from the outside:

https://github.com/MetaMask/metamask-sdk/blob/main/packages/examples/reactNativeDemo/src/views/DappView.tsx#L280

Also, the app package.json does not include the libraries described here:

https://docs.metamask.io/wallet/how-to/use-sdk/react-native

To Reproduce Steps to reproduce the behaviour:

1. Go to the reactNativeDemo folder
2. Run yarn install
3. Run yarn android
4. See error: Unable to resolve module hash-base

Expected behaviour The app runs on device

Provide environment information

• Platform: React-Native
• MetaMask SDK Version: 0.5.6
• MetaMask Mobile Version: I don't event get there

Additional context Add any other context about the problem here.

[christopherferreira9]

Hi @iketw . The documentation is deprecated and will be updated in the coming weeks. Can you try to run the reactNativeDemo we have in the repository to see if you also get that error?

[iketw]

https://github.com/MetaMask/metamask-sdk/blob/main/packages/examples/reactNativeDemo/src/views/DappView.tsx#L280

@christopherferreira9 do you mean this one:

https://github.com/MetaMask/metamask-sdk/blob/main/packages/examples/reactNativeDemo ?

That's the one I mention in the issue

[christopherferreira9]

Hi! The line you're referring to is just used for templating. You can write whatever you want in there :D Here's a video of the setup using different templating such as:

<Text style={styles.title}>
    Amazing Dapp - {connected ? 'connected' : 'disconnected'}
</Text>

https://github.com/MetaMask/metamask-sdk/assets/104831203/460a0daa-305b-4bc2-b114-7a852b5eab9b

Also, have you tried cleaning the cache of your project by running react-native start --reset-cache?

[bearsworth]

@christopherferreira9 the demo project doesn't seem to require rn nodeify with the hack : "postinstall": "rn-nodeify --install 'crypto,process,stream,events' --hack" - is this correct?

For someone replicating the demo in a real project, is there some guide to which packages / dev packages we need to run to get started or is it identical to the demo itself and we just use all the same packages?

Thank you

[christopherferreira9]

Hi @bearsworth ! The only dependency required by the MetaMask SDK is the SDK itself. In the near future we'll have a stable version of the ReactNative hooks which should make the experience of using the SDK much smoother. For the time being, all you need from the SDK perspective is @metamask/sdk.

[bearsworth]

@christopherferreira9 - I hope it comes soon. Apparently though I just tried to install in a bare react-native project and there are some extra steps you have to take. For anyone checking back or find these are the steps:

If you use projects with RN > 0.71 such as 0.72 add --legacy-peer-deps to npm installs.

1) Use this command for the packages: npm i -S @react-native-async-storage/async-storage@^1.18.1 ethers@5.7.2 node-libs-react-native@^1.2.1 react-native-background-timer@^2.4.1 react-native-randombytes@^3.6.1 react-native-url-polyfill@^1.3.0

2) Next go to ios folder and pod install all files.

3) Go to your metro config and add these to the config to make crypto and other node modules work:

const config = {
  resolver: {
    extraNodeModules: require('node-libs-react-native'),
  },
};

4) Add this to the very top of your index.js file before anything or the root of the app: import 'node-libs-react-native/globals'; import 'react-native-url-polyfill/auto';

5) Make sure to restart metro and rebuild / start for testing.

[iketw]

Hi @iketw . The documentation is deprecated and will be updated in the coming weeks. Can you try to run the reactNativeDemo we have in the repository to see if you also get that error?

Ok, after much back and forth I managed to run the reactNativeDemo app. I hope the docs are updated promptly. This is one of the most popular wallets out there but it's a bit broken atm :(

We can close this issue now

[andreahaku]

Hi @iketw . The documentation is deprecated and will be updated in the coming weeks. Can you try to run the reactNativeDemo we have in the repository to see if you also get that error?

Ok, after much back and forth I managed to run the reactNativeDemo app. I hope the docs are updated promptly. This is one of the most popular wallets out there but it's a bit broken atm :(

We can close this issue now

We are in the process of updating the documentation. We should have the updated one by the end of the month. Thanks.

[iketw]

Hi @iketw . The documentation is deprecated and will be updated in the coming weeks. Can you try to run the reactNativeDemo we have in the repository to see if you also get that error?

Ok, after much back and forth I managed to run the reactNativeDemo app. I hope the docs are updated promptly. This is one of the most popular wallets out there but it's a bit broken atm :(

We can close this issue now

We are in the process of updating the documentation. We should have the updated one by the end of the month. Thanks.

Thanks for your answer. The end of the month is 20 days out, I feel it's a bit too much for people who have deadlines and want to use the SDK? I understand it takes time but just wanted to share the pain

[christopherferreira9]

We're totally aware of that and we're trying our best to have it ready as soon as possible. I'll close this issue for now, feel free to get back to us at any time!