Automatically assign dispatchesAnimatedEvents

apps/basic-example/src/NativeDetector.tsx

@@ -18,9 +18,7 @@ export default function App() {
   );
 
   const gesture = useGesture('PanGestureHandler', {
-    onGestureHandlerAnimatedEvent: event,
-    onGestureHandlerEvent: (e: any) =>
-      console.log('onGestureHandlerEvent', e.nativeEvent),
+    onUpdate: event,
   });
 
   return (

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

@@ -20,9 +20,10 @@ const ReanimatedNativeDetector = Reanimated?.default.createAnimatedComponent(
 );
 
 export function NativeDetector({ gesture, children }: NativeDetectorProps) {
-  const NativeDetectorComponent = gesture.dispatchesAnimatedEvents
+  const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
-    : gesture.shouldUseReanimated
+    : // TODO: Remove this cast when we properly type config
+      (gesture.config.shouldUseReanimated as boolean)
       ? ReanimatedNativeDetector
       : RNGestureHandlerDetectorNativeComponent;
 
@@ -47,7 +48,9 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
       onGestureHandlerTouchEvent={
         gesture.gestureEvents.onGestureHandlerTouchEvent
       }
-      dispatchesAnimatedEvents={gesture.dispatchesAnimatedEvents}
+      dispatchesAnimatedEvents={
+        gesture.config.dispatchesAnimatedEvents as boolean
+      }
       moduleId={globalThis._RNGH_MODULE_ID}
       handlerTags={[gesture.tag]}
       style={styles.detector}>

packages/react-native-gesture-handler/src/v3/hooks/events/useGestureHandlerEvent.ts

@@ -11,11 +11,7 @@ import {
 import { CallbackHandlers, UpdateEvent } from '../../types';
 import { tagMessage } from '../../../utils';
 
-export function useGestureHandlerEvent(
-  handlerTag: number,
-  config: any,
-  shouldUseReanimated: boolean
-) {
+export function useGestureHandlerEvent(handlerTag: number, config: any) {
   const handlers: CallbackHandlers = {
     onUpdate: config.onUpdate,
   };
@@ -73,7 +69,7 @@ export function useGestureHandlerEvent(
 
   return isAnimatedEvent(config.onUpdate)
     ? undefined
-    : shouldUseReanimated
+    : config.shouldUseReanimated
       ? reanimatedEvent
       : (event: UpdateEvent<Record<string, unknown>>) =>
           onGestureHandlerEvent(event, jsContext);

packages/react-native-gesture-handler/src/v3/hooks/events/useGestureStateChangeEvent.ts

@@ -8,11 +8,7 @@ import { State } from '../../../State';
 import { Reanimated } from '../../../handlers/gestures/reanimatedWrapper';
 import { CallbackHandlers, StateChangeEvent } from '../../types';
 
-export function useGestureStateChangeEvent(
-  handlerTag: number,
-  config: any,
-  shouldUseReanimated: boolean
-) {
+export function useGestureStateChangeEvent(handlerTag: number, config: any) {
   const handlers: CallbackHandlers = {
     onBegin: config.onBegin,
     onStart: config.onStart,
@@ -76,5 +72,7 @@ export function useGestureStateChangeEvent(
     !!reanimatedHandler?.doDependenciesDiffer
   );
 
-  return shouldUseReanimated ? reanimatedEvent : onGestureHandlerStateChange;
+  return config.shouldUseReanimated
+    ? reanimatedEvent
+    : onGestureHandlerStateChange;
 }

packages/react-native-gesture-handler/src/v3/hooks/events/useTouchEvent.ts

@@ -10,11 +10,7 @@ import { TouchEventType } from '../../../TouchEventType';
 import { CallbackHandlers, TouchEvent } from '../../types';
 import { NativeSyntheticEvent } from 'react-native';
 
-export function useTouchEvent(
-  handlerTag: number,
-  config: any,
-  shouldUseReanimated: boolean
-) {
+export function useTouchEvent(handlerTag: number, config: any) {
   const handlers: CallbackHandlers = {
     onTouchesDown: config.onTouchesDown,
     onTouchesMove: config.onTouchesMove,
@@ -65,5 +61,7 @@ export function useTouchEvent(
     !!reanimatedHandler?.doDependenciesDiffer
   );
 
-  return shouldUseReanimated ? reanimatedEvent : onGestureHandlerTouchEvent;
+  return config.shouldUseReanimated
+    ? reanimatedEvent
+    : onGestureHandlerTouchEvent;
 }

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

@@ -29,8 +29,6 @@ export interface NativeGesture {
   name: GestureType;
   config: Record<string, unknown>;
   gestureEvents: GestureEvents;
-  shouldUseReanimated: boolean;
-  dispatchesAnimatedEvents: boolean;
 }
 
 function hasWorkletEventHandlers(config: Record<string, unknown>) {
@@ -63,7 +61,8 @@ export function useGesture(
     );
   }
 
-  const shouldUseReanimated =
+  // This has to be done ASAP as other hooks depend `shouldUseReanimated`.
+  config.shouldUseReanimated =
     Reanimated !== undefined && hasWorkletEventHandlers(config);
   config.needsPointerData = shouldHandleTouchEvents(config);
 
@@ -72,7 +71,7 @@ export function useGesture(
     onGestureHandlerEvent,
     onGestureHandlerAnimatedEvent,
     onGestureHandlerTouchEvent,
-  } = useGestureEvent(tag, config, shouldUseReanimated);
+  } = useGestureEvent(tag, config);
 
   // This should never happen, but since we don't want to call hooks conditionally,
   // we have to mark these as possibly undefined to make TypeScript happy.
@@ -85,6 +84,10 @@ export function useGesture(
     throw new Error(tagMessage('Failed to create event handlers.'));
   }
 
+  config.dispatchesAnimatedEvents =
+    !!onGestureHandlerAnimatedEvent &&
+    '__isNative' in onGestureHandlerAnimatedEvent;
+
   useMemo(() => {
     RNGestureHandlerModule.createGestureHandler(type, tag, {});
     RNGestureHandlerModule.flushOperations();
@@ -118,9 +121,5 @@ export function useGesture(
       onGestureHandlerTouchEvent,
       onGestureHandlerAnimatedEvent,
     },
-    shouldUseReanimated,
-    dispatchesAnimatedEvents:
-      !!onGestureHandlerAnimatedEvent &&
-      '__isNative' in onGestureHandlerAnimatedEvent,
   };
 }

packages/react-native-gesture-handler/src/v3/hooks/useGestureEvent.ts

@@ -4,27 +4,14 @@ import { useTouchEvent } from './events/useTouchEvent';
 import { AnimatedEvent } from '../types';
 import { checkMappingForChangeProperties, isAnimatedEvent } from './utils';
 
-export function useGestureEvent(
-  handlerTag: number,
-  config: any,
-  shouldUseReanimated: boolean
-) {
+export function useGestureEvent(handlerTag: number, config: any) {
   const onGestureHandlerStateChange = useGestureStateChangeEvent(
     handlerTag,
-    config,
-    shouldUseReanimated
-  );
-  const onGestureHandlerEvent = useGestureHandlerEvent(
-    handlerTag,
-    config,
-    shouldUseReanimated
+    config
   );
+  const onGestureHandlerEvent = useGestureHandlerEvent(handlerTag, config);
 
-  const onGestureHandlerTouchEvent = useTouchEvent(
-    handlerTag,
-    config,
-    shouldUseReanimated
-  );
+  const onGestureHandlerTouchEvent = useTouchEvent(handlerTag, config);
 
   let onGestureHandlerAnimatedEvent: AnimatedEvent | undefined;