react-native-gesture-handler 2.33.0 → 2.33.1

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -54,4 +54,27 @@ 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 };

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -1,10 +1,19 @@
 import { codegenNativeComponent } from 'react-native';
-import type { HostComponent, ViewProps } from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
 
 export interface RootViewNativeProps extends ViewProps {
   unstable_forceActive?: boolean;
 }
 
-export default codegenNativeComponent<RootViewNativeProps>(
+// @ts-expect-error WithDefault adds null for codegen, unlike ViewProps.pointerEvents.
+interface NativeProps extends ViewProps {
+  pointerEvents?: CodegenTypes.WithDefault<
+    'box-none' | 'none' | 'box-only' | 'auto',
+    'auto'
+  >;
+  unstable_forceActive?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
   'RNGestureHandlerRootView'
 ) as HostComponent<RootViewNativeProps>;

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -12,6 +12,7 @@ import { Config } from '../interfaces';
 import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import KeyboardEventManager from './KeyboardEventManager';
 import WheelEventManager from './WheelEventManager';
+import PanGestureHandler from '../handlers/PanGestureHandler';
 
 interface DefaultViewStyles {
   userSelect: string;
@@ -49,6 +50,7 @@ export class GestureHandlerWebDelegate
     };
 
     const config = handler.config;
+    const shouldSendWheelEvents = handler instanceof PanGestureHandler;
 
     this.setUserSelect(config.enabled);
     this.setTouchAction(config.enabled);
@@ -56,7 +58,10 @@ export class GestureHandlerWebDelegate
 
     this.eventManagers.push(new PointerEventManager(this.view));
     this.eventManagers.push(new KeyboardEventManager(this.view));
-    this.eventManagers.push(new WheelEventManager(this.view));
+
+    if (shouldSendWheelEvents) {
+      this.eventManagers.push(new WheelEventManager(this.view));
+    }
 
     this.eventManagers.forEach((manager) =>
       this.gestureHandler.attachEventManager(manager)

package/src/web/tools/KeyboardEventManager.ts

@@ -3,9 +3,10 @@ import EventManager from './EventManager';
 import { PointerType } from '../../PointerType';
 
 export default class KeyboardEventManager extends EventManager<HTMLElement> {
-  private static activationKeys = ['Enter', ' '];
-  private static cancelationKeys = ['Tab'];
-  private isPressed = false;
+  private static activationKeys = new Set(['Enter', ' ']);
+  private static cancelationKeys = new Set(['Tab']);
+  private keyPointer: string | null = null;
+
   private static registeredStaticListeners = false;
   private static instances: Set<KeyboardEventManager> = new Set();
 
@@ -13,8 +14,7 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
     // We need a global listener, as in some cases, keyUp event gets stop-propagated.
     // Then, if we used only component-level listeners the gesture would never end,
     // causing other gestues to fail.
-
-    if (this.activationKeys.indexOf(event.key) === -1) {
+    if (!this.activationKeys.has(event.key)) {
       return;
     }
 
@@ -24,30 +24,30 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
   };
 
   private keyDownCallback = (event: KeyboardEvent): void => {
-    if (
-      KeyboardEventManager.cancelationKeys.indexOf(event.key) !== -1 &&
-      this.isPressed
-    ) {
-      this.dispatchEvent(event, EventTypes.CANCEL);
+    if (this.keyPointer !== null) {
+      if (KeyboardEventManager.cancelationKeys.has(event.key)) {
+        this.dispatchEvent(event, EventTypes.CANCEL);
+        this.keyPointer = null;
+      }
+
       return;
     }
 
-    if (KeyboardEventManager.activationKeys.indexOf(event.key) === -1) {
+    if (!KeyboardEventManager.activationKeys.has(event.key) || event.repeat) {
       return;
     }
 
+    this.keyPointer = event.key;
     this.dispatchEvent(event, EventTypes.DOWN);
   };
 
   private onKeyUp = (event: KeyboardEvent): void => {
-    if (
-      KeyboardEventManager.activationKeys.indexOf(event.key) === -1 ||
-      !this.isPressed
-    ) {
+    if (this.keyPointer !== event.key) {
       return;
     }
 
     this.dispatchEvent(event, EventTypes.UP);
+    this.keyPointer = null;
   };
 
   private dispatchEvent(event: KeyboardEvent, eventType: EventTypes) {
@@ -59,15 +59,12 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
 
     switch (eventType) {
       case EventTypes.UP:
-        this.isPressed = false;
         this.onPointerUp(adaptedEvent);
         break;
       case EventTypes.DOWN:
-        this.isPressed = true;
         this.onPointerDown(adaptedEvent);
         break;
       case EventTypes.CANCEL:
-        this.isPressed = false;
         this.onPointerCancel(adaptedEvent);
         break;
     }
@@ -103,6 +100,11 @@ export default class KeyboardEventManager extends EventManager<HTMLElement> {
     }
   }
 
+  public override resetManager(): void {
+    super.resetManager();
+    this.keyPointer = null;
+  }
+
   protected mapEvent(
     event: KeyboardEvent,
     eventType: EventTypes

package/src/web/tools/WheelEventManager.ts

@@ -1,6 +1,7 @@
 import EventManager from './EventManager';
 import { AdaptedEvent, EventTypes } from '../interfaces';
 import { PointerType } from '../../PointerType';
+import { calculateViewScale } from '../utils';
 
 export default class WheelEventManager extends EventManager<HTMLElement> {
   private wheelDelta = { x: 0, y: 0 };
@@ -19,7 +20,9 @@ export default class WheelEventManager extends EventManager<HTMLElement> {
 
   public registerListeners(): void {
     this.view.addEventListener('pointermove', this.resetDelta);
-    this.view.addEventListener('wheel', this.wheelCallback);
+    this.view.addEventListener('wheel', this.wheelCallback, {
+      passive: true,
+    });
   }
 
   public unregisterListeners(): void {
@@ -28,11 +31,17 @@ export default class WheelEventManager extends EventManager<HTMLElement> {
   }
 
   protected mapEvent(event: WheelEvent): AdaptedEvent {
+    const rect = this.view.getBoundingClientRect();
+    const { scaleX, scaleY } = calculateViewScale(this.view);
+
+    const x = event.clientX + this.wheelDelta.x;
+    const y = event.clientY + this.wheelDelta.y;
+
     return {
-      x: event.clientX + this.wheelDelta.x,
-      y: event.clientY + this.wheelDelta.y,
-      offsetX: event.offsetX - event.deltaX,
-      offsetY: event.offsetY - event.deltaY,
+      x,
+      y,
+      offsetX: (x - rect.left) / scaleX,
+      offsetY: (y - rect.top) / scaleY,
       pointerId: -1,
       eventType: EventTypes.MOVE,
       pointerType: PointerType.OTHER,