NativeDetector <-> Reanimated integration (#3617)

## Description

This PR introduces integration with `Reanimated` to `NativeDetector`. When `Reanimated` is installed callbacks are handled via `useEvent` hook. Otherwise, they run on JS.

It also creates `v3` directory (name can be changed later) that will be used in further development to separate new code from the old one. 

## Test plan

Tested on basic-example app.

Author: m-bert

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

@@ -1,14 +1,15 @@
 import { ComponentClass } from 'react';
-import {
-  GestureUpdateEvent,
-  GestureStateChangeEvent,
-} from '../gestureHandlerCommon';
 import { tagMessage } from '../../utils';
+import { UpdateEvent } from '../../v3/types';
 
 export interface SharedValue<T> {
   value: T;
 }
 
+export type ReanimatedContext = {
+  lastUpdateEvent: UpdateEvent<Record<string, unknown>> | undefined;
+};
+
 let Reanimated:
   | {
       default: {
@@ -18,13 +19,18 @@ let Reanimated:
           options?: unknown
         ): ComponentClass<P>;
       };
-      useEvent: (
-        callback: (event: GestureUpdateEvent | GestureStateChangeEvent) => void,
+      useHandler: (handlers: Record<string, unknown>) => {
+        doDependenciesDiffer: boolean;
+        context: ReanimatedContext;
+      };
+      useEvent: <T>(
+        callback: (event: T) => void,
         events: string[],
         rebuild: boolean
-      ) => unknown;
+      ) => (event: unknown) => void;
       useSharedValue: <T>(value: T) => SharedValue<T>;
       setGestureState: (handlerTag: number, newState: number) => void;
+      isSharedValue: (value: unknown) => value is SharedValue<unknown>;
     }
   | undefined;
 

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

@@ -162,9 +162,9 @@ export type {
 } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
 
-export type { NativeDetectorProps } from './NativeDetector';
-export { NativeDetector } from './NativeDetector';
+export type { NativeDetectorProps } from './v3/NativeDetector';
+export { NativeDetector } from './v3/NativeDetector';
 
-export * from './useGesture';
+export * from './v3/hooks/useGesture';
 
 initialize();

packages/react-native-gesture-handler/src/index.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { NativeGesture } from './hooks/useGesture';
+import { Reanimated } from '../handlers/gestures/reanimatedWrapper';
+
+import { Animated, StyleSheet } from 'react-native';
+import RNGestureHandlerDetectorNativeComponent from '../specs/RNGestureHandlerDetectorNativeComponent';
+import { tagMessage } from '../utils';
+
+export interface NativeDetectorProps {
+  children?: React.ReactNode;
+  gesture: NativeGesture;
+}
+
+const AnimatedNativeDetector = Animated.createAnimatedComponent(
+  RNGestureHandlerDetectorNativeComponent
+);
+
+const ReanimatedNativeDetector = Reanimated?.default.createAnimatedComponent(
+  RNGestureHandlerDetectorNativeComponent
+);
+
+export function NativeDetector({ gesture, children }: NativeDetectorProps) {
+  const NativeDetectorComponent = gesture.dispatchesAnimatedEvents
+    ? AnimatedNativeDetector
+    : gesture.shouldUseReanimated
+      ? ReanimatedNativeDetector
+      : RNGestureHandlerDetectorNativeComponent;
+
+  // It might happen only with ReanimatedNativeDetector
+  if (!NativeDetectorComponent) {
+    throw new Error(
+      tagMessage(
+        'Gesture expects to run on the UI thread, but failed to create the Reanimated NativeDetector.'
+      )
+    );
+  }
+
+  return (
+    <NativeDetectorComponent
+      onGestureHandlerStateChange={
+        gesture.gestureEvents.onGestureHandlerStateChange
+      }
+      onGestureHandlerEvent={gesture.gestureEvents.onGestureHandlerEvent}
+      onGestureHandlerAnimatedEvent={
+        gesture.gestureEvents.onGestureHandlerAnimatedEvent
+      }
+      onGestureHandlerTouchEvent={
+        gesture.gestureEvents.onGestureHandlerTouchEvent
+      }
+      dispatchesAnimatedEvents={gesture.dispatchesAnimatedEvents}
+      moduleId={globalThis._RNGH_MODULE_ID}
+      handlerTags={[gesture.tag]}
+      style={styles.detector}>
+      {children}
+    </NativeDetectorComponent>
+  );
+}
+
+const styles = StyleSheet.create({
+  detector: {
+    display: 'contents',
+    // TODO: remove, debug info only
+    backgroundColor: 'red',
+  },
+});

packages/react-native-gesture-handler/src/useGesture.ts

@@ -0,0 +1,73 @@
+import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
+import { isEventForHandlerWithTag, runWorkletCallback } from '../utils';
+import {
+  Reanimated,
+  ReanimatedContext,
+} from '../../../handlers/gestures/reanimatedWrapper';
+import { CallbackHandlers, UpdateEvent } from '../../types';
+import { tagMessage } from '../../../utils';
+
+export function useGestureHandlerEvent(
+  handlerTag: number,
+  config: any,
+  shouldUseReanimated: boolean
+) {
+  const handlers: CallbackHandlers = {
+    onChange: config.onChange,
+    onUpdate: config.onUpdate,
+  };
+
+  const onGestureHandlerEvent = (
+    event: UpdateEvent<Record<string, unknown>>,
+    context: ReanimatedContext | undefined
+  ) => {
+    'worklet';
+
+    if (!isEventForHandlerWithTag(handlerTag, event)) {
+      return;
+    }
+
+    // This should never happen, but since we don't want to call hooks conditionally, we have to mark
+    // context as possibly undefined to make TypeScript happy.
+    if (!context) {
+      throw new Error(tagMessage('Event handler context is not defined'));
+    }
+
+    runWorkletCallback(
+      CALLBACK_TYPE.UPDATE,
+      handlers,
+      config.changeEventCalculator
+        ? config.changeEventCalculator(event, context.lastUpdateEvent)
+        : event
+    );
+
+    // TODO: Investigate why this is always undefined
+    context.lastUpdateEvent = event;
+  };
+
+  const jsContext: ReanimatedContext = {
+    lastUpdateEvent: undefined,
+  };
+
+  if (config.disableReanimated) {
+    return (event: UpdateEvent<Record<string, unknown>>) =>
+      onGestureHandlerEvent(event, jsContext);
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const reanimatedHandler = Reanimated?.useHandler(handlers);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const reanimatedEvent = Reanimated?.useEvent(
+    (event: UpdateEvent<Record<string, unknown>>) => {
+      'worklet';
+      onGestureHandlerEvent(event, reanimatedHandler?.context);
+    },
+    ['onGestureHandlerEvent'],
+    !!reanimatedHandler?.doDependenciesDiffer
+  );
+
+  return shouldUseReanimated
+    ? reanimatedEvent
+    : (event: UpdateEvent<Record<string, unknown>>) =>
+        onGestureHandlerEvent(event, jsContext);
+}

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

@@ -0,0 +1,80 @@
+import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
+import {
+  isEventForHandlerWithTag,
+  isNativeEvent,
+  runWorkletCallback,
+} from '../utils';
+import { State } from '../../../State';
+import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
+import { CallbackHandlers, StateChangeEvent } from '../../types';
+
+export function useGestureStateChangeEvent(
+  handlerTag: number,
+  config: any,
+  shouldUseReanimated: boolean
+) {
+  const handlers: CallbackHandlers = {
+    onBegin: config.onBegin,
+    onStart: config.onStart,
+    onEnd: config.onEnd,
+    onFinalize: config.onFinalize,
+  };
+
+  const onGestureHandlerStateChange = (
+    event: StateChangeEvent<Record<string, unknown>>
+  ) => {
+    'worklet';
+
+    if (!isEventForHandlerWithTag(handlerTag, event)) {
+      return;
+    }
+
+    let oldState: State | undefined;
+    let state: State | undefined;
+
+    if (isNativeEvent(event)) {
+      oldState = event.nativeEvent.oldState;
+      state = event.nativeEvent.state;
+    } else {
+      oldState = event.oldState;
+      state = event.state;
+    }
+
+    if (oldState === State.UNDETERMINED && state === State.BEGAN) {
+      runWorkletCallback(CALLBACK_TYPE.BEGAN, handlers, event);
+    } else if (
+      (oldState === State.BEGAN || oldState === State.UNDETERMINED) &&
+      state === State.ACTIVE
+    ) {
+      runWorkletCallback(CALLBACK_TYPE.START, handlers, event);
+    } else if (oldState !== state && state === State.END) {
+      if (oldState === State.ACTIVE) {
+        runWorkletCallback(CALLBACK_TYPE.END, handlers, event, true);
+      }
+      runWorkletCallback(CALLBACK_TYPE.FINALIZE, handlers, event, true);
+    } else if (
+      (state === State.FAILED || state === State.CANCELLED) &&
+      state !== oldState
+    ) {
+      if (oldState === State.ACTIVE) {
+        runWorkletCallback(CALLBACK_TYPE.END, handlers, event, false);
+      }
+      runWorkletCallback(CALLBACK_TYPE.FINALIZE, handlers, event, false);
+    }
+  };
+
+  if (config.disableReanimated) {
+    return onGestureHandlerStateChange;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const reanimatedHandler = Reanimated?.useHandler(handlers);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const reanimatedEvent = Reanimated?.useEvent(
+    onGestureHandlerStateChange,
+    ['onGestureHandlerStateChange'],
+    !!reanimatedHandler?.doDependenciesDiffer
+  );
+
+  return shouldUseReanimated ? reanimatedEvent : onGestureHandlerStateChange;
+}