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

package/src/handlers/gestures/panGesture.ts

@@ -4,6 +4,9 @@ import type { PanGestureConfig } from '../PanGestureHandler';
 import type { BaseGestureConfig } from './gesture';
 import { ContinousBaseGesture } from './gesture';
 
+/**
+ * @deprecated `PanGestureChangeEventPayload` is deprecated and will be removed in the future. Please use `PanGestureActiveEvent` instead.
+ */
 export type PanGestureChangeEventPayload = {
   changeX: number;
   changeY: number;
@@ -30,6 +33,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated `PanGesture` is deprecated and will be removed in the future. Please use `usePanGesture` instead.
+ */
 export class PanGesture extends ContinousBaseGesture<
   PanGestureHandlerEventPayload,
   PanGestureChangeEventPayload
@@ -219,4 +225,7 @@ export class PanGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `PanGestureType` is deprecated and will be removed in the future. Please use `PanGesture` instead.
+ */
 export type PanGestureType = InstanceType<typeof PanGesture>;

package/src/handlers/gestures/pinchGesture.ts

@@ -2,6 +2,9 @@ import type { GestureUpdateEvent } from '../gestureHandlerCommon';
 import type { PinchGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 import { ContinousBaseGesture } from './gesture';
 
+/**
+ * @deprecated `PinchGestureChangeEventPayload` is deprecated and will be removed in the future. Please use `PinchGestureActiveEvent` instead.
+ */
 export type PinchGestureChangeEventPayload = {
   scaleChange: number;
 };
@@ -25,6 +28,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated `PinchGesture` is deprecated and will be removed in the future. Please use `usePinchGesture` instead.
+ */
 export class PinchGesture extends ContinousBaseGesture<
   PinchGestureHandlerEventPayload,
   PinchGestureChangeEventPayload
@@ -48,4 +54,7 @@ export class PinchGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `PinchGestureType` is deprecated and will be removed in the future. Please use `PinchGesture` instead.
+ */
 export type PinchGestureType = InstanceType<typeof PinchGesture>;

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/handlers/gestures/rotationGesture.ts

@@ -25,6 +25,9 @@ function changeEventCalculator(
   return { ...current, ...changePayload };
 }
 
+/**
+ * @deprecated `RotationGesture` is deprecated and will be removed in the future. Please use `useRotationGesture` instead.
+ */
 export class RotationGesture extends ContinousBaseGesture<
   RotationGestureHandlerEventPayload,
   RotationGestureChangeEventPayload
@@ -48,4 +51,7 @@ export class RotationGesture extends ContinousBaseGesture<
   }
 }
 
+/**
+ * @deprecated `RotationGestureType` is deprecated and will be removed in the future. Please use `RotationGesture` instead.
+ */
 export type RotationGestureType = InstanceType<typeof RotationGesture>;

package/src/handlers/gestures/tapGesture.ts

@@ -3,6 +3,9 @@ import type { TapGestureConfig } from '../TapGestureHandler';
 import type { BaseGestureConfig } from './gesture';
 import { BaseGesture } from './gesture';
 
+/**
+ * @deprecated `TapGesture` is deprecated and will be removed in the future. Please use `useTapGesture` instead.
+ */
 export class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
   public override config: BaseGestureConfig & TapGestureConfig = {};
 
@@ -84,4 +87,7 @@ export class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
   }
 }
 
+/**
+ * @deprecated `TapGestureType` is deprecated and will be removed in the future. Please use `TapGesture` instead.
+ */
 export type TapGestureType = InstanceType<typeof TapGesture>;

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: true,
+  shouldActivateOnStart: false,
 });
 
+/**
+ * @deprecated `RawButton` is deprecated, use `Clickable` instead
+ */
+export const RawButton = (props: RawButtonProps) => (
+  <RawButtonInner {...props} needsOffscreenAlphaCompositing />
+);
+
 /**
  * @deprecated `BaseButton` is deprecated, use `Touchable` instead
  */
@@ -69,16 +77,16 @@ export const BaseButton = (props: BaseButtonProps) => {
   };
 
   const onDeactivate = (e: EndCallbackEventType) => {
+    props.onDeactivate?.(e);
+  };
+
+  const onFinalize = (e: EndCallbackEventType) => {
     onActiveStateChange?.(false);
 
     if (!e.canceled && !longPressDetected.current) {
       onPress?.(e.pointerInside);
     }
 
-    props.onDeactivate?.(e);
-  };
-
-  const onFinalize = (e: EndCallbackEventType) => {
     if (longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;

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/Pressable.tsx

@@ -308,7 +308,7 @@ const Pressable = (props: PressableProps) => {
       stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
     },
     onActivate: () => {
-      if (Platform.OS !== 'android' && Platform.OS !== 'ios') {
+      if (Platform.OS !== 'android') {
         // Native.onActivate is broken with Android + hitSlop
         stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
       }
@@ -331,6 +331,7 @@ const Pressable = (props: PressableProps) => {
     block,
     requireToFail,
     hitSlop: appliedHitSlop,
+    shouldActivateOnStart: Platform.OS === 'web',
   });
 
   const gesture = useSimultaneousGestures(

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

@@ -1,46 +1,100 @@
 import React, { useCallback, useRef } from 'react';
 import { Platform } from 'react-native';
 
-import type { ButtonProps } from '../../../components/GestureHandlerButton';
 import GestureHandlerButton from '../../../components/GestureHandlerButton';
-import createNativeWrapper from '../../createNativeWrapper';
+import { NativeDetector } from '../../detectors/NativeDetector';
+import { useNativeGesture } from '../../hooks';
 import type {
+  AnimationDuration,
   CallbackEventType,
   EndCallbackEventType,
   TouchableProps,
 } from './TouchableProps';
 
-const TouchableButton = createNativeWrapper<
-  React.ComponentRef<typeof GestureHandlerButton>,
-  ButtonProps
->(GestureHandlerButton, {
-  shouldCancelWhenOutside: true,
-  shouldActivateOnStart: false,
-});
-
 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,
+  INSIDE,
+  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,
     onPress,
     onPressIn,
     onPressOut,
-    onActiveStateChange,
     children,
     disabled = false,
+    cancelOnLeave = true,
     ref,
     ...rest
   } = props;
 
+  const resolvedDurations = resolveAnimationDuration(animationDuration);
+  const resolvedDelayLongPress = sanitizeDuration(delayLongPress);
+
   const shouldUseNativeRipple = isAndroid && androidRipple !== undefined;
 
+  const pointerState = useRef<PointerState>(PointerState.UNKNOWN);
   const longPressDetected = useRef(false);
   const longPressTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
     undefined
@@ -55,57 +109,96 @@ 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) => {
       if (!e.pointerInside) {
+        pointerState.current = PointerState.OUTSIDE;
         return;
       }
 
       onPressIn?.(e);
       startLongPressTimer();
+
+      pointerState.current = PointerState.INSIDE;
     },
     [startLongPressTimer, onPressIn]
   );
 
-  const onActivate = useCallback(
-    (e: CallbackEventType) => {
-      onActiveStateChange?.(true);
-
-      if (!e.pointerInside && longPressTimeout.current !== undefined) {
-        clearTimeout(longPressTimeout.current);
-        longPressTimeout.current = undefined;
-      }
-    },
-    [onActiveStateChange]
-  );
+  const onActivate = useCallback((e: CallbackEventType) => {
+    if (!e.pointerInside && longPressTimeout.current !== undefined) {
+      clearTimeout(longPressTimeout.current);
+      longPressTimeout.current = undefined;
+    }
+  }, []);
 
-  const onDeactivate = useCallback(
+  const onFinalize = useCallback(
     (e: EndCallbackEventType) => {
-      onActiveStateChange?.(false);
+      if (pointerState.current === PointerState.INSIDE) {
+        onPressOut?.(e);
+      }
 
-      if (!e.canceled && !longPressDetected.current) {
-        onPress?.(e.pointerInside);
+      if (!e.canceled && !longPressDetected.current && e.pointerInside) {
+        onPress?.(e);
       }
-    },
-    [onActiveStateChange, onPress]
-  );
 
-  const onFinalize = useCallback(
-    (e: EndCallbackEventType) => {
-      onPressOut?.(e);
+      pointerState.current = PointerState.UNKNOWN;
 
       if (longPressTimeout.current !== undefined) {
         clearTimeout(longPressTimeout.current);
         longPressTimeout.current = undefined;
       }
     },
-    [onPressOut]
+    [onPressOut, onPress]
   );
 
+  const onUpdate = useCallback(
+    (e: CallbackEventType) => {
+      if (pointerState.current === PointerState.UNKNOWN) {
+        return;
+      }
+
+      if (e.pointerInside) {
+        if (pointerState.current === PointerState.OUTSIDE) {
+          onPressIn?.(e);
+        }
+        pointerState.current = PointerState.INSIDE;
+      } else {
+        if (pointerState.current === PointerState.INSIDE) {
+          onPressOut?.(e);
+
+          if (longPressTimeout.current !== undefined) {
+            clearTimeout(longPressTimeout.current);
+            longPressTimeout.current = undefined;
+          }
+        }
+        pointerState.current = PointerState.OUTSIDE;
+      }
+    },
+    [onPressIn, onPressOut]
+  );
+
+  const nativeGesture = useNativeGesture({
+    onBegin,
+    onActivate,
+    onFinalize,
+    onUpdate,
+    hitSlop: props.hitSlop,
+    testID: props.testID,
+    enabled: !disabled,
+    shouldCancelWhenOutside: cancelOnLeave,
+    disableReanimated: true,
+    shouldActivateOnStart: false,
+    disallowInterruption: true,
+    yieldsToContinuousGestures: true,
+  });
+
   const rippleProps = shouldUseNativeRipple
     ? {
         rippleColor: androidRipple?.color,
@@ -116,19 +209,20 @@ export const Touchable = (props: TouchableProps) => {
     : TRANSPARENT_RIPPLE;
 
   return (
-    <TouchableButton
-      {...rest}
-      {...rippleProps}
-      ref={ref ?? null}
-      enabled={!disabled}
-      onBegin={onBegin}
-      onActivate={onActivate}
-      onDeactivate={onDeactivate}
-      onFinalize={onFinalize}
-      defaultOpacity={defaultOpacity}
-      defaultUnderlayOpacity={defaultUnderlayOpacity}
-      underlayColor={underlayColor}>
-      {children}
-    </TouchableButton>
+    <NativeDetector gesture={nativeGesture}>
+      <GestureHandlerButton
+        {...rest}
+        {...rippleProps}
+        {...resolvedDurations}
+        ref={ref ?? null}
+        enabled={!disabled}
+        defaultOpacity={defaultOpacity}
+        defaultUnderlayOpacity={defaultUnderlayOpacity}
+        activeUnderlayOpacity={activeUnderlayOpacity}
+        underlayColor={underlayColor}
+        longPressDuration={resolvedDelayLongPress}>
+        {children}
+      </GestureHandlerButton>
+    </NativeDetector>
   );
 };