Here is a better alternative to rn-nodeify

At the beginning of the quick start for Dapps (React Native) it proposes that folks use npx rn-nodeify --install --hack. This is problematic for a couple of reasons:

1. It doesn’t appear to work. I was not able to get it to work despite much effort. I finally gave up after applying sed hacks and many rm -rf node_mdules and pod installs.
2. It’s an ugly hack. (See rn-nodeify author’s remarks). Not that co-opting the bundler to replace all your nodejs modules is not a hack, but at least its a hack that more or less the entire web dev world depends on. And even if rn-nodeify did work, it has consequences and is fragile.

Here is a better way:

Use the new metro bundler to do essentially what browserfy and webpack do. Here’s how I got it to work:

In package.json:

  "dependencies": {
    . . . 
    "@react-native-async-storage/async-storage": "^1.15.17",
    "@walletconnect/react-native-dapp": "^1.7.1",
    "react-native-qrcode-svg": "6.0.6",
    "react-native-randombytes": "^3.6.1",
    "react-native-svg": "9.6.4"
  },
  "devDependencies": {
    . . . 
    "node-libs-react-native": "^1.2.1",
  },

The various react-native* deps are because even though new RN is good about having pod install take care of installing pods for native modules, it doesn’t detect second- and greater order native deps. Note the specific versions. These are the versions that @walletconnect transitively requires. Blindly doing npm install -s react-native-svg for example will result in 2 versions of the SVG package being brought in, which results in a crash at startup.

The important one is the devDependency for node-libs-react-native

Next, create or edit metro.config.js :

module.exports = {
  resolver: {
    extraNodeModules: require("node-libs-react-native")
  },
  . . . 
};

This is the magic: It says: hey, metro, if you see, oh, say import * from "crypto"; and you can’t find crypto, go ask node-libs-react-native, which then hooks up react-native-crypto.

There’s one more little step, which is that Node.js modules often depend on certain globals. You hook these up by adding:

require("node-libs-react-native/globals.js");
 . . . 

at the top of index.js

It was just about that simple. I would strongly encourage to update the documentation for this amazing codebase and enable more folks to get it working faster. rn-nodeify is really an abominable hack, and whereas a better cleaner solution exists, now that the metro bundler has become sufficiently enhanced.

[gate3]

Just putting this here in case anybody needs it… its bootstrapped and ready to go. Already has walletConnect and ethersjs installed.

Bare Workflow https://github.com/weedle-app/weedle-expo-bare-workflow

Managed Workflow https://github.com/weedle-app/weedle-expo-managed-workflow

[aindong]

Just putting this here in case anybody needs it… its bootstrapped and ready to go. Already has walletConnect and ethersjs installed.

Bare Workflow https://github.com/weedle-app/weedle-expo-bare-workflow

Managed Workflow https://github.com/weedle-app/weedle-expo-managed-workflow

Thank you @gate3 this is the best solution reference to follow 😃