Run the fabric example on gesture-handler v3

The fabric example targets the New Architecture, so run it on
gesture-handler v3 (which drops Old Architecture support) while the paper
example stays on v2. Two shared-script changes let the examples use
different majors of a dependency:

- getDependencies resolves each dependency with require.resolve instead
  of a hardcoded node_modules path, so it is hoist-proof: an app pinning
  a divergent major autolinks that version wherever yarn placed it.
- createMetroConfig gains a filterFromCommonApp option that blocks the
  shared example app's copy of a module, so a host bundling on a
  different major resolves its own version, matching the native build.

The fabric example then only declares gesture-handler v3 and passes it
to filterFromCommonApp.

Author: MatiPl01

example/app/scripts/dependencies.js

@@ -1,41 +1,38 @@
 const path = require('path');
 
+const commonAppDir = path.resolve(__dirname, '..');
+
+// Resolve where a dependency actually lives from an app's perspective - its own
+// node_modules, or the monorepo root once yarn hoists it. Using `require.resolve`
+// is hoist-proof, so an app that pins a divergent major (e.g. gesture-handler v3
+// in the fabric example) autolinks that version rather than a guessed path.
+function getRootPath(moduleName, currentAppDir) {
+  try {
+    return path.dirname(
+      require.resolve(`${moduleName}/package.json`, {
+        paths: [currentAppDir, commonAppDir]
+      })
+    );
+  } catch {
+    return path.resolve(currentAppDir, `../../node_modules/${moduleName}`);
+  }
+}
+
 function getDependencies(currentAppDir = '.', excludeCommon = []) {
-  const commonAppDir = path.resolve(__dirname, '..');
   const commonAppPkg = require(path.resolve(commonAppDir, 'package.json'));
   const currentAppPkg = require(path.resolve(currentAppDir, 'package.json'));
 
-  const excludedCommonDeps = new Set(excludeCommon);
-
-  const allDeps = new Set([
-    ...[
-      ...Object.keys(commonAppPkg.dependencies ?? {}),
-      ...Object.keys(commonAppPkg.devDependencies ?? {})
-    ].filter(dep => !excludedCommonDeps.has(dep)),
+  const excluded = new Set(excludeCommon);
+  const names = [
+    ...Object.keys(commonAppPkg.dependencies ?? {}),
+    ...Object.keys(commonAppPkg.devDependencies ?? {}),
     ...Object.keys(currentAppPkg.dependencies ?? {}),
     ...Object.keys(currentAppPkg.devDependencies ?? {})
-  ]);
+  ].filter(name => !excluded.has(name));
 
   const result = {};
-
-  for (const dep of allDeps) {
-    // Find versions in both package.json files
-    const commonVersion =
-      commonAppPkg.dependencies?.[dep] ?? commonAppPkg.devDependencies?.[dep];
-    const currentVersion =
-      currentAppPkg.dependencies?.[dep] ?? currentAppPkg.devDependencies?.[dep];
-
-    if (!commonVersion || !currentVersion || commonVersion === currentVersion) {
-      result[dep] = {
-        root: path.resolve(currentAppDir, `../../node_modules/${dep}`)
-      };
-    } else {
-      // Include from the local node_modules only if the dependency is present
-      // in the current app and versions are different
-      result[dep] = {
-        root: path.resolve(currentAppDir, `node_modules/${dep}`)
-      };
-    }
+  for (const name of new Set(names)) {
+    result[name] = { root: getRootPath(name, currentAppDir) };
   }
 
   return result;

example/app/scripts/metro.js

@@ -4,8 +4,12 @@ const {
   wrapWithReanimatedMetroConfig
 } = require('react-native-reanimated/metro-config');
 
+function blockDir(dir) {
+  return new RegExp(`^${escape(dir + path.sep)}.*$`);
+}
+
 function createMetroConfig(defaultConfig, currentAppDir, options = {}) {
-  const { excludeFromRoot = [] } = options;
+  const { excludeFromRoot = [], filterFromCommonApp = [] } = options;
 
   const monorepoRoot = path.resolve(currentAppDir, '../..');
 
@@ -38,13 +42,23 @@ function createMetroConfig(defaultConfig, currentAppDir, options = {}) {
 
   config.resolver.disableHierarchicalLookup = true;
 
-  if (excludeFromRoot.length > 0) {
-    config.resolver.blockList = excludeFromRoot.map(
-      m =>
-        new RegExp(
-          `^${escape(path.join(monorepoRoot, 'node_modules', m))}\\/.*$`
-        )
-    );
+  const commonAppNodeModules = path.resolve(
+    currentAppDir,
+    '../app/node_modules'
+  );
+  const blockList = [
+    ...excludeFromRoot.map(m =>
+      blockDir(path.join(monorepoRoot, 'node_modules', m))
+    ),
+    // A host app can pin a divergent major of a shared dependency (e.g. the
+    // fabric example on gesture-handler v3). Block the common app's copy so the
+    // bundle resolves the host's own version, matching what the native build links.
+    ...filterFromCommonApp.map(m =>
+      blockDir(path.join(commonAppNodeModules, m))
+    )
+  ];
+  if (blockList.length > 0) {
+    config.resolver.blockList = blockList;
   }
 
   return wrapWithReanimatedMetroConfig(config);

example/fabric/metro.config.js

@@ -3,4 +3,8 @@ const { createMetroConfig } = require('../app/scripts/metro');
 
 const defaultConfig = getDefaultConfig(__dirname);
 
-module.exports = createMetroConfig(defaultConfig, __dirname);
+module.exports = createMetroConfig(defaultConfig, __dirname, {
+  // This example runs gesture-handler v3; resolve it from this app rather than
+  // the v2 copy pinned by the shared example app.
+  filterFromCommonApp: ['react-native-gesture-handler']
+});

example/fabric/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "dependencies": {
     "react-native": "0.85.3",
+    "react-native-gesture-handler": "3.0.2",
     "react-native-sortables": "workspace:*"
   },
   "installConfig": {

yarn.lock

@@ -8499,6 +8499,7 @@ __metadata:
   resolution: "example-fabric@workspace:example/fabric"
   dependencies:
     react-native: "npm:0.85.3"
+    react-native-gesture-handler: "npm:3.0.2"
     react-native-sortables: "workspace:*"
   languageName: unknown
   linkType: soft