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

package/src/v3/components/GestureButtonsProps.ts

@@ -1,155 +1,83 @@
-import * as React from 'react';
-import {
-  AccessibilityProps,
-  ColorValue,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import type { NativeViewGestureHandlerProps } from '../../handlers/NativeViewGestureHandler';
+import type { StyleProp, ViewStyle } from 'react-native';
 
-export interface RawButtonProps
-  extends NativeViewGestureHandlerProps,
-    AccessibilityProps {
-  /**
-   * Defines if more than one button could be pressed simultaneously. By default
-   * set true.
-   */
-  exclusive?: boolean;
-  // TODO: we should transform props in `createNativeWrapper`
-  /**
-   * Android only.
-   *
-   * Defines color of native ripple animation used since API level 21.
-   */
-  rippleColor?: number | ColorValue | null;
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-
-  /**
-   * Style object, use it to set additional styles.
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Invoked on mount and layout changes.
-   */
-  onLayout?: (event: LayoutChangeEvent) => void;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPress?: Function | null;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressIn?: Function | null;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressOut?: Function | null;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onLongPress?: Function | null;
-}
-interface ButtonWithRefProps {
-  ref?: React.RefObject<any>;
-}
+import type GestureHandlerButton from '../../components/GestureHandlerButton';
+import type { ButtonProps } from '../../components/GestureHandlerButton';
+import type { NativeWrapperProperties } from '../types/NativeWrapperType';
 
+/**
+ * @deprecated `RawButtonProps` is deprecated, use `ClickableProps` instead
+ */
+export interface RawButtonProps
+  extends Omit<
+      ButtonProps,
+      | 'defaultOpacity'
+      | 'defaultScale'
+      | 'defaultUnderlayOpacity'
+      | 'activeOpacity'
+      | 'activeScale'
+      | 'activeUnderlayOpacity'
+    >,
+    Omit<
+      NativeWrapperProperties<React.ComponentRef<typeof GestureHandlerButton>>,
+      'hitSlop' | 'enabled'
+    > {}
+
+/**
+ * @deprecated `BaseButtonProps` is deprecated, use `ClickableProps` instead
+ */
 export interface BaseButtonProps extends RawButtonProps {
   /**
    * Called when the button gets pressed (analogous to `onPress` in
    * `TouchableHighlight` from RN core).
    */
-  onPress?: (pointerInside: boolean) => void;
+  onPress?: ((pointerInside: boolean) => void) | undefined;
 
   /**
    * Called when the button gets pressed and is held for `delayLongPress`
    * milliseconds.
    */
-  onLongPress?: () => void;
+  onLongPress?: (() => void) | undefined;
 
   /**
    * Called when button changes from inactive to active and vice versa. It
    * passes active state as a boolean variable as a first parameter for that
    * method.
    */
-  onActiveStateChange?: (active: boolean) => void;
+  onActiveStateChange?: ((active: boolean) => void) | undefined;
   style?: StyleProp<ViewStyle>;
 
   /**
    * Delay, in milliseconds, after which the `onLongPress` callback gets called.
    * Defaults to 600.
    */
-  delayLongPress?: number;
+  delayLongPress?: number | undefined;
 }
-export interface BaseButtonWithRefProps
-  extends BaseButtonProps,
-    ButtonWithRefProps {}
 
+/**
+ * @deprecated `RectButtonProps` is deprecated, use `ClickableProps` instead
+ */
 export interface RectButtonProps extends BaseButtonProps {
   /**
    * Background color that will be dimmed when button is in active state.
    */
-  underlayColor?: string;
+  underlayColor?: string | undefined;
 
   /**
    * iOS only.
    *
    * Opacity applied to the underlay when button is in active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
-export interface RectButtonWithRefProps
-  extends RectButtonProps,
-    ButtonWithRefProps {}
 
+/**
+ * @deprecated `BorderlessButtonProps` is deprecated, use `ClickableProps` instead
+ */
 export interface BorderlessButtonProps extends BaseButtonProps {
   /**
    * iOS only.
    *
    * Opacity applied to the button when it is in an active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
-export interface BorderlessButtonWithRefProps
-  extends BorderlessButtonProps,
-    ButtonWithRefProps {}

package/src/v3/components/GestureComponents.tsx

@@ -1,30 +1,31 @@
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  useState,
-  RefObject,
-} from 'react';
-import {
-  ScrollView as RNScrollView,
+import type { PropsWithChildren, ReactElement } from 'react';
+import React, { useState } from 'react';
+import type {
+  FlatListProps as RNFlatListProps,
+  RefreshControlProps as RNRefreshControlProps,
   ScrollViewProps as RNScrollViewProps,
-  Switch as RNSwitch,
   SwitchProps as RNSwitchProps,
-  TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
+} from 'react-native';
+import {
   FlatList as RNFlatList,
-  FlatListProps as RNFlatListProps,
   RefreshControl as RNRefreshControl,
+  ScrollView as RNScrollView,
+  Switch as RNSwitch,
+  TextInput as RNTextInput,
 } from 'react-native';
 
+import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 import createNativeWrapper from '../createNativeWrapper';
-
-import { NativeWrapperProperties } from '../types/NativeWrapperType';
-import { NativeWrapperProps } from '../hooks/utils';
 import { GestureDetectorType } from '../detectors';
-import { NativeGesture } from '../hooks/gestures/native/useNativeGesture';
-import { ghQueueMicrotask } from '../../ghQueueMicrotask';
+import type { NativeGesture } from '../hooks/gestures/native/NativeTypes';
+import { NativeWrapperProps } from '../hooks/utils';
+import type { NativeWrapperProperties } from '../types/NativeWrapperType';
 
-export const RefreshControl = createNativeWrapper(
+export const RefreshControl = createNativeWrapper<
+  RNRefreshControl,
+  RNRefreshControlProps
+>(
   RNRefreshControl,
   {
     disallowInterruption: true,
@@ -36,7 +37,10 @@ export const RefreshControl = createNativeWrapper(
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type RefreshControl = typeof RefreshControl & RNRefreshControl;
 
-const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
+const GHScrollView = createNativeWrapper<
+  RNScrollView,
+  PropsWithChildren<RNScrollViewProps>
+>(
   RNScrollView,
   {
     disallowInterruption: true,
@@ -46,13 +50,7 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
 );
 
 export const ScrollView = (
-  props: RNScrollViewProps &
-    NativeWrapperProperties & {
-      ref?: React.RefObject<RNScrollView | null>;
-      onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER?: (
-        gesture: NativeGesture
-      ) => void;
-    }
+  props: RNScrollViewProps & NativeWrapperProperties<RNScrollView | null>
 ) => {
   const {
     refreshControl,
@@ -95,7 +93,7 @@ export const ScrollView = (
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type ScrollView = typeof ScrollView & RNScrollView;
 
-export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
+export const Switch = createNativeWrapper<RNSwitch, RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: true,
   disallowInterruption: true,
@@ -104,7 +102,9 @@ export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type Switch = typeof Switch & RNSwitch;
 
-export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
+export const TextInput = createNativeWrapper<RNTextInput, RNTextInputProps>(
+  RNTextInput
+);
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type TextInput = typeof TextInput & RNTextInput;
@@ -175,14 +175,9 @@ export const FlatList = ((props) => {
 }) as <ItemT = any>(
   props: PropsWithChildren<
     Omit<RNFlatListProps<ItemT>, 'renderScrollComponent' | 'ref'> &
-      NativeWrapperProperties & {
-        ref?: RefObject<RNFlatList<ItemT> | null>;
-        onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER?: (
-          gesture: NativeGesture
-        ) => void;
-      }
+      NativeWrapperProperties<RNFlatList<ItemT> | null>
   >
 ) => ReactElement | null;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList = typeof FlatList & RNFlatList;
+export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

package/src/v3/components/GestureComponents.web.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import type { FlatListProps } from 'react-native';
 import {
   FlatList as RNFlatList,
+  ScrollView as RNScrollView,
   Switch as RNSwitch,
   TextInput as RNTextInput,
-  ScrollView as RNScrollView,
-  FlatListProps,
   View,
 } from 'react-native';
 
@@ -32,12 +32,9 @@ export const DrawerLayoutAndroid = () => {
 // on functional components
 export const RefreshControl = createNativeWrapper(View);
 
-export const FlatList = React.forwardRef(
-  <ItemT,>(props: FlatListProps<ItemT>, ref: any) => (
-    <RNFlatList
-      ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
-    />
-  )
+export const FlatList = <ItemT,>(props: FlatListProps<ItemT>) => (
+  <RNFlatList
+    {...props}
+    renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
+  />
 );

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();
@@ -302,24 +308,22 @@ const Pressable = (props: PressableProps) => {
       stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
     },
     onActivate: () => {
-      if (Platform.OS !== 'android') {
+      if (Platform.OS !== 'android' && Platform.OS !== 'ios') {
         // Native.onActivate is broken with Android + hitSlop
         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,

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

@@ -0,0 +1,134 @@
+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 type {
+  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 };
+
+export const Touchable = (props: TouchableProps) => {
+  const {
+    underlayColor = 'black',
+    defaultUnderlayOpacity = 0,
+    defaultOpacity = 1,
+    androidRipple,
+    delayLongPress = 600,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onActiveStateChange,
+    children,
+    disabled = false,
+    ref,
+    ...rest
+  } = props;
+
+  const shouldUseNativeRipple = isAndroid && androidRipple !== undefined;
+
+  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) {
+        return;
+      }
+
+      onPressIn?.(e);
+      startLongPressTimer();
+    },
+    [startLongPressTimer, onPressIn]
+  );
+
+  const onActivate = useCallback(
+    (e: CallbackEventType) => {
+      onActiveStateChange?.(true);
+
+      if (!e.pointerInside && longPressTimeout.current !== undefined) {
+        clearTimeout(longPressTimeout.current);
+        longPressTimeout.current = undefined;
+      }
+    },
+    [onActiveStateChange]
+  );
+
+  const onDeactivate = useCallback(
+    (e: EndCallbackEventType) => {
+      onActiveStateChange?.(false);
+
+      if (!e.canceled && !longPressDetected.current) {
+        onPress?.(e.pointerInside);
+      }
+    },
+    [onActiveStateChange, onPress]
+  );
+
+  const onFinalize = useCallback(
+    (e: EndCallbackEventType) => {
+      onPressOut?.(e);
+
+      if (longPressTimeout.current !== undefined) {
+        clearTimeout(longPressTimeout.current);
+        longPressTimeout.current = undefined;
+      }
+    },
+    [onPressOut]
+  );
+
+  const rippleProps = shouldUseNativeRipple
+    ? {
+        rippleColor: androidRipple?.color,
+        rippleRadius: androidRipple?.radius,
+        borderless: androidRipple?.borderless,
+        foreground: androidRipple?.foreground,
+      }
+    : 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>
+  );
+};

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

@@ -0,0 +1,41 @@
+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> & {
+    /**
+     * Configuration for the ripple effect on Android.
+     */
+    androidRipple?: PressableAndroidRippleConfig | 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;
+  };

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';