feat: use resolve aliases to handle crypto package resolution

examples/react-native-bare-example/android/app/build.gradle

@@ -11,9 +11,9 @@ react {
     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
     // root = file("../../")
     //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
+    reactNativeDir = file("../../../../node_modules/react-native")
     //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
+    codegenDir = file("../../../../node_modules/@react-native/codegen")
     //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
     // cliFile = file("../../node_modules/react-native/cli.js")
 

examples/react-native-bare-example/android/settings.gradle

@@ -1,6 +1,6 @@
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'ReactNativeBareExample'
 include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
+includeBuild('../../../node_modules/@react-native/gradle-plugin')

examples/react-native-bare-example/metro.config.js

@@ -10,6 +10,14 @@ const config = getDefaultConfig(projectRoot);
 
 config.watchFolders = [workspaceRoot, projectRoot];
 
+// Add aliases for file-system import based modules
+const ALIASES = {
+	"@noble/hashes/crypto": path.resolve(
+		workspaceRoot,
+		"node_modules/@noble/hashes/crypto.js"
+	),
+};
+
 // to the real shared packages name.
 
 // config.watchFolders = [projectRoot, ...Object.values(monorepoPackages)];
@@ -20,9 +28,21 @@ config.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, 'node_modules'),
   path.resolve(workspaceRoot, 'account-kit/rn-signer/node_modules'),
 ];
+
 // Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 config.resolver.disableHierarchicalLookup = true;
 
+// Default to file-based module resolution for file-system import based modules
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+	if (ALIASES[moduleName]) {
+		return {
+			filePath: ALIASES[moduleName],
+			type: "sourceFile",
+		};
+	}
+	return context.resolveRequest(context, moduleName, platform);
+};
+
 config.resolver.extraNodeModules = {
   ...config.resolver.extraNodeModules,
   ...require('node-libs-react-native'),

examples/react-native-expo-example/metro.config.js

@@ -8,6 +8,14 @@ const monorepoRoot = path.resolve(projectRoot, "../..");
 
 const config = getDefaultConfig(projectRoot);
 
+// Add aliases for file-system import based modules
+const ALIASES = {
+	"@noble/hashes/crypto": path.resolve(
+		monorepoRoot,
+		"node_modules/@noble/hashes/crypto.js"
+	),
+};
+
 // 1. Watch all files within the monorepo
 config.watchFolders = [projectRoot, monorepoRoot];
 
@@ -21,9 +29,20 @@ config.resolver.nodeModulesPaths = [
 // Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 config.resolver.disableHierarchicalLookup = true;
 
+// Default to file-based module resolution for file-system import based modules
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+	if (ALIASES[moduleName]) {
+		return {
+			filePath: ALIASES[moduleName],
+			type: "sourceFile",
+		};
+	}
+	return context.resolveRequest(context, moduleName, platform);
+};
+
 config.resolver.extraNodeModules = {
 	...config.resolver.extraNodeModules,
-	crypto: require.resolve("react-native-get-random-values"),
+	crypto: require.resolve('crypto-browserify'),
 	stream: require.resolve("stream-browserify"),
 };
 

examples/react-native-expo-example/package.json

@@ -9,10 +9,11 @@
 		"web": "expo start --web"
 	},
 	"dependencies": {
-		"@account-kit/react": "4.16.0",
-		"@account-kit/react-native": "4.16.0",
-		"@account-kit/react-native-signer": "4.16.0",
-		"@account-kit/signer": "4.16.0",
+		"@account-kit/react": "4.17.0",
+		"@account-kit/react-native": "4.17.0",
+		"@account-kit/react-native-signer": "4.17.0",
+		"@account-kit/signer": "4.17.0",
+		"@noble/hashes":"1.7.1",
 		"expo": "~52.0.18",
 		"expo-build-properties": "~0.13.2",
 		"expo-constants": "~17.0.3",

site/pages/react-native/getting-started/getting-started-expo.mdx

@@ -78,6 +78,16 @@ Create or edit your `metro.config.js` file in the root of your project so that i
 ```js [metro.config.js]
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+const projectRoot = __dirname;
+
+// Add aliases for file-system import based modules
+const ALIASES = {
+  "@noble/hashes/crypto": path.resolve(
+    projectRoot, // <-- Adjust this as fits your project setup
+    "node_modules/@noble/hashes/crypto.js"
+  ),
+};
 
 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
@@ -91,6 +101,25 @@ config.resolver.extraNodeModules = {
   stream: require.resolve("stream-browserify"),
 };
 
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (ALIASES[moduleName]) {
+    return {
+      filePath: ALIASES[moduleName],
+      type: "sourceFile",
+    };
+  }
+  return context.resolveRequest(context, moduleName, platform);
+};
+
+// The `account-kit/react-native` and it's supoorting packages leverages package.json `exports` which is not (yet) suported by default in Metro.
+// we can enable this support using:
+config.resolver.unstable_enablePackageExports = true;
+config.resolver.unstable_conditionNames = [
+  "browser",
+  "require",
+  "react-native",
+];
+
 module.exports = config;
 ```
 
@@ -178,25 +207,6 @@ Then add the plugin to your `app.json`:
 }
 ```
 
-## Update your metro config
-
-The `account-kit/react-native` and it's supoorting packages leverages package.json `exports` which is not (yet) suported by default in Metro.
-
-Update your `metro.config.js` to add this support using:
-
-```js [metro.config.js]
-// ... rest of metro config
-config.resolver.unstable_enablePackageExports = true;
-
-config.resolver.unstable_conditionNames = [
-  "browser",
-  "require",
-  "react-native",
-];
-// ... rest of metro config
-module.exports = config;
-```
-
 ## Run a Prebuild!
 
 Now that we've got everything setup, we can run a prebuild to ensure the native modules are properly built and added to your project.

site/pages/react-native/getting-started/getting-started-rn-bare.mdx

@@ -39,23 +39,45 @@ Create or edit your `metro.config.js` file in the root of your project so that i
 
 ```js [metro.config.js]
 const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const path = require("path");
+const projectRoot = __dirname;
+const config = getDefaultConfig(projectRoot);
+
+// Add aliases for file-system import based modules
+const ALIASES = {
+  "@noble/hashes/crypto": path.resolve(
+    projectRoot, // <-- Adjust this as fits your project setup
+    "node_modules/@noble/hashes/crypto.js"
+  ),
+};
 
-const defaultConfig = getDefaultConfig(__dirname);
-
-const extraNodeModules = {
-  ...defaultConfig.resolver.extraNodeModules,
+config.resolver.extraNodeModules = {
+  ...config.resolver.extraNodeModules,
   ...require("node-libs-react-native"),
   crypto: require.resolve("crypto-browserify"),
   stream: require.resolve("stream-browserify"),
 };
 
-const config = {
-  resolver: {
-    extraNodeModules,
-  },
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (ALIASES[moduleName]) {
+    return {
+      filePath: ALIASES[moduleName],
+      type: "sourceFile",
+    };
+  }
+  return context.resolveRequest(context, moduleName, platform);
 };
 
-module.exports = mergeConfig(defaultConfig, config);
+// Important to allow importing package exports
+config.resolver.unstable_enablePackageExports = true;
+
+config.resolver.unstable_conditionNames = [
+  "browser",
+  "require",
+  "react-native",
+];
+
+module.exports = config;
 ```
 
 ### Register global shims
@@ -85,6 +107,16 @@ yarn add @account-kit/react-native @account-kit/smart-contracts @account-kit/inf
 
 :::
 
+:::tip
+The `@account-kit/react-native` package is an ESM module. As such, you might have to add the following to your `tsconfig.json`'s `compilerOptions`:
+
+```json
+"module": "NodeNext",
+"moduleResolution": "nodenext",
+```
+
+:::
+
 ### Add supporting dependencies
 
 To ensure the Signer package works correctly, you'll need to add the following dependencies to your project:
@@ -101,19 +133,6 @@ yarn add react-native-mmkv zustand abitype react-native-inappbrowser-reborn
 
 :::
 
-## Update your metro config
-
-The `account-kit/react-native` and it's supoorting packages leverages package.json `exports` which is not (yet) suported by default in Metro.
-
-Update your `metro.config.js` to add this support using:
-
-```js [metro.config.js]
-// ... rest of metro config
-config.resolver.unstable_enablePackageExports = true;
-// ... rest of metro config
-module.exports = config;
-```
-
 ## Build and run your project
 
 Now that we've got everything setup, we can build our project!