Error building React Native app

[phillipnunes]

We are building a React Native app for tickets, where the user will need to scan a QR Code (which is the ticket info, like event name, invitee name, etc) after buying a ticket, and generate a DID using this scanned data. The idea is to use Web5 library to create this wallet/DID for the user in our RN app. I'm kinda new to DID and Web5, so any guidance here will be amazing. Let's talk about the error.

I've installed "@web5/api": "^0.9.3", which I believe is the right lib to create this DID user wallet and added this code in a parent component:

import "react-native-get-random-values";
import { hmac } from "@noble/hashes/hmac";
import { sha256 } from "@noble/hashes/sha256";
import { sha512 } from "@noble/hashes/sha512";
import * as ed from '@noble/ed25519';
import * as secp from '@noble/secp256k1';

ed.etc.sha512Sync = (...m) => sha512(ed.etc.concatBytes(...m));
ed.etc.sha512Async = (...m) => Promise.resolve(ed.etc.sha512Sync(...m));
secp.etc.hmacSha256Sync = (k, ...m) =>
  hmac(sha256, k, secp.etc.concatBytes(...m));
secp.etc.hmacSha256Async = (k, ...m) =>
  Promise.resolve(secp.etc.hmacSha256Sync(k, ...m));

The ed and secp I added by myself since I was having an error and those imports are not in the docs, not sure if it's correct

And added this one in a children's component, just for testing purposes:

[...]
import {Web5} from "@web5/api";

export default function WalletInfo() {
[...]

  const test = async () => {
    const { web5, did: myDid } = await Web5.connect();
    // console.log('web5', web5)
    // console.log('myDid', myDid)
  }

  return (
    <View>
      [...]
      <Button onPress={test} title="AAAAAAA" />
    </View>
  );
}

When I try to build and run the app using Expo, I receive this error in my terminal:

Android Bundling failed 11126ms (node_modules/expo-router/entry.js)
The package at "node_modules/@tbd54566975/dwn-sdk-js/dist/esm/src/utils/encryption.js" attempted to import the Node standard library module "crypto".
It failed because the native React runtime does not include the Node standard library.
Learn more: https://docs.expo.dev/workflow/using-libraries/#using-third-party-libraries

And in my Android, I receive this huge red error screen:

Here is my package.json file:

{
  "name": "cace-mobile",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@noble/hashes": "^1.4.0",
    "@react-navigation/native": "^6.0.2",
    "@tbd54566975/web5-react-native-metro-config": "^1.0.3",
    "@web5/api": "^0.9.3",
    "expo": "~50.0.14",
    "expo-camera": "~14.1.3",
    "expo-crypto": "~12.8.1",
    "expo-device": "~5.9.4",
    "expo-font": "~11.10.3",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.8",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.2",
    "metro-config": "^0.80.9",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.6",
    "react-native-get-random-values": "^1.11.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.4",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "private": true
}

my metro.config.js file:

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const { mergeConfig } = require('metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
const web5Config = require('@tbd54566975/web5-react-native-metro-config');

module.exports = mergeConfig(config, web5Config);

At some moment, I also saw this different version of the same error, while removing and adding the function call, so looks like it's related with this crypto dependency:

 ERROR  [Error: undefined Unable to resolve module crypto from /my/local/path/node_modules/multiformats/src/hashes/sha2.js: crypto could not be found within the project or in these directories:
  node_modules
  1 | // @ts-check
  2 |
> 3 | import crypto from 'crypto'
    |                     ^
  4 | import { from } from './hasher.js'
  5 | import { coerce } from '../bytes.js'
  6 |]

It's a React Native app using Expo, If I remove the const { web5, did: myDid } = await Web5.connect(); the error is gone.

How can I solve this issue?
Thanks!

[blackgirlbytes]

Give me a few to respond to you. I think I know what's going on, but I just want to spin up an example to make sure!

[phillipnunes]

So, after further discussion on TBD's Discord, the best alternative for us now, until this lib is improved to work properly with React Native, is using your Node.js library.

I really appreciate and the guidance and help @blackgirlbytes