react-native-gesture-handler 3.0.0 → 3.0.1

package/src/components/ReanimatedDrawerLayout.tsx

@@ -41,7 +41,10 @@ import type {
   UserSelect,
 } from '../handlers/gestureHandlerCommon';
 import { MouseButton } from '../handlers/gestureHandlerCommon';
-import { GestureDetector } from '../v3/detectors';
+import {
+  InterceptingGestureDetector,
+  VirtualGestureDetector,
+} from '../v3/detectors';
 import type { PanGestureActiveEvent } from '../v3/hooks/gestures';
 import { usePanGesture, useTapGesture } from '../v3/hooks/gestures';
 import type { WithSharedValue } from '../v3/types';
@@ -185,15 +188,28 @@ export type DrawerLayoutProps = {
   overlayColor?: string;
 
   /**
-   * Style wrapping the content.
+   * Style applied to the container wrapping the content view (the `children`)
+   * and the background overlay.
    */
   contentContainerStyle?: StyleProp<ViewStyle>;
 
   /**
-   * Style wrapping the drawer.
+   * Style applied to the container wrapping the drawer (the view returned by
+   * `renderNavigationView`).
    */
   drawerContainerStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * Style applied to the outermost container that wraps both the content view
+   * and the drawer.
+   */
+  rootContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Called while the drawer is moving or animating, with a `position`
+   * parameter indicating the progress of the opening/closing animation.
+   * It equals `0` when the drawer is closed and `1` when it is fully opened.
+   */
   onDrawerSlide?: (position: number) => void;
 
   // Implicit `children` prop has been removed in @types/react^18.0.
@@ -283,6 +299,7 @@ const DrawerLayout = function DrawerLayout(
     drawerType = defaultProps.drawerType,
     drawerBackgroundColor,
     drawerContainerStyle,
+    rootContainerStyle,
     contentContainerStyle,
     minSwipeDistance = defaultProps.minSwipeDistance,
     edgeWidth = defaultProps.edgeWidth,
@@ -657,12 +674,14 @@ const DrawerLayout = function DrawerLayout(
   );
 
   return (
-    <GestureDetector
+    <InterceptingGestureDetector
       gesture={panGesture}
       userSelect={userSelect}
       enableContextMenu={enableContextMenu}>
-      <Animated.View style={styles.main} onLayout={handleContainerLayout}>
-        <GestureDetector
+      <Animated.View
+        style={[styles.main, rootContainerStyle]}
+        onLayout={handleContainerLayout}>
+        <VirtualGestureDetector
           gesture={overlayDismissGesture}
           userSelect={userSelect}>
           <Animated.View
@@ -680,7 +699,7 @@ const DrawerLayout = function DrawerLayout(
               style={[styles.overlay, overlayAnimatedStyle]}
             />
           </Animated.View>
-        </GestureDetector>
+        </VirtualGestureDetector>
         <Animated.View
           pointerEvents="box-none"
           animatedProps={drawerAnimatedProps}
@@ -694,7 +713,7 @@ const DrawerLayout = function DrawerLayout(
           </Animated.View>
         </Animated.View>
       </Animated.View>
-    </GestureDetector>
+    </InterceptingGestureDetector>
   );
 };
 

package/src/components/utils.ts

@@ -1,5 +1,27 @@
+import { Platform } from 'react-native';
+
 import type { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
 
+type TVProps = {
+  focusable?: boolean | undefined;
+  isTVSelectable?: boolean | undefined;
+};
+
+/**
+ * Gesture Handler buttons render the native button component directly, bypassing RN's `<View>` —
+ * the only place the `focusable` prop is translated into `isTVSelectable`, which actually drives
+ * tvOS focusability.
+ */
+export function getTVProps(props: TVProps): TVProps {
+  if (!Platform.isTV) {
+    return {};
+  }
+
+  return {
+    isTVSelectable: props.focusable ?? props.isTVSelectable ?? true,
+  };
+}
+
 export type RelationPropName =
   | 'simultaneousWithExternalGesture'
   | 'requireExternalGestureToFail'

package/src/handlers/gestures/GestureDetector/utils.ts

@@ -65,20 +65,16 @@ function extractValidHandlerTags(interactionGroup: GestureRef[] | undefined) {
 }
 
 export function extractGestureRelations(gesture: GestureType) {
-  gesture.config.requireToFail = extractValidHandlerTags(
-    gesture.config.requireToFail
-  );
-  gesture.config.simultaneousWith = extractValidHandlerTags(
+  const requireToFail = extractValidHandlerTags(gesture.config.requireToFail);
+  const simultaneousWith = extractValidHandlerTags(
     gesture.config.simultaneousWith
   );
-  gesture.config.blocksHandlers = extractValidHandlerTags(
-    gesture.config.blocksHandlers
-  );
+  const blocksHandlers = extractValidHandlerTags(gesture.config.blocksHandlers);
 
   return {
-    waitFor: gesture.config.requireToFail,
-    simultaneousHandlers: gesture.config.simultaneousWith,
-    blocksHandlers: gesture.config.blocksHandlers,
+    waitFor: requireToFail,
+    simultaneousHandlers: simultaneousWith,
+    blocksHandlers: blocksHandlers,
   };
 }
 

package/src/handlers/gestures/gesture.ts

@@ -137,6 +137,17 @@ export abstract class BaseGesture<
   public handlerTag = -1;
   public handlerName = '';
   public config: BaseGestureConfig = {};
+  // Snapshot of the relations defined directly on this gesture (e.g. via
+  // `simultaneousWithExternalGesture`), captured before any composition extends
+  // them. Composition rebuilds the relation config from this snapshot on every
+  // `prepare`, so repeated renders don't accumulate references to gestures from
+  // previous renders (memory leak, see #3763), while keeping the original
+  // references so relations stay re-resolvable after a remount, such as a
+  // `react-freeze` unfreeze (see #4238).
+  public relationsSnapshot?: {
+    simultaneousWith: GestureRef[] | undefined;
+    requireToFail: GestureRef[] | undefined;
+  };
   public handlers: HandlerCallbacks<EventPayloadT> = {
     gestureId: -1,
     handlerTag: -1,

package/src/handlers/gestures/gestureComposition.ts

@@ -31,16 +31,29 @@ export class ComposedGesture extends Gesture {
     requireGesturesToFail: GestureType[]
   ) {
     if (gesture instanceof BaseGesture) {
+      // Capture the relations defined directly on the gesture before composition
+      // extends them, then always rebuild from that snapshot. Otherwise, when the
+      // gesture is stable (e.g. wrapped in `useMemo`) but the composition is
+      // recreated on every render, the relations would keep accumulating
+      // references to gestures from previous renders, leaking memory (see #3763).
+      // We keep the original references (instead of collapsing them to handler
+      // tags) so relations can still be re-resolved after a remount, such as a
+      // `react-freeze` unfreeze (see #4238).
+      gesture.relationsSnapshot ??= {
+        simultaneousWith: gesture.config.simultaneousWith,
+        requireToFail: gesture.config.requireToFail,
+      };
+
       const newConfig = { ...gesture.config };
 
       // No need to extend `blocksHandlers` here, because it's not changed in composition.
       // The same effect is achieved by reversing the order of 2 gestures in `Exclusive`
       newConfig.simultaneousWith = extendRelation(
-        newConfig.simultaneousWith,
+        gesture.relationsSnapshot.simultaneousWith,
         simultaneousGestures
       );
       newConfig.requireToFail = extendRelation(
-        newConfig.requireToFail,
+        gesture.relationsSnapshot.requireToFail,
         requireGesturesToFail
       );
 

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,7 +42,6 @@ export const allowedNativeProps = new Set<
   'userSelect',
   'enableContextMenu',
   'touchAction',
-  'dispatchesReanimatedEvents',
   'dispatchesAnimatedEvents',
   'needsPointerData',
 ]);

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,