chore: add some comments to metro config

example/metro.config.js

@@ -8,40 +8,45 @@ const blacklist = require('metro-config/src/defaults/blacklist');
 const root = path.resolve(__dirname, '..');
 const packages = path.resolve(__dirname, '..', 'packages');
 
-const modules = ['@babel/runtime', '@expo/vector-icons']
+// Get the list of dependencies for all packages in the monorepo
+const modules = ['@expo/vector-icons']
   .concat(
     ...fs
+      // List all packages under `packages/`
       .readdirSync(packages)
+      // Ignore hidden files such as .DS_Store
       .filter(p => !p.startsWith('.'))
       .map(p => {
         const pak = JSON.parse(
           fs.readFileSync(path.join(packages, p, 'package.json'), 'utf8')
         );
 
-        const deps = [];
-
-        if (pak.dependencies) {
-          deps.push(...Object.keys(pak.dependencies));
-        }
-
-        if (pak.peerDependencies) {
-          deps.push(...Object.keys(pak.peerDependencies));
-        }
-
-        return deps;
+        // We need to collect list of deps that this package imports
+        // Collecting both dependencies are peerDependencies sould do it
+        return Object.keys({
+          ...pak.dependencies,
+          ...pak.peerDependencies,
+        });
       })
   )
   .sort()
   .filter(
     (m, i, self) =>
+      // Remove duplicates and package names of the packages in the monorepo
       self.lastIndexOf(m) === i && !m.startsWith('@react-navigation/')
   );
 
 module.exports = {
   projectRoot: __dirname,
+
+  // We need to watch the root of the monorepo
+  // This lets Metro find the monorepo packages automatically using haste
+  // This also lets us import modules from monorepo root
   watchFolders: [root],
 
   resolver: {
+    // We need to blacklist `node_modules` of all our packages
+    // This will avoid Metro throwing duplicate module errors
     blacklistRE: blacklist(
       fs
         .readdirSync(packages)
@@ -51,6 +56,8 @@ module.exports = {
         )
     ),
 
+    // When we import a package from the monorepo, metro won't be able to find their deps
+    // We need to specify them in `extraNodeModules` to tell metro where to find them
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, '..', 'node_modules', name);
       return acc;
@@ -63,6 +70,8 @@ module.exports = {
         const assets = '/packages/stack/src/views/assets';
 
         if (req.url.startsWith(assets)) {
+          // When an asset is imported outside the project root, it has wrong path on Android
+          // This happens for the back button in stack, so we fix the path to correct one
           req.url = req.url.replace(
             assets,
             '/assets/../packages/stack/src/views/assets'
@@ -75,7 +84,7 @@ module.exports = {
   },
 
   transformer: {
-    getTransformOptions: async () => ({
+    getTransformOptions: () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: true,

example/package.json

@@ -16,22 +16,17 @@
     "color": "^3.1.2",
     "expo": "^36.0.2",
     "expo-asset": "~8.0.0",
-    "query-string": "^6.9.0",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "~1.5.3",
-    "react-native-iphone-x-helper": "^1.2.1",
     "react-native-paper": "^3.4.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
     "react-native-screens": "^2.0.0-alpha.22",
     "react-native-tab-view": "2.11.0",
     "react-native-unimodules": "^0.7.0",
-    "react-native-web": "^0.11.7",
-    "scheduler": "^0.18.0",
-    "shortid": "^2.2.15",
-    "use-subscription": "^1.3.0"
+    "react-native-web": "^0.11.7"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",