refactor(example): switch to default Metro config monorepo setup

Author: byCedric

apps/example/metro.config.js

@@ -3,23 +3,25 @@ const { getDefaultConfig } = require('expo/metro-config');
 const { FileStore } = require('metro-cache');
 const path = require('path');
 
-const projectRoot = __dirname;
-const workspaceRoot = path.resolve(projectRoot, '../..');
+// Create the default Expo config for Metro
+// This includes the automatic monorepo configuration
+// See: https://docs.expo.dev/guides/monorepos/#automatic-configuration
+const config = getDefaultConfig(__dirname);
 
-const config = getDefaultConfig(projectRoot);
-
-// Since we are using pnpm, we have to setup the monorepo manually for Metro
-// #1 - Watch all files in the monorepo
-config.watchFolders = [workspaceRoot];
-// #2 - Try resolving with project modules first, then workspace modules
-config.resolver.nodeModulesPaths = [
-  path.resolve(projectRoot, 'node_modules'),
-  path.resolve(workspaceRoot, 'node_modules'),
-];
+// You can configure it manually as well, the most important parts are:
+// const projectRoot = __dirname;
+// const workspaceRoot = path.join(__dirname, '..', '..');
+// #1 - Watch all files within the monorepo
+// config.watchFolders = [workspaceRoot];
+// #2 - Try resolving with project modules first, then hoisted workspace modules
+// config.resolver.nodeModulesPaths = [
+//   path.resolve(projectRoot, 'node_modules'),
+//   path.resolve(workspaceRoot, 'node_modules'),
+// ];
 
 // Use turborepo to restore the cache when possible
 config.cacheStores = [
-  new FileStore({ root: path.join(projectRoot, 'node_modules', '.cache', 'metro') }),
+  new FileStore({ root: path.join(__dirname, 'node_modules', '.cache', 'metro') }),
 ];
 
 module.exports = config;