chore: Run the fabric example on gesture-handler v3 (#582)

Stacked on #573.

The fabric example targets the New Architecture, so this points it at
gesture-handler v3 (which drops Old Architecture support) while the
paper example stays on v2. It gives the repo a working v3 example on the
New Architecture.

Because the two examples now use different gesture-handler majors, two
resolution fixes are needed, both scoped to the fabric example:

- `react-native.config.js` resolves gesture-handler from the fabric
app's own dependency (hoisted to the monorepo root). The shared
`getDependencies` resolver points a differing-version dep at a local
`node_modules` path that does not exist once v3 is hoisted, which
silently drops the native module from autolinking.
- `metro.config.js` blocks the v2 copy nested under the shared example
app so the JS bundle resolves the same v3 the native build links
against.

Verified on an Android emulator (New Architecture): the full example app
builds, runs, and reorders via drag-and-drop on gesture-handler v3, and
the paper example's v2 resolution is unchanged.

Author: MatiPl01

example/app/jest.config.ts

@@ -1,7 +1,22 @@
+import path from 'path';
 import { type JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest';
 
 import { compilerOptions } from './tsconfig.json';
 
+// react-native-sortables imports gesture-handler too, so it and the app must
+// resolve the same copy for one jest mock to cover both. Resolve this app's own
+// version (v2, which `jestSetup` mocks) hoist-proof via require.resolve: it finds
+// v2 whether it sits in this app's node_modules or the hoisted monorepo root, and
+// never the v3 copy the fabric example pins.
+const gestureHandlerPath = path
+  .dirname(
+    require.resolve('react-native-gesture-handler/package.json', {
+      paths: [__dirname]
+    })
+  )
+  .split(path.sep)
+  .join('/');
+
 const config: JestConfigWithTsJest = {
   clearMocks: true,
   fakeTimers: {
@@ -13,10 +28,7 @@ const config: JestConfigWithTsJest = {
     ...pathsToModuleNameMapper(compilerOptions.paths ?? {}, {
       prefix: '<rootDir>/'
     }),
-    // react-native-sortables is built against gesture-handler v3, but the app's
-    // jest mock targets v2; pin every import to the single mocked instance.
-    '^react-native-gesture-handler$':
-      '<rootDir>/../../node_modules/react-native-gesture-handler'
+    '^react-native-gesture-handler$': gestureHandlerPath
   },
   preset: '@react-native/jest-preset',
   resolver: 'react-native-worklets/jest/resolver.js',

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