react-native-gesture-handler 3.0.0 → 3.0.2

package/src/v3/components/GestureButtons.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
 
 import GestureHandlerButton from '../../components/GestureHandlerButton';
+import { getTVProps } from '../../components/utils';
 import createNativeWrapper from '../createNativeWrapper';
 import type { NativeHandlerData } from '../hooks/gestures/native/NativeTypes';
 import type { GestureEndEvent, GestureEvent } from '../types';
@@ -95,10 +96,13 @@ export const BaseButton = (props: BaseButtonProps) => {
     props.onFinalize?.(e);
   };
 
+  const tvProps = getTVProps(rest);
+
   return (
     <RawButton
       style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
       {...rest}
+      {...tvProps}
       onBegin={onBegin}
       onActivate={onActivate}
       onDeactivate={onDeactivate}

package/src/v3/components/Pressable.tsx

@@ -29,7 +29,9 @@ import {
   gestureTouchToPressableEvent,
   isTouchWithinInset,
   numberAsInset,
+  viewCenterToPressableEvent,
 } from '../../components/Pressable/utils';
+import { getTVProps } from '../../components/utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { useIsScreenReaderEnabled } from '../../useIsScreenReaderEnabled';
 import { INT32_MAX, isTestEnv } from '../../utils';
@@ -151,8 +153,9 @@ const Pressable = (props: PressableProps) => {
   }, [cancelDelayedPress, cancelLongPress]);
 
   const handlePressIn = useCallback(
-    (event: PressableEvent) => {
+    (event: PressableEvent, skipBoundsCheck = false) => {
       if (
+        !skipBoundsCheck &&
         !isTouchWithinInset(
           dimensions.current,
           normalizedHitSlop,
@@ -305,11 +308,25 @@ const Pressable = (props: PressableProps) => {
       }
     },
     onBegin: () => {
+      if (Platform.isTV) {
+        // tvOS drives this native gesture from the focus-engine Select press.
+        // The press state machine is touch-based and never
+        // receives LONG_PRESS_TOUCHES_DOWN here, so bypass it and drive the press handlers directly.
+        // A focus-driven press has no coordinates, so skip the hit-slop bounds check entirely.
+        handlePressIn(viewCenterToPressableEvent(dimensions.current), true);
+        return;
+      }
+      if (Platform.OS === 'android' && isScreenReaderEnabled) {
+        stateMachine.handleEvent(
+          StateMachineEvent.NATIVE_BEGIN,
+          viewCenterToPressableEvent(dimensions.current)
+        );
+        return;
+      }
       stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
     },
     onActivate: () => {
-      if (Platform.OS !== 'android') {
-        // Native.onActivate is broken with Android + hitSlop
+      if (!Platform.isTV && Platform.OS !== 'android') {
         stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
       }
     },
@@ -319,6 +336,16 @@ const Pressable = (props: PressableProps) => {
       if (Platform.OS === 'web') {
         return;
       }
+
+      if (Platform.isTV) {
+        handlePressOut(
+          viewCenterToPressableEvent(dimensions.current),
+          !event.canceled
+        );
+        handleFinalize();
+        return;
+      }
+
       stateMachine.handleEvent(
         event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
       );
@@ -365,10 +392,13 @@ const Pressable = (props: PressableProps) => {
     [onLayout]
   );
 
+  const tvProps = getTVProps(remainingProps);
+
   return (
     <GestureDetector gesture={gesture}>
       <PureNativeButton
         {...remainingProps}
+        {...tvProps}
         onLayout={setDimensions}
         accessible={accessible !== false}
         hitSlop={appliedHitSlop}

package/src/v3/components/Touchable/Touchable.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { Platform } from 'react-native';
 
 import GestureHandlerButton from '../../../components/GestureHandlerButton';
+import { getTVProps } from '../../../components/utils';
 import { NativeDetector } from '../../detectors/NativeDetector';
 import { useNativeGesture } from '../../hooks';
 import type {
@@ -208,10 +209,13 @@ export const Touchable = (props: TouchableProps) => {
       }
     : TRANSPARENT_RIPPLE;
 
+  const tvProps = getTVProps(rest);
+
   return (
     <NativeDetector gesture={nativeGesture}>
       <GestureHandlerButton
         {...rest}
+        {...tvProps}
         {...rippleProps}
         {...resolvedDurations}
         ref={ref ?? null}

package/src/v3/hooks/utils/configUtils.ts

@@ -21,8 +21,6 @@ export function resolveInternalConfigProps<
   THandlerData,
   TExtendedHandlerData extends THandlerData,
 >(config: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>) {
-  const runOnJS = maybeUnpackValue(config.runOnJS);
-
   if (
     __DEV__ &&
     isNativeAnimatedEvent(config.onUpdate) &&
@@ -63,8 +61,6 @@ export function resolveInternalConfigProps<
     hasWorkletEventHandlers(config) &&
     !config.dispatchesAnimatedEvents;
   config.needsPointerData = shouldHandleTouchEvents(config);
-  config.dispatchesReanimatedEvents =
-    config.shouldUseReanimatedDetector && !runOnJS;
 }
 
 export function prepareConfigForNativeSide<
@@ -80,7 +76,10 @@ export function prepareConfigForNativeSide<
     TConfig,
     THandlerData,
     TExtendedHandlerData
-  > = {};
+  > = {
+    dispatchesReanimatedEvents:
+      config.shouldUseReanimatedDetector && !maybeUnpackValue(config.runOnJS),
+  };
   const handlerPropsWhiteList =
     PropsWhiteLists.get(handlerType) ?? EMPTY_WHITE_LIST;
 

package/src/v3/hooks/utils/propsWhiteList.ts

@@ -42,16 +42,10 @@ export const allowedNativeProps = new Set<
   'userSelect',
   'enableContextMenu',
   'touchAction',
-  'dispatchesReanimatedEvents',
   'dispatchesAnimatedEvents',
   'needsPointerData',
 ]);
 
-// Don't pass testID to the native side in production
-if (!__DEV__) {
-  allowedNativeProps.delete('testID');
-}
-
 export const HandlerCallbacks = new Set<
   keyof Required<GestureCallbacks<unknown, unknown>>
 >([
@@ -87,6 +81,12 @@ export const PropsToFilter = new Set<
   'activeOffsetX',
 ]);
 
+// Don't pass testID to the native side in production
+if (!__DEV__) {
+  allowedNativeProps.delete('testID');
+  PropsToFilter.add('testID');
+}
+
 export const PropsWhiteLists = new Map<
   SingleGestureName,
   HandlersPropsWhiteList

package/src/v3/hooks/utils/reanimatedUtils.ts

@@ -38,6 +38,7 @@ export function bindSharedValues<
   }
 
   const baseListenerId = handlerTag + SHARED_VALUE_OFFSET;
+  const { shouldUseReanimatedDetector } = config;
 
   const attachListener = (sharedValue: SharedValue, configKey: string) => {
     'worklet';
@@ -45,16 +46,14 @@ export function bindSharedValues<
     const listenerId = baseListenerId + keyHash;
 
     sharedValue.addListener(listenerId, (value) => {
-      if (configKey === 'runOnJS') {
-        config.dispatchesReanimatedEvents =
-          config.shouldUseReanimatedDetector && !value;
-
-        updateGestureHandlerConfig(handlerTag, {
-          dispatchesReanimatedEvents: config.dispatchesReanimatedEvents,
-        });
-      } else {
-        updateGestureHandlerConfig(handlerTag, { [configKey]: value });
-      }
+      updateGestureHandlerConfig(
+        handlerTag,
+        configKey === 'runOnJS'
+          ? {
+              dispatchesReanimatedEvents: shouldUseReanimatedDetector && !value,
+            }
+          : { [configKey]: value }
+      );
     });
   };
 

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -141,8 +141,14 @@ export class GestureHandlerWebDelegate
       throw new Error(tagMessage('Cannot convert coords on a null view'));
     }
 
-    const rect = getEffectiveBoundingRect(this.view);
-    const transform = getComputedStyle(this.view).transform;
+    const localView =
+      this.gestureHandler.usesNativeOrVirtualDetector() &&
+      this.view.style.display === 'contents'
+        ? (this.view.children[0] as HTMLElement)
+        : this.view;
+
+    const rect = getEffectiveBoundingRect(localView);
+    const transform = getComputedStyle(localView).transform;
     const matrix =
       transform && transform !== 'none'
         ? new DOMMatrix(transform)
@@ -164,8 +170,8 @@ export class GestureHandlerWebDelegate
     const localOffset = inverse.transformPoint(new DOMPoint(dx, dy));
 
     // Add back the local center (untransformed dimensions)
-    const localCenterX = this.view.offsetWidth / 2;
-    const localCenterY = this.view.offsetHeight / 2;
+    const localCenterX = localView.offsetWidth / 2;
+    const localCenterY = localView.offsetHeight / 2;
 
     return {
       x: localCenterX + localOffset.x,