[General] Listen for Reanimated events directly, without createAnimatedComponent when possible (#3837)

## Description

Shouldn't need
software-mansion/react-native-reanimated#8655 to
work properly

Instead of using `createAnimatedComponent`, which does a lot more stuff
other than setting up events, we can set up events ourselves using
Reanimated's `NativeEventsManager` directly.

The implementation in the PR should be independent of the Reanimated
version being used, as long as it's a relatively modern one.

## Test plan

<details>
<summary>Tested on this stress-test</summary>

```jsx
import React, { Profiler, useEffect, useRef } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
// import { PerfMonitor } from 'react-native-gesture-handler/src/v3/PerfMonitor';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const DATA = new Array(500).fill(null).map((_, i) => `Item ${i + 1}`);

function Item() {
  const translateX = useSharedValue(0);

  const style = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
    };
  });

  const pan = usePanGesture({
    // disableReanimated: true,
    onUpdate: (event) => {
      'worklet';
      console.log('pan onUpdate', event.handlerData.changeX);
    },
    onStart: () => {
      'worklet';
      console.log('pan onStart', _WORKLET);
    },
    onEnd: () => {
      'worklet';
      console.log('pan onEnd');
    },
    onBegin: () => {
      'worklet';
      console.log('pan onBegin');
    },
    onFinalize: () => {
      'worklet';
      console.log('pan onFinalize');
    },
    onTouchesDown: () => {
      'worklet';
      console.log('pan onTouchesDown');
    },
  });

  return (
    <View style={{ height: 80, padding: 16, backgroundColor: 'gray' }}>
      <GestureDetector gesture={pan}>
        {/* <View collapsable={false} style={{opacity: 0.5}}> */}
        <Animated.View
          style={[
            { backgroundColor: 'red', height: '100%', aspectRatio: 1 },
            style,
          ]}
        />
        {/* </View> */}
      </GestureDetector>
    </View>
  );
}

function Benchmark() {
  return (
    <ScrollView
      style={{ flex: 1 }}
      contentContainerStyle={{ flexGrow: 1, gap: 8 }}>
      {DATA.map((_, index) => (
        <Item key={index} />
      ))}
    </ScrollView>
  );
}

const TIMES = 35;

export default function EmptyExample() {
  const times = useRef<number[]>([]).current;
  const [visible, setVisible] = React.useState(false);

  useEffect(() => {
    if (!visible && times.length < TIMES) {
      setTimeout(() => {
        setVisible(true);
      }, 24);
    }

    if (times.length === TIMES) {
      // calculate average, but remove highest and lowest
      const sortedTimes = [...times].sort((a, b) => a - b);
      sortedTimes.shift();
      sortedTimes.shift();
      sortedTimes.pop();
      sortedTimes.pop();
      const avgTime =
        sortedTimes.reduce((sum, time) => sum + time, 0) / sortedTimes.length;

      console.log(`Average render time: ${avgTime} ms`);

      // console.log(JSON.stringify(PerfMonitor.getMeasures(), null, 2));
      // PerfMonitor.clear();
    }
  }, [visible]);

  return (
    <View style={styles.container}>
      {visible && (
        <Profiler
          id="v3"
          onRender={(_id, _phase, actualDuration) => {
            times.push(actualDuration);
            setTimeout(() => {
              setVisible(false);
            }, 24);
          }}>
          <Benchmark />
        </Profiler>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

```
</details>

Before: 614ms, after: 576ms

---------

Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>

Author: j-piasecki

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

@@ -29,6 +29,19 @@ export type ReanimatedHandler<THandlerData> = {
   context: ReanimatedContext<THandlerData>;
 };
 
+export type NativeEventsManager = new (component: {
+  props: Record<string, unknown>;
+  _componentRef: React.Ref<unknown>;
+  // Removed in https://github.com/software-mansion/react-native-reanimated/pull/6736
+  // but we likely want to keep it for compatibility with older Reanimated versions
+  _componentViewTag: number;
+  getComponentViewTag: () => number;
+}) => {
+  attachEvents: () => void;
+  detachEvents: () => void;
+  updateEvents: (prevProps: Record<string, unknown>) => void;
+};
+
 let Reanimated:
   | {
       default: {
@@ -38,6 +51,7 @@ let Reanimated:
           options?: unknown
         ): ComponentClass<P>;
       };
+      NativeEventsManager: NativeEventsManager;
       useHandler: <THandlerData>(
         handlers: GestureCallbacks<THandlerData>
       ) => ReanimatedHandler<THandlerData>;

packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.tsx

@@ -1,3 +1,4 @@
 import RNGestureHandlerDetectorNativeComponent from '../../specs/RNGestureHandlerDetectorNativeComponent';
+export type { NativeProps as RNGestureHandlerDetectorNativeComponentProps } from '../../specs/RNGestureHandlerDetectorNativeComponent';
 const HostGestureDetector = RNGestureHandlerDetectorNativeComponent;
 export default HostGestureDetector;

packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx

@@ -6,8 +6,8 @@ import {
   AnimatedNativeDetector,
   NativeDetectorProps,
   nativeDetectorStyles,
-  ReanimatedNativeDetector,
 } from './common';
+import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
 
 export function NativeDetector<THandlerData, TConfig>({
   gesture,

packages/react-native-gesture-handler/src/v3/detectors/ReanimatedNativeDetector.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  NativeEventsManager,
+  Reanimated,
+} from '../../handlers/gestures/reanimatedWrapper';
+import HostGestureDetector, {
+  type RNGestureHandlerDetectorNativeComponentProps,
+} from './HostGestureDetector';
+import { findNodeHandle } from 'react-native';
+
+let NativeEventsManagerImpl = Reanimated?.NativeEventsManager;
+
+if (!NativeEventsManagerImpl) {
+  // When Reanimated.NativeEventsManager is undefined, it may be that an older
+  // Reanimated version is used which doesn't export NativeEventsManager, or
+  // Reanimated is not installed at all. For the older versions, try to import
+  // NativeEventsManager by a subpath. Otherwise, it will stay undefined.
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    NativeEventsManagerImpl =
+      // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
+      require('react-native-reanimated/src/createAnimatedComponent/NativeEventsManager').NativeEventsManager;
+  } catch {
+    // fail silently
+  }
+}
+
+type WorkletProps = Pick<
+  RNGestureHandlerDetectorNativeComponentProps,
+  | 'onGestureHandlerReanimatedStateChange'
+  | 'onGestureHandlerReanimatedEvent'
+  | 'onGestureHandlerReanimatedTouchEvent'
+>;
+
+function LeanReanimatedNativeDetector(
+  props: RNGestureHandlerDetectorNativeComponentProps
+) {
+  const prevProps = useRef<WorkletProps>(null);
+  const eventManager = useRef<InstanceType<NativeEventsManager> | null>(null);
+  const viewRef = useRef<any>(null);
+
+  const {
+    onGestureHandlerReanimatedStateChange,
+    onGestureHandlerReanimatedEvent,
+    onGestureHandlerReanimatedTouchEvent,
+    ...restProps
+  } = props;
+
+  const reaProps: WorkletProps = useMemo(
+    () => ({
+      onGestureHandlerReanimatedStateChange,
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerReanimatedEvent,
+      // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
+      onGestureHandlerReanimatedTouchEvent,
+    }),
+    [
+      onGestureHandlerReanimatedEvent,
+      onGestureHandlerReanimatedStateChange,
+      onGestureHandlerReanimatedTouchEvent,
+    ]
+  );
+
+  useEffect(() => {
+    const nativeTag = findNodeHandle(viewRef.current) ?? -1;
+    // @ts-expect-error Reanimated expects __nativeTag to be present on the ref
+    viewRef.__nativeTag = nativeTag;
+    // @ts-expect-error NativeEventsManager should be defined here, if it isn't, we should
+    // go the fallback way and use Reanimated's createAnimatedComponent
+    eventManager.current = new NativeEventsManagerImpl({
+      props: reaProps,
+      _componentRef: viewRef,
+      _componentViewTag: nativeTag,
+      getComponentViewTag: () => nativeTag,
+    });
+    eventManager.current.attachEvents();
+
+    return () => {
+      eventManager.current?.detachEvents();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (prevProps.current) {
+      eventManager.current?.updateEvents(prevProps.current);
+    }
+    prevProps.current = reaProps;
+  }, [reaProps]);
+
+  return <HostGestureDetector ref={viewRef} {...restProps} />;
+}
+
+export const ReanimatedNativeDetector = NativeEventsManagerImpl
+  ? LeanReanimatedNativeDetector
+  : Reanimated?.default.createAnimatedComponent(HostGestureDetector);

packages/react-native-gesture-handler/src/v3/detectors/ReanimatedNativeDetector.web.tsx

@@ -0,0 +1,5 @@
+import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
+import HostGestureDetector from './HostGestureDetector';
+
+export const ReanimatedNativeDetector =
+  Reanimated?.default.createAnimatedComponent(HostGestureDetector);

packages/react-native-gesture-handler/src/v3/detectors/VirtualDetector/InterceptingGestureDetector.tsx

@@ -17,10 +17,10 @@ import {
   AnimatedNativeDetector,
   InterceptingGestureDetectorProps,
   nativeDetectorStyles,
-  ReanimatedNativeDetector,
 } from '../common';
 import { tagMessage } from '../../../utils';
 import { useEnsureGestureHandlerRootView } from '../useEnsureGestureHandlerRootView';
+import { ReanimatedNativeDetector } from '../ReanimatedNativeDetector';
 
 interface VirtualChildrenForNative {
   viewTag: number;

packages/react-native-gesture-handler/src/v3/detectors/common.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Gesture } from '../types';
-import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
 import { Animated, StyleSheet } from 'react-native';
 import HostGestureDetector from './HostGestureDetector';
 import { GestureDetectorProps as LegacyDetectorProps } from '../../handlers/gestures/GestureDetector';
@@ -23,9 +22,6 @@ export type GestureDetectorProps<THandlerData, TConfig> =
 export const AnimatedNativeDetector =
   Animated.createAnimatedComponent(HostGestureDetector);
 
-export const ReanimatedNativeDetector =
-  Reanimated?.default.createAnimatedComponent(HostGestureDetector);
-
 export const nativeDetectorStyles = StyleSheet.create({
   detector: {
     display: 'contents',