Keep Reanimated deep imports out of web bundles (#4620)

## Description

#4554 gates `Wrap.getAnimatableRef()` on whether Reanimated re-resolves
the animatable ref on update. The check deep-imports
`react-native-reanimated/src/createAnimatedComponent/AnimatedComponent`
and looks for `_refreshComponentRef` on its prototype. It lives in
`reanimatedWrapper.ts`, which every platform loads.

Reanimated has no `exports` map. Its `react-native` field points at
`src/`, but `main` and `module` point at `lib/module`. Bundlers that
ignore the `react-native` field (Vite, webpack) therefore resolve the
package root to `lib/module` and the deep import to `src/`, which is a
second copy of Reanimated. In Vite dev the optimizer leaves the `.tsx`
deep import as a raw import, and
`src/platform-specific/workletsVersion.ts` default-imports a CommonJS
script, so the module graph fails and the app never mounts. In
production the bundle contains every Reanimated module twice. Metro,
including Expo web, keeps `react-native` first and is unaffected.

The check moves to `GestureDetector/refreshesAnimatableRef.ts`, imported
only by the native `Wrap.tsx`. `Wrap.web.tsx` already uses the plain
`Wrap`, so web bundles no longer reach the deep import. Native behaviour
is unchanged.

Fixes #4619.

## Test plan

- Standalone Vite 8 + react-native-web app with one `GestureDetector`,
RNGH 3.4.0: dev server fails with `validate-worklets-version.js does not
provide an export named 'default'`, production bundle 919 kB with 169
Reanimated modules bundled from both `lib/module` and `src/`.
- Same app with this branch built into `node_modules`: dev server
renders and the tap gesture works, production bundle 781 kB with 0
modules from `src/`.
- `yarn test src/__tests__/legacyWrapRef.test.tsx`, `yarn ts-check`,
`yarn lint:js` pass.

Author: m-bert

packages/react-native-gesture-handler/src/__tests__/legacyWrapRef.test.tsx

@@ -2,8 +2,8 @@ import { cleanup, render } from '@testing-library/react-native';
 import React from 'react';
 import { findNodeHandle, View } from 'react-native';
 
+import * as refreshesAnimatableRef from '../handlers/gestures/GestureDetector/refreshesAnimatableRef';
 import { Wrap } from '../handlers/gestures/GestureDetector/Wrap';
-import * as reanimatedWrapper from '../handlers/gestures/reanimatedWrapper';
 import { Gesture, GestureDetector, GestureHandlerRootView } from '../index';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 
@@ -139,7 +139,7 @@ describe('Legacy GestureDetector ref forwarding', () => {
 
     beforeEach(() => {
       refreshSpy = jest.spyOn(
-        reanimatedWrapper,
+        refreshesAnimatableRef,
         'reanimatedRefreshesAnimatableRef'
       );
     });

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/Wrap.tsx

@@ -8,10 +8,8 @@ import {
   resolveHostInstance,
 } from '../../../hostInstance';
 import { tagMessage } from '../../../utils';
-import {
-  Reanimated,
-  reanimatedRefreshesAnimatableRef,
-} from '../reanimatedWrapper';
+import { Reanimated } from '../reanimatedWrapper';
+import { reanimatedRefreshesAnimatableRef } from './refreshesAnimatableRef';
 
 export class Wrap extends React.Component<{
   onGestureHandlerEvent?: unknown;

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/refreshesAnimatableRef.ts

@@ -0,0 +1,26 @@
+// Reanimated resolves `getAnimatableRef()` once, when its ref to the wrapped
+// component attaches. Only versions that re-resolve it on update (their
+// `AnimatedComponent` has `_refreshComponentRef`) can be handed a child's host
+// instance that may change, as the legacy `Wrap` does. The class is not
+// exported, so probe it by subpath, as the v3 detector does for
+// `NativeEventsManager`.
+//
+// Only the native `Wrap` imports this module. The subpath resolves to a second
+// copy of Reanimated under bundlers that ignore its `react-native` field
+// (Vite, webpack), so it must stay out of web bundles.
+let refreshesAnimatableRef = false;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const AnimatedComponent =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
+    require('react-native-reanimated/src/createAnimatedComponent/AnimatedComponent').default;
+  refreshesAnimatableRef =
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    typeof AnimatedComponent?.prototype?._refreshComponentRef === 'function';
+} catch {
+  // Reanimated is missing or older; keep handing Reanimated the Wrap itself.
+}
+
+export function reanimatedRefreshesAnimatableRef() {
+  return refreshesAnimatableRef;
+}

packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts

@@ -132,27 +132,4 @@ if (Reanimated !== undefined && !Reanimated.setGestureState) {
   };
 }
 
-// Reanimated resolves `getAnimatableRef()` once, when its ref to the wrapped
-// component attaches. Only versions that re-resolve it on update (their
-// `AnimatedComponent` has `_refreshComponentRef`) can be handed a child's host
-// instance that may change, as the legacy `Wrap` does. The class is not
-// exported, so probe it by subpath, as the v3 detector does for
-// `NativeEventsManager`.
-let refreshesAnimatableRef = false;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const AnimatedComponent =
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
-    require('react-native-reanimated/src/createAnimatedComponent/AnimatedComponent').default;
-  refreshesAnimatableRef =
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    typeof AnimatedComponent?.prototype?._refreshComponentRef === 'function';
-} catch {
-  // Reanimated is missing or older; keep handing Reanimated the Wrap itself.
-}
-
-export function reanimatedRefreshesAnimatableRef() {
-  return refreshesAnimatableRef;
-}
-
 export { Reanimated, Worklets };