Merge branch 'next' into @akwasniewski/native-gesture-web

Author: akwasniewski

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/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorView.kt

@@ -14,7 +14,6 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   private var handlersToAttach: List<Int>? = null
   private var attachedHandlers = listOf<Int>()
   private var moduleId: Int = -1
-  private var dispatchesAnimatedEvents: Boolean = false
 
   fun setHandlerTags(handlerTags: ReadableArray?) {
     val newHandlers = handlerTags?.toArrayList()?.map { (it as Double).toInt() } ?: emptyList()
@@ -36,10 +35,6 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     handlersToAttach = null
   }
 
-  fun setDispatchesAnimatedEvents(dispatchesAnimatedEvents: Boolean) {
-    this.dispatchesAnimatedEvents = dispatchesAnimatedEvents
-  }
-
   private fun attachHandlers(newHandlers: List<Int>) {
     val registry = RNGestureHandlerModule.registries[moduleId]
       ?: throw Exception("Tried to access a non-existent registry")

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorViewManager.kt

@@ -36,8 +36,4 @@ class RNGestureHandlerDetectorViewManager :
   override fun setModuleId(view: RNGestureHandlerDetectorView, value: Int) {
     view.setModuleId(value)
   }
-
-  override fun setDispatchesAnimatedEvents(view: RNGestureHandlerDetectorView, value: Boolean) {
-    view.setDispatchesAnimatedEvents(value)
-  }
 }

packages/react-native-gesture-handler/src/specs/RNGestureHandlerDetectorNativeComponent.ts

@@ -49,7 +49,6 @@ export interface NativeProps extends ViewProps {
   onGestureHandlerTouchEvent?: DirectEventHandler<GestureHandlerTouchEvent>;
 
   handlerTags: Int32[];
-  dispatchesAnimatedEvents: boolean;
   moduleId: Int32;
 }
 

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

@@ -18,9 +18,10 @@ const ReanimatedNativeDetector =
   Reanimated?.default.createAnimatedComponent(HostGestureDetector);
 
 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
       : HostGestureDetector;
 
@@ -45,7 +46,6 @@ export function NativeDetector({ gesture, children }: NativeDetectorProps) {
       onGestureHandlerTouchEvent={
         gesture.gestureEvents.onGestureHandlerTouchEvent
       }
-      dispatchesAnimatedEvents={gesture.dispatchesAnimatedEvents}
       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;