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

package/src/v3/components/Pressable.tsx

@@ -5,42 +5,43 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  PressableDimensions,
-  PressableEvent,
-  PressableProps,
-} from '../../components/Pressable/PressableProps';
-import {
+import type {
   Insets,
   LayoutChangeEvent,
-  Platform,
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import {
-  addInsets,
-  numberAsInset,
-  gestureTouchToPressableEvent,
-  isTouchWithinInset,
-  gestureToPressableEvent,
-} from '../../components/Pressable/utils';
+import { Platform } from 'react-native';
+
+import type {
+  PressableDimensions,
+  PressableEvent,
+  PressableProps,
+} from '../../components/Pressable/PressableProps';
 import {
   getStatesConfig,
   StateMachineEvent,
 } from '../../components/Pressable/stateDefinitions';
 import { PressableStateMachine } from '../../components/Pressable/StateMachine';
+import {
+  addInsets,
+  gestureToPressableEvent,
+  gestureTouchToPressableEvent,
+  isTouchWithinInset,
+  numberAsInset,
+} from '../../components/Pressable/utils';
+import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
+import { useIsScreenReaderEnabled } from '../../useIsScreenReaderEnabled';
+import { INT32_MAX, isTestEnv } from '../../utils';
+import { GestureDetector } from '../detectors';
 import {
   useHoverGesture,
   useLongPressGesture,
   useNativeGesture,
   useSimultaneousGestures,
 } from '../hooks';
-import { GestureDetector } from '../detectors';
 import { PureNativeButton } from './GestureButtons';
 
-import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
-import { INT32_MAX, isTestEnv } from '../../utils';
-
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
 
@@ -199,11 +200,16 @@ const Pressable = (props: PressableProps) => {
   );
 
   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);
@@ -257,7 +263,7 @@ const Pressable = (props: PressableProps) => {
       );
     },
     onTouchesUp: () => {
-      if (Platform.OS === 'android') {
+      if (Platform.OS === 'android' && !isScreenReaderEnabled) {
         // Prevents potential soft-locks
         stateMachine.reset();
         handleFinalize();
@@ -268,13 +274,13 @@ const Pressable = (props: PressableProps) => {
       stateMachine.reset();
       handlePressOut(pressableEvent, false);
     },
-    onFinalize: (_event, success) => {
+    onFinalize: (event) => {
       if (Platform.OS !== 'web') {
         return;
       }
 
       stateMachine.handleEvent(
-        success ? StateMachineEvent.FINALIZE : StateMachineEvent.CANCEL
+        event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
       );
 
       handleFinalize();
@@ -307,19 +313,17 @@ const Pressable = (props: PressableProps) => {
         stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
       }
     },
-    onFinalize: (_event, success) => {
+    onFinalize: (event) => {
       // On Web we use LongPress.onFinalize instead of Native.onFinalize,
       // as Native cancels on mouse move, and LongPress does not.
       if (Platform.OS === 'web') {
         return;
       }
       stateMachine.handleEvent(
-        success ? StateMachineEvent.FINALIZE : StateMachineEvent.CANCEL
+        event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
       );
 
-      if (Platform.OS !== 'ios') {
-        handleFinalize();
-      }
+      handleFinalize();
     },
     enabled: disabled !== true,
     disableReanimated: true,
@@ -327,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

@@ -0,0 +1,167 @@
+import React, { useCallback, useRef } from 'react';
+import { Platform } from 'react-native';
+
+import GestureHandlerButton from '../../../components/GestureHandlerButton';
+import { NativeDetector } from '../../detectors/NativeDetector';
+import { useNativeGesture } from '../../hooks';
+import type {
+  CallbackEventType,
+  EndCallbackEventType,
+  TouchableProps,
+} from './TouchableProps';
+
+const isAndroid = Platform.OS === 'android';
+const TRANSPARENT_RIPPLE = { rippleColor: 'transparent' as const };
+
+enum PointerState {
+  UNKNOWN,
+  INSIDE,
+  OUTSIDE,
+}
+
+export const Touchable = (props: TouchableProps) => {
+  const {
+    underlayColor = 'black',
+    defaultUnderlayOpacity = 0,
+    defaultOpacity = 1,
+    androidRipple,
+    delayLongPress = 600,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    children,
+    disabled = false,
+    cancelOnLeave = true,
+    ref,
+    ...rest
+  } = props;
+
+  const shouldUseNativeRipple = isAndroid && androidRipple !== undefined;
+
+  const pointerState = useRef<PointerState>(PointerState.UNKNOWN);
+  const longPressDetected = useRef(false);
+  const longPressTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+
+  const wrappedLongPress = useCallback(() => {
+    longPressDetected.current = true;
+    onLongPress?.();
+  }, [onLongPress]);
+
+  const startLongPressTimer = useCallback(() => {
+    longPressDetected.current = false;
+
+    if (onLongPress && !longPressTimeout.current) {
+      longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
+    }
+  }, [onLongPress, delayLongPress, 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) => {
+    if (!e.pointerInside && longPressTimeout.current !== undefined) {
+      clearTimeout(longPressTimeout.current);
+      longPressTimeout.current = undefined;
+    }
+  }, []);
+
+  const onFinalize = useCallback(
+    (e: EndCallbackEventType) => {
+      if (pointerState.current === PointerState.INSIDE) {
+        onPressOut?.(e);
+      }
+
+      if (!e.canceled && !longPressDetected.current && e.pointerInside) {
+        onPress?.(e);
+      }
+
+      pointerState.current = PointerState.UNKNOWN;
+
+      if (longPressTimeout.current !== undefined) {
+        clearTimeout(longPressTimeout.current);
+        longPressTimeout.current = undefined;
+      }
+    },
+    [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,
+        rippleRadius: androidRipple?.radius,
+        borderless: androidRipple?.borderless,
+        foreground: androidRipple?.foreground,
+      }
+    : TRANSPARENT_RIPPLE;
+
+  return (
+    <NativeDetector gesture={nativeGesture}>
+      <GestureHandlerButton
+        {...rest}
+        {...rippleProps}
+        ref={ref ?? null}
+        enabled={!disabled}
+        defaultOpacity={defaultOpacity}
+        defaultUnderlayOpacity={defaultUnderlayOpacity}
+        underlayColor={underlayColor}>
+        {children}
+      </GestureHandlerButton>
+    </NativeDetector>
+  );
+};

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

@@ -0,0 +1,55 @@
+import type { PressableAndroidRippleConfig as RNPressableAndroidRippleConfig } from 'react-native';
+
+import type { ButtonProps } from '../../../components/GestureHandlerButton';
+import type { NativeHandlerData } from '../../hooks/gestures/native/NativeTypes';
+import type { GestureEndEvent, GestureEvent } from '../../types';
+import type { BaseButtonProps, RawButtonProps } from '../GestureButtonsProps';
+
+export type CallbackEventType = GestureEvent<NativeHandlerData>;
+export type EndCallbackEventType = GestureEndEvent<NativeHandlerData>;
+
+type PressableAndroidRippleConfig = {
+  [K in keyof RNPressableAndroidRippleConfig]?: Exclude<
+    RNPressableAndroidRippleConfig[K],
+    null
+  >;
+};
+
+type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
+
+export type TouchableProps = Omit<ButtonProps, RippleProps | 'enabled'> &
+  Omit<
+    BaseButtonProps,
+    keyof RawButtonProps | 'onActiveStateChange' | 'onPress'
+  > & {
+    /**
+     * Configuration for the ripple effect on Android.
+     */
+    androidRipple?: PressableAndroidRippleConfig | undefined;
+
+    /**
+     * Called when the component gets pressed.
+     */
+    onPress?: ((event: CallbackEventType) => void) | undefined;
+
+    /**
+     * Called when pointer touches the component.
+     */
+    onPressIn?: ((event: CallbackEventType) => void) | undefined;
+
+    /**
+     * Called when pointer is released from the component.
+     */
+    onPressOut?: ((event: CallbackEventType) => void) | undefined;
+
+    /**
+     * Whether the component should ignore touches. By default set to false.
+     */
+    disabled?: boolean | undefined;
+
+    /**
+     * Whether the touch should be canceled when pointer leaves the component. By default set to true.
+     * On web this prop doesn't have any effect and behaves as if `true` was set.
+     */
+    cancelOnLeave?: boolean | undefined;
+  };

package/src/v3/components/index.ts

@@ -1,24 +1,23 @@
-export type {
-  RawButtonProps,
-  BaseButtonProps,
-  RectButtonProps,
-  BorderlessButtonProps,
-} from './GestureButtonsProps';
-
 export {
-  RawButton,
   BaseButton,
-  RectButton,
   BorderlessButton,
   PureNativeButton,
+  RawButton,
+  RectButton,
 } from './GestureButtons';
-
+export type {
+  BaseButtonProps,
+  BorderlessButtonProps,
+  RawButtonProps,
+  RectButtonProps,
+} from './GestureButtonsProps';
 export {
+  FlatList,
+  RefreshControl,
   ScrollView,
   Switch,
   TextInput,
-  FlatList,
-  RefreshControl,
 } from './GestureComponents';
-
 export { default as Pressable } from './Pressable';
+export { Touchable } from './Touchable/Touchable';
+export type { TouchableProps } from './Touchable/TouchableProps';

package/src/v3/createNativeWrapper.tsx

@@ -1,26 +1,24 @@
 import React, { useEffect } from 'react';
 
-import { NativeWrapperProps } from './hooks/utils';
-import { useNativeGesture } from './hooks/gestures';
-import { NativeDetector } from './detectors/NativeDetector';
-import type { NativeWrapperProperties } from './types/NativeWrapperType';
-import { NativeGesture } from './hooks/gestures/native/useNativeGesture';
 import { GestureDetectorType, InterceptingGestureDetector } from './detectors';
+import { NativeDetector } from './detectors/NativeDetector';
 import { VirtualDetector } from './detectors/VirtualDetector/VirtualDetector';
+import { useNativeGesture } from './hooks/gestures';
+import { NativeWrapperProps } from './hooks/utils';
+import type {
+  NativeWrapperProperties,
+  WrapperSpecificProperties,
+} from './types/NativeWrapperType';
 
-export default function createNativeWrapper<P>(
-  Component: React.ComponentType<P>,
-  config: Readonly<NativeWrapperProperties> = {},
+export default function createNativeWrapper<TRef = unknown, TProps = unknown>(
+  Component: React.ComponentType<TProps>,
+  config: Readonly<
+    Omit<NativeWrapperProperties<TRef>, keyof WrapperSpecificProperties<TRef>>
+  > = {},
   detectorType: GestureDetectorType = GestureDetectorType.Native
 ) {
   const ComponentWrapper = (
-    props: P &
-      NativeWrapperProperties & {
-        ref?: React.RefObject<unknown>;
-        onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER?: (
-          gesture: NativeGesture
-        ) => void;
-      }
+    props: TProps & NativeWrapperProperties<TRef | null>
   ) => {
     const { ref, onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER, ...restProps } =
       props;
@@ -43,7 +41,7 @@ export default function createNativeWrapper<P>(
           enabled: props.enabled,
           hitSlop: props.hitSlop,
           testID: props.testID,
-        } as P,
+        } as TProps,
       }
     );
 

package/src/v3/detectors/GestureDetector.tsx

@@ -1,15 +1,19 @@
-import { NativeDetectorProps } from './common';
 import { BaseGesture } from '../../handlers/gestures/gesture';
-import { NativeDetector } from './NativeDetector';
 import { ComposedGesture } from '../../handlers/gestures/gestureComposition';
-import {
-  GestureDetectorProps as LegacyGestureDetectorProps,
-  GestureDetector as LegacyGestureDetector,
-} from '../../handlers/gestures/GestureDetector';
+import type { GestureDetectorProps as LegacyGestureDetectorProps } from '../../handlers/gestures/GestureDetector';
+import { GestureDetector as LegacyGestureDetector } from '../../handlers/gestures/GestureDetector';
+import type { NativeDetectorProps } from './common';
+import { NativeDetector } from './NativeDetector';
 import { useEnsureGestureHandlerRootView } from './useEnsureGestureHandlerRootView';
 
-export function GestureDetector<THandlerData, TConfig>(
-  props: NativeDetectorProps<THandlerData, TConfig> | LegacyGestureDetectorProps
+export function GestureDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>(
+  props:
+    | NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>
+    | LegacyGestureDetectorProps
 ) {
   useEnsureGestureHandlerRootView();
 
@@ -22,7 +26,11 @@ export function GestureDetector<THandlerData, TConfig>(
 
   return (
     <NativeDetector
-      {...(props as NativeDetectorProps<THandlerData, TConfig>)}
+      {...(props as NativeDetectorProps<
+        TConfig,
+        THandlerData,
+        TExtendedHandlerData
+      >)}
     />
   );
 }

package/src/v3/detectors/HostGestureDetector.web.tsx

@@ -1,25 +1,34 @@
-import React, { Ref, RefObject, useEffect, useMemo, useRef } from 'react';
-import RNGestureHandlerModule from '../../RNGestureHandlerModule.web';
-import { ActionType } from '../../ActionType';
-import { PropsRef } from '../../web/interfaces';
+import type { Ref, RefObject } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { View } from 'react-native';
+
+import { ActionType } from '../../ActionType';
+import type {
+  TouchAction,
+  UserSelect,
+} from '../../handlers/gestureHandlerCommon';
+import RNGestureHandlerModule from '../../RNGestureHandlerModule.web';
 import { tagMessage } from '../../utils';
-import { TouchAction, UserSelect } from '../../handlers/gestureHandlerCommon';
+import { type PropsRef } from '../../web/interfaces';
+import { useNativeGestureRole } from './useNativeGestureRole';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
   handlerTags: number[];
   moduleId: number;
   children?: React.ReactNode;
   virtualChildren?: Set<VirtualChildrenWeb>;
-  userSelect?: UserSelect;
-  touchAction?: TouchAction;
-  enableContextMenu?: boolean;
+  userSelect?: UserSelect | undefined;
+  touchAction?: TouchAction | undefined;
+  enableContextMenu?: boolean | undefined;
 }
 
 export interface VirtualChildrenWeb {
   viewTag: number;
   handlerTags: number[];
   viewRef: RefObject<Element | null>;
+  userSelect?: UserSelect | undefined;
+  touchAction?: TouchAction | undefined;
+  enableContextMenu?: boolean | undefined;
 }
 
 const EMPTY_HANDLERS = new Set<number>();
@@ -62,6 +71,14 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         ).shouldAttachGestureToChildView() &&
         actionType === ActionType.NATIVE_DETECTOR
       ) {
+        if (viewRef.current!.childElementCount > 1) {
+          throw new Error(
+            tagMessage(
+              'Cannot have more than one child view when native gesture handlers are attached to the detector'
+            )
+          );
+        }
+
         RNGestureHandlerModule.attachGestureHandler(
           tag,
           viewRef.current!.firstChild,
@@ -87,6 +104,8 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
     });
   };
 
+  useNativeGestureRole(viewRef, children);
+
   useEffect(() => {
     const shouldUpdateDOMProps =
       propsRef.current.userSelect !== props.userSelect ||
@@ -107,20 +126,6 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   }, [props]);
 
   useEffect(() => {
-    if (React.Children.count(children) !== 1) {
-      throw new Error(
-        tagMessage('Detector expected to have exactly one child element')
-      );
-    }
-  }, [children]);
-
-  useEffect(() => {
-    if (React.Children.count(children) !== 1) {
-      throw new Error(
-        tagMessage('Detector expected to have exactly one child element')
-      );
-    }
-
     detachHandlers(handlerTagsSet, attachedHandlers.current);
 
     attachHandlers(
@@ -174,6 +179,14 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         attachedVirtualHandlers.current.get(child.viewTag)!,
         ActionType.VIRTUAL_DETECTOR
       );
+
+      currentHandlerTags.forEach((tag) => {
+        RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+          userSelect: child.userSelect,
+          touchAction: child.touchAction,
+          enableContextMenu: child.enableContextMenu,
+        });
+      });
     });
   }, [props.virtualChildren]);
 

package/src/v3/detectors/NativeDetector.tsx

@@ -1,22 +1,24 @@
 import React, { useMemo } from 'react';
-import HostGestureDetector from './HostGestureDetector';
-import { configureRelations, ensureNativeDetectorComponent } from './utils';
+import { Platform } from 'react-native';
+
 import { isComposedGesture } from '../hooks/utils/relationUtils';
-import {
-  AnimatedNativeDetector,
-  NativeDetectorProps,
-  nativeDetectorStyles,
-} from './common';
+import type { NativeDetectorProps } from './common';
+import { AnimatedNativeDetector, nativeDetectorStyles } from './common';
+import HostGestureDetector from './HostGestureDetector';
 import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
-import { Platform } from 'react-native';
+import { configureRelations, ensureNativeDetectorComponent } from './utils';
 
-export function NativeDetector<THandlerData, TConfig>({
+export function NativeDetector<
+  TConfig,
+  THandlerData,
+  TExtendedHandlerData extends THandlerData,
+>({
   gesture,
   children,
   touchAction,
   userSelect,
   enableContextMenu,
-}: NativeDetectorProps<THandlerData, TConfig>) {
+}: NativeDetectorProps<TConfig, THandlerData, TExtendedHandlerData>) {
   const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
     : gesture.config.shouldUseReanimatedDetector

package/src/v3/detectors/ReanimatedNativeDetector.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useMemo, useRef } from 'react';
-import {
-  NativeEventsManager,
-  Reanimated,
-} from '../../handlers/gestures/reanimatedWrapper';
+import { findNodeHandle } from 'react-native';
+
+import type { NativeEventsManager } from '../../handlers/gestures/reanimatedWrapper';
+import { Reanimated } from '../../handlers/gestures/reanimatedWrapper';
 import HostGestureDetector, {
   type RNGestureHandlerDetectorNativeComponentProps,
 } from './HostGestureDetector';
-import { findNodeHandle } from 'react-native';
 
 let NativeEventsManagerImpl = Reanimated?.NativeEventsManager;