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

package/src/components/GestureHandlerButton.web.tsx

@@ -1,6 +1,222 @@
 import * as React from 'react';
+import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { View } from 'react-native';
 
-export default React.forwardRef<React.ComponentRef<typeof View>>(
-  (props, ref) => <View ref={ref} accessibilityRole="button" {...props} />
-);
+import { NativeGestureRole } from '../web/interfaces';
+import { GestureLifecycleEvent } from '../web/tools/GestureLifecycleEvents';
+
+type ButtonProps = ViewProps & {
+  ref?: React.Ref<React.ComponentRef<typeof View>>;
+  enabled?: boolean;
+  pressAndHoldAnimationDuration?: number;
+  tapAnimationDuration?: number;
+  activeOpacity?: number;
+  activeScale?: number;
+  activeUnderlayOpacity?: number;
+  defaultOpacity?: number;
+  defaultScale?: number;
+  defaultUnderlayOpacity?: number;
+  underlayColor?: ColorValue;
+};
+
+export const ButtonComponent = ({
+  ref: externalRef,
+  enabled = true,
+  pressAndHoldAnimationDuration: pressAndHoldAnimationDurationProp = -1,
+  tapAnimationDuration: tapAnimationDurationProp = 100,
+  activeOpacity = 1,
+  activeScale = 1,
+  activeUnderlayOpacity = 0,
+  defaultOpacity = 1,
+  defaultScale = 1,
+  defaultUnderlayOpacity = 0,
+  underlayColor,
+  style,
+  children,
+  ...rest
+}: ButtonProps) => {
+  const tapAnimationDuration =
+    tapAnimationDurationProp < 0 ? 0 : tapAnimationDurationProp;
+  const pressAndHoldAnimationDuration =
+    pressAndHoldAnimationDurationProp < 0
+      ? tapAnimationDuration
+      : pressAndHoldAnimationDurationProp;
+
+  const [pressed, setPressed] = React.useState(false);
+  const [currentDuration, setCurrentDuration] = React.useState(
+    pressAndHoldAnimationDuration
+  );
+  const pressInTimestamp = React.useRef(0);
+  const pressOutTimer = React.useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const gestureEnabledRef = React.useRef(true);
+  const viewRef = React.useRef<HTMLElement | null>(null);
+
+  const setRef = React.useCallback(
+    (node: React.ComponentRef<typeof View> | null) => {
+      viewRef.current = node as unknown as HTMLElement | null;
+      if (typeof externalRef === 'function') {
+        externalRef(node);
+      } else if (externalRef != null) {
+        externalRef.current = node;
+      }
+    },
+    [externalRef]
+  );
+
+  React.useEffect(() => {
+    const node = viewRef.current;
+
+    const handleGestureBegan = () => {
+      gestureEnabledRef.current = true;
+    };
+    const handleGestureCanceled = () => {
+      gestureEnabledRef.current = false;
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
+        pressOutTimer.current = null;
+      }
+      pressInTimestamp.current = 0;
+      setPressed(false);
+    };
+
+    node?.addEventListener(GestureLifecycleEvent.Began, handleGestureBegan);
+    node?.addEventListener(
+      GestureLifecycleEvent.Canceled,
+      handleGestureCanceled
+    );
+
+    return () => {
+      node?.removeEventListener(
+        GestureLifecycleEvent.Began,
+        handleGestureBegan
+      );
+      node?.removeEventListener(
+        GestureLifecycleEvent.Canceled,
+        handleGestureCanceled
+      );
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
+      }
+    };
+  }, []);
+
+  const pressIn = React.useCallback(
+    (event: NativeSyntheticEvent<unknown>) => {
+      if (!enabled || !gestureEnabledRef.current) {
+        return;
+      }
+
+      event.stopPropagation();
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
+        pressOutTimer.current = null;
+      }
+      pressInTimestamp.current = performance.now();
+      setCurrentDuration(pressAndHoldAnimationDuration);
+      setPressed(true);
+    },
+    [enabled, pressAndHoldAnimationDuration]
+  );
+
+  const pressOut = React.useCallback(
+    (event: NativeSyntheticEvent<unknown>) => {
+      // Only release if a press-in was actually recorded — guards against
+      // stray pointer events and lets us complete the release cycle even if
+      // `enabled` flipped to false between press-in and press-out.
+      if (pressInTimestamp.current === 0 || !gestureEnabledRef.current) {
+        return;
+      }
+
+      event.stopPropagation();
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
+        pressOutTimer.current = null;
+      }
+      const elapsed = performance.now() - pressInTimestamp.current;
+      pressInTimestamp.current = 0;
+
+      if (elapsed >= pressAndHoldAnimationDuration) {
+        setCurrentDuration(pressAndHoldAnimationDuration);
+        setPressed(false);
+        // elapsed * 2 to ensure there is at least half of the tapAnimationDuration left for the animation to play
+      } else if (elapsed * 2 >= tapAnimationDuration) {
+        setCurrentDuration(elapsed);
+        setPressed(false);
+      } else {
+        // Let the in-progress CSS press-in transition continue; schedule press-out after remaining time
+        const remaining = tapAnimationDuration - elapsed;
+        pressOutTimer.current = setTimeout(() => {
+          pressOutTimer.current = null;
+          setCurrentDuration(tapAnimationDuration);
+          setPressed(false);
+        }, remaining);
+      }
+    },
+    [pressAndHoldAnimationDuration, tapAnimationDuration]
+  );
+
+  const currentUnderlayOpacity = pressed
+    ? activeUnderlayOpacity
+    : defaultUnderlayOpacity;
+  const hasUnderlay = underlayColor != null;
+  const hasOpacity = activeOpacity !== 1 || defaultOpacity !== 1;
+  const currentOpacity = pressed ? activeOpacity : defaultOpacity;
+  const hasScale = activeScale !== 1 || defaultScale !== 1;
+  const currentScale = pressed ? activeScale : defaultScale;
+
+  const easing = 'cubic-bezier(0.5, 1, 0.89, 1)';
+  const transitionProps: string[] = [];
+  if (hasOpacity) {
+    transitionProps.push(`opacity ${currentDuration}ms ${easing}`);
+  }
+  if (hasScale) {
+    transitionProps.push(`transform ${currentDuration}ms ${easing}`);
+  }
+  const transition = transitionProps.join(', ');
+
+  return (
+    <View
+      ref={setRef}
+      accessibilityRole="button"
+      style={[
+        style,
+        {
+          ...(hasOpacity && { opacity: currentOpacity }),
+          ...(hasScale && { transform: [{ scale: currentScale }] }),
+          // @ts-ignore - web-only CSS property
+          transition,
+          // Clip the underlay to the view bounds (respects borderRadius).
+          ...(hasUnderlay && { overflow: 'hidden' }),
+        },
+      ]}
+      onPointerDown={pressIn}
+      onPointerUp={pressOut}
+      onPointerCancel={pressOut}
+      onPointerLeave={pressOut}
+      {...rest}>
+      {hasUnderlay && (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: underlayColor as string,
+            opacity: currentUnderlayOpacity,
+            // @ts-ignore - web-only CSS properties
+            transition: `opacity ${currentDuration}ms ${easing}`,
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+      {children}
+    </View>
+  );
+};
+
+ButtonComponent.displayName = NativeGestureRole.Button;
+
+export default ButtonComponent;

package/src/components/GestureHandlerRootView.android.tsx

@@ -1,6 +1,7 @@
+import type { PropsWithChildren } from 'react';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
 import { StyleSheet } from 'react-native';
+
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import type { RootViewNativeProps } from '../specs/RNGestureHandlerRootViewNativeComponent';
 import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';

package/src/components/GestureHandlerRootView.tsx

@@ -1,6 +1,7 @@
+import type { PropsWithChildren } from 'react';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import type { RootViewNativeProps } from '../specs/RNGestureHandlerRootViewNativeComponent';
 
@@ -12,9 +13,9 @@ export default function GestureHandlerRootView({
   ...rest
 }: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Provider value>
+    <GestureHandlerRootViewContext value>
       <View style={style ?? styles.container} {...rest} />
-    </GestureHandlerRootViewContext.Provider>
+    </GestureHandlerRootViewContext>
   );
 }
 

package/src/components/GestureHandlerRootView.web.tsx

@@ -1,6 +1,8 @@
+import type { PropsWithChildren } from 'react';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { View, ViewProps, StyleSheet } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
@@ -11,9 +13,9 @@ export default function GestureHandlerRootView({
   ...rest
 }: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Provider value>
+    <GestureHandlerRootViewContext value>
       <View style={style ?? styles.container} {...rest} />
-    </GestureHandlerRootViewContext.Provider>
+    </GestureHandlerRootViewContext>
   );
 }
 

package/src/components/Pressable/Pressable.tsx

@@ -5,42 +5,44 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { GestureObjects as Gesture } from '../../handlers/gestures/gestureObjects';
-import { GestureDetector } from '../../handlers/gestures/GestureDetector';
-import {
-  PressableEvent,
-  PressableDimensions,
-  LegacyPressableProps,
-} from './PressableProps';
-import {
+import type {
   Insets,
   LayoutChangeEvent,
-  Platform,
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import NativeButton from '../GestureHandlerButton';
+import { Platform } from 'react-native';
+
+import { GestureDetector } from '../../handlers/gestures/GestureDetector';
+import { GestureObjects as Gesture } from '../../handlers/gestures/gestureObjects';
+import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
+import { useIsScreenReaderEnabled } from '../../useIsScreenReaderEnabled';
+import { INT32_MAX, isTestEnv } from '../../utils';
+import { ButtonComponent as NativeButton } from '../GestureHandlerButton';
+import type { RelationPropName, RelationPropType } from '../utils';
+import { applyRelationProp } from '../utils';
+import type {
+  LegacyPressableProps,
+  PressableDimensions,
+  PressableEvent,
+} from './PressableProps';
+import { getStatesConfig, StateMachineEvent } from './stateDefinitions';
+import { PressableStateMachine } from './StateMachine';
 import {
-  gestureToPressableEvent,
   addInsets,
-  numberAsInset,
+  gestureToPressableEvent,
   gestureTouchToPressableEvent,
   isTouchWithinInset,
+  numberAsInset,
 } from './utils';
-import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
-import { INT32_MAX, isTestEnv } from '../../utils';
-import {
-  applyRelationProp,
-  RelationPropName,
-  RelationPropType,
-} from '../utils';
-import { getStatesConfig, StateMachineEvent } from './stateDefinitions';
-import { PressableStateMachine } from './StateMachine';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
 
-const Pressable = (props: LegacyPressableProps) => {
+/**
+ * @deprecated `LegacyPressable` is deprecated, use `Pressable` instead.
+ */
+const LegacyPressable = (props: LegacyPressableProps) => {
   const {
     testOnly_pressed,
     hitSlop,
@@ -199,11 +201,16 @@ const Pressable = (props: LegacyPressableProps) => {
   );
 
   const stateMachine = useMemo(() => new PressableStateMachine(), []);
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
   useEffect(() => {
-    const configuration = getStatesConfig(handlePressIn, handlePressOut);
+    const configuration = getStatesConfig(
+      handlePressIn,
+      handlePressOut,
+      isScreenReaderEnabled
+    );
     stateMachine.setStates(configuration);
-  }, [handlePressIn, handlePressOut, stateMachine]);
+  }, [handlePressIn, handlePressOut, stateMachine, isScreenReaderEnabled]);
 
   const hoverInTimeout = useRef<number | null>(null);
   const hoverOutTimeout = useRef<number | null>(null);
@@ -256,7 +263,7 @@ const Pressable = (props: LegacyPressableProps) => {
           );
         })
         .onTouchesUp(() => {
-          if (Platform.OS === 'android') {
+          if (Platform.OS === 'android' && !isScreenReaderEnabled) {
             // Prevents potential soft-locks
             stateMachine.reset();
             handleFinalize();
@@ -277,7 +284,7 @@ const Pressable = (props: LegacyPressableProps) => {
             handleFinalize();
           }
         }),
-    [stateMachine, handleFinalize, handlePressOut]
+    [stateMachine, handleFinalize, handlePressOut, isScreenReaderEnabled]
   );
 
   // RNButton is placed inside ButtonGesture to enable Android's ripple and to capture non-propagating events
@@ -316,7 +323,8 @@ const Pressable = (props: LegacyPressableProps) => {
               handleFinalize();
             }
           }
-        }),
+        })
+        .shouldActivateOnStart(Platform.OS === 'web'),
     [stateMachine, handlePressOut, handleFinalize]
   );
 
@@ -390,4 +398,4 @@ const Pressable = (props: LegacyPressableProps) => {
   );
 };
 
-export default Pressable;
+export default LegacyPressable;

package/src/components/Pressable/PressableProps.tsx

@@ -1,15 +1,16 @@
-import {
+import type {
   AccessibilityProps,
-  ViewProps,
   Insets,
-  StyleProp,
-  ViewStyle,
-  PressableStateCallbackType as RNPressableStateCallbackType,
   PressableAndroidRippleConfig as RNPressableAndroidRippleConfig,
+  PressableStateCallbackType as RNPressableStateCallbackType,
+  StyleProp,
   View,
+  ViewProps,
+  ViewStyle,
 } from 'react-native';
-import { RelationPropType } from '../utils';
-import { AnyGesture } from '../../v3/types';
+
+import type { AnyGesture } from '../../v3/types';
+import type { RelationPropType } from '../utils';
 
 export type PressableDimensions = { width: number; height: number };
 
@@ -26,7 +27,7 @@ export type InnerPressableEvent = {
   target: number;
   timestamp: number;
   touches: InnerPressableEvent[];
-  force?: number;
+  force?: number | undefined;
 };
 
 export type PressableEvent = { nativeEvent: InnerPressableEvent };

package/src/components/Pressable/StateMachine.tsx

@@ -1,4 +1,4 @@
-import { PressableEvent } from './PressableProps';
+import type { PressableEvent } from './PressableProps';
 
 export interface StateDefinition {
   eventName: string;

package/src/components/Pressable/index.ts

@@ -1,6 +1,6 @@
+export { default } from './Pressable';
 export type {
   LegacyPressableProps,
   PressableProps,
   PressableStateCallbackType,
 } from './PressableProps';
-export { default } from './Pressable';

package/src/components/Pressable/stateDefinitions.ts

@@ -1,6 +1,7 @@
 import { Platform } from 'react-native';
-import { PressableEvent } from './PressableProps';
-import { StateDefinition } from './StateMachine';
+
+import type { PressableEvent } from './PressableProps';
+import type { StateDefinition } from './StateMachine';
 
 export enum StateMachineEvent {
   NATIVE_BEGIN = 'nativeBegin',
@@ -29,6 +30,25 @@ function getAndroidStatesConfig(
   ];
 }
 
+function getAndroidAccessibilityStatesConfig(
+  handlePressIn: (event: PressableEvent) => void,
+  handlePressOut: (event: PressableEvent) => void
+) {
+  return [
+    {
+      eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
+      callback: handlePressIn,
+    },
+    {
+      eventName: StateMachineEvent.NATIVE_BEGIN,
+    },
+    {
+      eventName: StateMachineEvent.FINALIZE,
+      callback: handlePressOut,
+    },
+  ];
+}
+
 function getIosStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
   handlePressOut: (event: PressableEvent) => void
@@ -38,9 +58,12 @@ function getIosStatesConfig(
       eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
     },
     {
-      eventName: StateMachineEvent.NATIVE_START,
+      eventName: StateMachineEvent.NATIVE_BEGIN,
       callback: handlePressIn,
     },
+    {
+      eventName: StateMachineEvent.NATIVE_START,
+    },
     {
       eventName: StateMachineEvent.FINALIZE,
       callback: handlePressOut,
@@ -109,10 +132,13 @@ function getUniversalStatesConfig(
 
 export function getStatesConfig(
   handlePressIn: (event: PressableEvent) => void,
-  handlePressOut: (event: PressableEvent) => void
+  handlePressOut: (event: PressableEvent) => void,
+  screenReaderActive: boolean
 ): StateDefinition[] {
   if (Platform.OS === 'android') {
-    return getAndroidStatesConfig(handlePressIn, handlePressOut);
+    return screenReaderActive
+      ? getAndroidAccessibilityStatesConfig(handlePressIn, handlePressOut)
+      : getAndroidStatesConfig(handlePressIn, handlePressOut);
   } else if (Platform.OS === 'ios') {
     return getIosStatesConfig(handlePressIn, handlePressOut);
   } else if (Platform.OS === 'web') {

package/src/components/Pressable/utils.ts

@@ -1,19 +1,21 @@
-import { Insets } from 'react-native';
-import {
-  HoverGestureHandlerEventPayload,
-  LongPressGestureHandlerEventPayload,
-} from '../../handlers/GestureHandlerEventPayload';
-import {
-  TouchData,
+import type { Insets } from 'react-native';
+
+import type {
   GestureStateChangeEvent,
   GestureTouchEvent,
+  TouchData,
 } from '../../handlers/gestureHandlerCommon';
-import {
-  PressableDimensions,
+import type {
+  HoverGestureHandlerEventPayload,
+  LongPressGestureHandlerEventPayload,
+} from '../../handlers/GestureHandlerEventPayload';
+import type { HoverGestureEvent, LongPressGestureEvent } from '../../v3';
+import type { HoverGestureActiveEvent } from '../../v3/hooks';
+import type {
   InnerPressableEvent,
+  PressableDimensions,
   PressableEvent,
 } from './PressableProps';
-import { HoverGestureEvent, LongPressGestureEvent } from '../../v3';
 
 const numberAsInset = (value: number): Insets => ({
   left: value,
@@ -51,6 +53,7 @@ const gestureToPressEvent = (
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
     | HoverGestureEvent
+    | HoverGestureActiveEvent
     | LongPressGestureEvent,
   timestamp: number,
   targetId: number
@@ -82,6 +85,7 @@ const gestureToPressableEvent = (
         HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
       >
     | HoverGestureEvent
+    | HoverGestureActiveEvent
     | LongPressGestureEvent
 ): PressableEvent => {
   const timestamp = Date.now();
@@ -139,9 +143,9 @@ const gestureTouchToPressableEvent = (
 };
 
 export {
-  numberAsInset,
   addInsets,
-  isTouchWithinInset,
   gestureToPressableEvent,
   gestureTouchToPressableEvent,
+  isTouchWithinInset,
+  numberAsInset,
 };