react-native-gesture-handler 3.0.0-beta.4 → 3.0.0-beta.5

package/src/components/ReanimatedSwipeable/ReanimatedSwipeableProps.ts

@@ -3,17 +3,14 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 
 import type { HitSlop } from '../../handlers/gestureHandlerCommon';
-import type { AnyGesture } from '../../v3/types';
+import type { AnyGesture, WithSharedValue } from '../../v3/types';
 
 export enum SwipeDirection {
   LEFT = 'left',
   RIGHT = 'right',
 }
 
-export interface SwipeableProps {
-  /**
-   *
-   */
+export type SwipeableProps = {
   ref?: React.Ref<SwipeableMethods>;
 
   /**
@@ -23,27 +20,6 @@ export interface SwipeableProps {
 
   children?: React.ReactNode;
 
-  /**
-   * Indicates whether `ReanimatedSwipeable` should be analyzing stream of touch events or not.
-   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#enabledvalue-boolean
-   */
-  enabled?: boolean;
-
-  /**
-   * This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture.
-   * When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
-   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#hitslopsettings
-   */
-  hitSlop?: HitSlop;
-
-  /**
-   * Enables two-finger gestures on supported devices, for example iPads with
-   * trackpads. If not enabled the gesture will require click + drag, with
-   * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
-   * the gesture.
-   */
-  enableTrackpadTwoFingerGesture?: boolean;
-
   /**
    * Specifies how much the visual interaction will be delayed compared to the
    * gesture distance. e.g. value of 1 will indicate that the swipeable panel
@@ -66,18 +42,6 @@ export interface SwipeableProps {
    */
   rightThreshold?: number;
 
-  /**
-   * Distance that the panel must be dragged from the left edge to be considered
-   * a swipe. The default value is 10.
-   */
-  dragOffsetFromLeftEdge?: number;
-
-  /**
-   * Distance that the panel must be dragged from the right edge to be considered
-   * a swipe. The default value is 10.
-   */
-  dragOffsetFromRightEdge?: number;
-
   /**
    * Value indicating if the swipeable panel can be pulled further than the left
    * actions panel's width. It is set to true by default as long as the left
@@ -204,7 +168,35 @@ export interface SwipeableProps {
    * used with the swipeable's gesture handler.
    */
   block?: AnyGesture | AnyGesture[];
-}
+} & WithSharedValue<{
+  /**
+   * Indicates whether `ReanimatedSwipeable` should be analyzing stream of touch events or not.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#enabledvalue-boolean
+   */
+  enabled?: boolean | undefined;
+  /**
+   * This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture.
+   * When a negative number is provided the bounds of the view will reduce the area by the given number of points in each of the sides evenly.
+   * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#hitslopsettings
+   */
+  hitSlop?: HitSlop | undefined;
+  /**
+   * Enables two-finger gestures on supported devices, for example iPads with
+   * trackpads. If not enabled the gesture will require click + drag, with
+   * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
+   * the gesture.
+   */
+  enableTrackpadTwoFingerGesture?: boolean | undefined;
+  /**
+   * The horizontal offset from the starting point required to trigger a right-swipe gesture. Defaults to 10.
+   */
+  dragOffsetFromLeft?: number;
+
+  /**
+   * The horizontal offset from the starting point required to trigger a left-swipe gesture. Defaults to -10.
+   */
+  dragOffsetFromRight?: number;
+}>;
 
 export interface SwipeableMethods {
   close: () => void;

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

@@ -10,7 +10,7 @@ import { dropHandlers } from './dropHandlers';
 import { needsToReattach } from './needsToReattach';
 import type { AttachedGestureState, GestureDetectorState } from './types';
 import { updateHandlers } from './updateHandlers';
-import { useForceRender, validateDetectorChildren } from './utils';
+import { useForceRender } from './utils';
 
 // Returns a function that's responsible for updating the attached gestures
 // If the view has changed, it will reattach the handlers to the new view
@@ -34,7 +34,6 @@ export function useDetectorUpdater(
         didUnderlyingViewChange ||
         needsToReattach(preparedGesture, gesturesToAttach)
       ) {
-        validateDetectorChildren(state.viewRef);
         dropHandlers(preparedGesture);
         attachHandlers({
           preparedGesture,

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

@@ -1,7 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
-import { Platform } from 'react-native';
 
-import { RNRenderer } from '../../../RNRenderer';
 import { isTestEnv, tagMessage } from '../../../utils';
 import type {
   GestureHandlerNativeEvent,
@@ -124,56 +122,6 @@ export function checkGestureCallbacksForWorklets(gesture: GestureType) {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function validateDetectorChildren(ref: any) {
-  // Finds the first native view under the Wrap component and traverses the fiber tree upwards
-  // to check whether there is more than one native view as a pseudo-direct child of GestureDetector
-  // i.e. this is not ok:
-  //            Wrap
-  //             |
-  //            / \
-  //           /   \
-  //          /     \
-  //         /       \
-  //   NativeView  NativeView
-  //
-  // but this is fine:
-  //            Wrap
-  //             |
-  //         NativeView
-  //             |
-  //            / \
-  //           /   \
-  //          /     \
-  //         /       \
-  //   NativeView  NativeView
-  if (__DEV__ && Platform.OS !== 'web') {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const wrapType =
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      ref._reactInternals.elementType;
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    let instance =
-      RNRenderer.findHostInstance_DEPRECATED(
-        ref
-      )._internalFiberInstanceHandleDEV;
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    while (instance && instance.elementType !== wrapType) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      if (instance.sibling) {
-        throw new Error(
-          'GestureDetector has more than one native view as its children. This can happen if you are using a custom component that renders multiple views, like React.Fragment. You should wrap content of GestureDetector with a <View> or <Animated.View>.'
-        );
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-      instance = instance.return;
-    }
-  }
-}
-
 export function useForceRender() {
   const [renderState, setRenderState] = useState(false);
   const forceRender = useCallback(() => {

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -1,5 +1,6 @@
 import type { ComponentClass } from 'react';
 
+import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 import { tagMessage } from '../../utils';
 import { NativeProxy } from '../../v3/NativeProxy';
 import type {
@@ -82,7 +83,25 @@ let Reanimated:
 
 try {
   Reanimated = require('react-native-reanimated');
-  NativeProxy.setReanimatedAvailable(true);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
+  const Worklets = require('react-native-worklets');
+
+  // Make sure worklets are initialized before attempting to install UI runtime bindings
+  Worklets?.scheduleOnUI(() => {
+    'worklet';
+  });
+
+  ghQueueMicrotask(() => {
+    const decorated = NativeProxy.installUIRuntimeBindings();
+
+    if (!decorated) {
+      console.warn(
+        tagMessage(
+          'Failed to install UI runtime bindings. Please report this at https://github.com/software-mansion/react-native-gesture-handler/issues.'
+        )
+      );
+    }
+  });
 } catch (e) {
   // When 'react-native-reanimated' is not available we want to quietly continue
   // @ts-ignore TS demands the variable to be initialized
@@ -93,7 +112,6 @@ if (!Reanimated?.useSharedValue) {
   // @ts-ignore Make sure the loaded module is actually Reanimated, if it's not
   // reset the module to undefined so we can fallback to the default implementation
   Reanimated = undefined;
-  NativeProxy.setReanimatedAvailable(false);
 }
 
 if (Reanimated !== undefined && !Reanimated.setGestureState) {

package/src/mocks/module.tsx

@@ -2,6 +2,8 @@ const NOOP = () => {
   // Do nothing
 };
 
+const NOOPTrue = () => true;
+
 const attachGestureHandler = NOOP;
 const createGestureHandler = NOOP;
 const dropGestureHandler = NOOP;
@@ -9,7 +11,7 @@ const setGestureHandlerConfig = NOOP;
 const updateGestureHandlerConfig = NOOP;
 const flushOperations = NOOP;
 const configureRelations = NOOP;
-const setReanimatedAvailable = NOOP;
+const installUIRuntimeBindings = NOOPTrue;
 const install = NOOP;
 
 export default {
@@ -19,7 +21,7 @@ export default {
   setGestureHandlerConfig,
   updateGestureHandlerConfig,
   configureRelations,
-  setReanimatedAvailable,
+  installUIRuntimeBindings,
   flushOperations,
   install,
 } as const;

package/src/specs/NativeRNGestureHandlerModule.ts

@@ -3,15 +3,13 @@ import { TurboModuleRegistry } from 'react-native';
 import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface Spec extends TurboModule {
-  // This method returns a boolean only to force the codegen to generate
-  // a synchronous method. The returned value doesn't have any meaning.
   createGestureHandler: (
     handlerName: string,
     handlerTag: Double,
     // Record<> is not supported by codegen
     // eslint-disable-next-line @typescript-eslint/ban-types
     config: Object
-  ) => boolean;
+  ) => void;
   attachGestureHandler: (
     handlerTag: Double,
     newView: Double,
@@ -25,7 +23,7 @@ export interface Spec extends TurboModule {
   configureRelations: (handlerTag: Double, relations: Object) => void;
   dropGestureHandler: (handlerTag: Double) => void;
   flushOperations: () => void;
-  setReanimatedAvailable: (isAvailable: boolean) => void;
+  installUIRuntimeBindings: () => boolean;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('RNGestureHandlerModule');

package/src/specs/RNGestureHandlerButtonNativeComponent.ts

@@ -2,6 +2,7 @@ import type { ColorValue, ViewProps } from 'react-native';
 import type {
   Float,
   Int32,
+  UnsafeMixed,
   WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -19,8 +20,11 @@ interface NativeProps extends ViewProps {
     'box-none' | 'none' | 'box-only' | 'auto',
     'auto'
   >;
-  pressAndHoldAnimationDuration?: WithDefault<Int32, -1>;
-  tapAnimationDuration?: WithDefault<Int32, 100>;
+  tapAnimationInDuration?: WithDefault<Int32, 50>;
+  tapAnimationOutDuration?: WithDefault<Int32, 100>;
+  longPressDuration?: WithDefault<Int32, -1>;
+  longPressAnimationOutDuration?: WithDefault<Int32, -1>;
+  needsOffscreenAlphaCompositing?: WithDefault<boolean, false>;
   activeOpacity?: WithDefault<Float, 1>;
   activeScale?: WithDefault<Float, 1>;
   activeUnderlayOpacity?: WithDefault<Float, 0>;
@@ -54,17 +58,28 @@ interface NativeProps extends ViewProps {
   borderBlockEndColor?: ColorValue;
   borderBlockStartColor?: ColorValue;
 
-  // Border radius — logical variants beyond what ViewProps provides
-  // WithDefault -1 so the codegen sends -1 (our "unset" sentinel) instead of 0
-  // when the prop is absent, letting physical / general radii take effect.
-  borderTopStartRadius?: WithDefault<Float, -1>;
-  borderTopEndRadius?: WithDefault<Float, -1>;
-  borderBottomStartRadius?: WithDefault<Float, -1>;
-  borderBottomEndRadius?: WithDefault<Float, -1>;
-  borderEndEndRadius?: WithDefault<Float, -1>;
-  borderEndStartRadius?: WithDefault<Float, -1>;
-  borderStartEndRadius?: WithDefault<Float, -1>;
-  borderStartStartRadius?: WithDefault<Float, -1>;
+  // Border radius — declared as UnsafeMixed (folly::dynamic on iOS,
+  // DynamicFromObject on Android) so codegen forwards the raw value
+  // without coercing to Float. This lets the Android view manager parse
+  // both numeric points and percentage strings via
+  // LengthPercentage.setFromDynamic, matching RN's standard View. The
+  // non-logical variants are declared explicitly so they're dispatched
+  // through our delegate instead of falling through to
+  // BaseViewManagerDelegate, which casts to Double and would crash on a
+  // string value.
+  borderRadius?: UnsafeMixed;
+  borderTopLeftRadius?: UnsafeMixed;
+  borderTopRightRadius?: UnsafeMixed;
+  borderBottomLeftRadius?: UnsafeMixed;
+  borderBottomRightRadius?: UnsafeMixed;
+  borderTopStartRadius?: UnsafeMixed;
+  borderTopEndRadius?: UnsafeMixed;
+  borderBottomStartRadius?: UnsafeMixed;
+  borderBottomEndRadius?: UnsafeMixed;
+  borderEndEndRadius?: UnsafeMixed;
+  borderEndStartRadius?: UnsafeMixed;
+  borderStartEndRadius?: UnsafeMixed;
+  borderStartStartRadius?: UnsafeMixed;
 }
 
 export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');

package/src/v3/NativeProxy.ts

@@ -16,11 +16,13 @@ export const NativeProxy = {
     handlerTag: number,
     config?: T
   ) => {
-    RNGestureHandlerModule.createGestureHandler(
-      handlerName,
-      handlerTag,
-      config || {}
-    );
+    scheduleOperationToBeFlushed(() => {
+      RNGestureHandlerModule.createGestureHandler(
+        handlerName,
+        handlerTag,
+        config || {}
+      );
+    });
   },
   setGestureHandlerConfig: <
     TConfig,
@@ -59,7 +61,7 @@ export const NativeProxy = {
       RNGestureHandlerModule.configureRelations(handlerTag, relations);
     });
   },
-  setReanimatedAvailable: (isAvailable: boolean) => {
-    RNGestureHandlerModule.setReanimatedAvailable(isAvailable);
+  installUIRuntimeBindings: () => {
+    return RNGestureHandlerModule.installUIRuntimeBindings();
   },
 } as const;

package/src/v3/NativeProxy.web.ts

@@ -43,7 +43,7 @@ export const NativeProxy = {
   configureRelations: (handlerTag: number, relations: GestureRelations) => {
     RNGestureHandlerModule.configureRelations(handlerTag, relations);
   },
-  setReanimatedAvailable: (isAvailable: boolean) => {
-    RNGestureHandlerModule.setReanimatedAvailable(isAvailable);
+  installUIRuntimeBindings: () => {
+    return RNGestureHandlerModule.installUIRuntimeBindings();
   },
 } as const;

package/src/v3/components/GestureButtons.tsx

@@ -15,17 +15,25 @@ import type {
 type CallbackEventType = GestureEvent<NativeHandlerData>;
 type EndCallbackEventType = GestureEndEvent<NativeHandlerData>;
 
-/**
- * @deprecated `RawButton` is deprecated, use `Clickable` instead
- */
-export const RawButton = createNativeWrapper<
+type RawButtonInnerProps = RawButtonProps & {
+  needsOffscreenAlphaCompositing?: boolean | undefined;
+};
+
+const RawButtonInner = createNativeWrapper<
   React.ComponentRef<typeof GestureHandlerButton>,
-  RawButtonProps
+  RawButtonInnerProps
 >(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: false,
 });
 
+/**
+ * @deprecated `RawButton` is deprecated, use `Clickable` instead
+ */
+export const RawButton = (props: RawButtonProps) => (
+  <RawButtonInner {...props} needsOffscreenAlphaCompositing />
+);
+
 /**
  * @deprecated `BaseButton` is deprecated, use `Touchable` instead
  */

package/src/v3/components/GestureButtonsProps.ts

@@ -16,6 +16,7 @@ export interface RawButtonProps
       | 'activeOpacity'
       | 'activeScale'
       | 'activeUnderlayOpacity'
+      | 'needsOffscreenAlphaCompositing'
     >,
     Omit<
       NativeWrapperProperties<React.ComponentRef<typeof GestureHandlerButton>>,

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

@@ -5,6 +5,7 @@ import GestureHandlerButton from '../../../components/GestureHandlerButton';
 import { NativeDetector } from '../../detectors/NativeDetector';
 import { useNativeGesture } from '../../hooks';
 import type {
+  AnimationDuration,
   CallbackEventType,
   EndCallbackEventType,
   TouchableProps,
@@ -12,6 +13,8 @@ import type {
 
 const isAndroid = Platform.OS === 'android';
 const TRANSPARENT_RIPPLE = { rippleColor: 'transparent' as const };
+const DEFAULT_IN_DURATION_MS = 50;
+const DEFAULT_OUT_DURATION_MS = 100;
 
 enum PointerState {
   UNKNOWN,
@@ -19,11 +22,60 @@ enum PointerState {
   OUTSIDE,
 }
 
+// Clamp user-supplied durations to finite, non-negative milliseconds.
+// Negative, NaN, or Infinity values would produce invalid CSS transitions
+// on web and negative setTimeout delays in branch 3 of the press-out path.
+function sanitizeDuration(value: number): number {
+  return Number.isFinite(value) && value >= 0 ? value : 0;
+}
+
+function resolveAnimationDuration(value: AnimationDuration | undefined) {
+  if (value === undefined) {
+    return {
+      tapAnimationInDuration: DEFAULT_IN_DURATION_MS,
+      tapAnimationOutDuration: DEFAULT_OUT_DURATION_MS,
+      longPressAnimationOutDuration: DEFAULT_OUT_DURATION_MS,
+      hoverAnimationInDuration: DEFAULT_IN_DURATION_MS,
+      hoverAnimationOutDuration: DEFAULT_OUT_DURATION_MS,
+    };
+  }
+
+  if (typeof value === 'number') {
+    const sanitized = sanitizeDuration(value);
+    return {
+      tapAnimationInDuration: sanitized,
+      tapAnimationOutDuration: sanitized,
+      longPressAnimationOutDuration: sanitized,
+      hoverAnimationInDuration: sanitized,
+      hoverAnimationOutDuration: sanitized,
+    };
+  }
+
+  // The union guarantees variant 2 supplies top-level `in`/`out`, variant 3
+  // supplies both category objects — so per-category fallback to base is
+  // always defined for well-typed input; the 0 fallbacks here are unreachable.
+  const baseIn = 'in' in value ? value.in : 0;
+  const baseOut = 'out' in value ? value.out : 0;
+  const tapOut = value.tap?.out ?? baseOut;
+
+  return {
+    tapAnimationInDuration: sanitizeDuration(value.tap?.in ?? baseIn),
+    tapAnimationOutDuration: sanitizeDuration(tapOut),
+    longPressAnimationOutDuration: sanitizeDuration(
+      value.longPress?.out ?? tapOut
+    ),
+    hoverAnimationInDuration: sanitizeDuration(value.hover?.in ?? baseIn),
+    hoverAnimationOutDuration: sanitizeDuration(value.hover?.out ?? baseOut),
+  };
+}
+
 export const Touchable = (props: TouchableProps) => {
   const {
-    underlayColor = 'black',
+    underlayColor = 'transparent',
     defaultUnderlayOpacity = 0,
+    activeUnderlayOpacity = 0.105,
     defaultOpacity = 1,
+    animationDuration,
     androidRipple,
     delayLongPress = 600,
     onLongPress,
@@ -37,6 +89,9 @@ export const Touchable = (props: TouchableProps) => {
     ...rest
   } = props;
 
+  const resolvedDurations = resolveAnimationDuration(animationDuration);
+  const resolvedDelayLongPress = sanitizeDuration(delayLongPress);
+
   const shouldUseNativeRipple = isAndroid && androidRipple !== undefined;
 
   const pointerState = useRef<PointerState>(PointerState.UNKNOWN);
@@ -54,9 +109,12 @@ export const Touchable = (props: TouchableProps) => {
     longPressDetected.current = false;
 
     if (onLongPress && !longPressTimeout.current) {
-      longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
+      longPressTimeout.current = setTimeout(
+        wrappedLongPress,
+        resolvedDelayLongPress
+      );
     }
-  }, [onLongPress, delayLongPress, wrappedLongPress]);
+  }, [onLongPress, resolvedDelayLongPress, wrappedLongPress]);
 
   const onBegin = useCallback(
     (e: CallbackEventType) => {
@@ -155,11 +213,14 @@ export const Touchable = (props: TouchableProps) => {
       <GestureHandlerButton
         {...rest}
         {...rippleProps}
+        {...resolvedDurations}
         ref={ref ?? null}
         enabled={!disabled}
         defaultOpacity={defaultOpacity}
         defaultUnderlayOpacity={defaultUnderlayOpacity}
-        underlayColor={underlayColor}>
+        activeUnderlayOpacity={activeUnderlayOpacity}
+        underlayColor={underlayColor}
+        longPressDuration={resolvedDelayLongPress}>
         {children}
       </GestureHandlerButton>
     </NativeDetector>

package/src/v3/components/Touchable/TouchableProps.ts

@@ -17,11 +17,59 @@ type PressableAndroidRippleConfig = {
 
 type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
 
-export type TouchableProps = Omit<ButtonProps, RippleProps | 'enabled'> &
+type DurationProps =
+  | 'tapAnimationInDuration'
+  | 'tapAnimationOutDuration'
+  | 'longPressDuration'
+  | 'longPressAnimationOutDuration'
+  | 'hoverAnimationInDuration'
+  | 'hoverAnimationOutDuration';
+
+type InOutDuration = { in: number; out: number };
+type LongPressDuration = { out: number };
+
+/**
+ * Configuration for press / hover animation timing.
+ *
+ * - A single number applies to every phase of every category.
+ * - An object with top-level `in` / `out` sets the baseline; `tap` and
+ *   `hover` may override either side or both — any field left out
+ *   inherits the top-level value.
+ * - Alternatively, both categories may be specified in full without a
+ *   top-level baseline.
+ *
+ * `longPress` optionally customizes the press-out duration once the
+ * press has been held past `delayLongPress`. If omitted, the long-press
+ * release falls back to the resolved tap-out timing.
+ */
+export type AnimationDuration =
+  | number
+  | (InOutDuration & {
+      tap?: Partial<InOutDuration>;
+      hover?: Partial<InOutDuration>;
+      longPress?: LongPressDuration;
+    })
+  | {
+      tap: InOutDuration;
+      hover: InOutDuration;
+      longPress?: LongPressDuration;
+    };
+
+export type TouchableProps = Omit<
+  ButtonProps,
+  RippleProps | 'enabled' | DurationProps
+> &
   Omit<
     BaseButtonProps,
     keyof RawButtonProps | 'onActiveStateChange' | 'onPress'
   > & {
+    /**
+     * Press and hover animation durations, in milliseconds. Pass a single
+     * number to apply it to every phase, or an object to customize per phase
+     * and per category. Defaults to 50ms for the in phase and 100ms for the
+     * out phase.
+     */
+    animationDuration?: AnimationDuration | undefined;
     /**
      * Configuration for the ripple effect on Android.
      */