@amazon-devices/react-native-gesture-handler 2.0.1759135970 → 4.0.0

package/src/components/ReanimatedSwipeable/ReanimatedSwipeableProps.ts

@@ -0,0 +1,199 @@
+import React from 'react';
+import type { PanGestureHandlerProps } from '../../handlers/PanGestureHandler';
+import { SharedValue } from 'react-native-reanimated';
+import { StyleProp, ViewStyle } from 'react-native';
+import { RelationPropType } from '../utils';
+
+type SwipeableExcludes = Exclude<
+  keyof PanGestureHandlerProps,
+  'onGestureEvent' | 'onHandlerStateChange'
+>;
+
+export enum SwipeDirection {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
+export interface SwipeableProps
+  extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
+  /**
+   *
+   */
+  ref?: React.RefObject<SwipeableMethods | null>;
+
+  /**
+   * 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
+   * should exactly follow the gesture, 2 means it is going to be two times
+   * "slower".
+   */
+  friction?: number;
+
+  /**
+   * Distance from the left edge at which released panel will animate to the
+   * open state (or the open panel will animate into the closed state). By
+   * default it's a half of the panel's width.
+   */
+  leftThreshold?: number;
+
+  /**
+   * Distance from the right edge at which released panel will animate to the
+   * open state (or the open panel will animate into the closed state). By
+   * default it's a half of the panel's width.
+   */
+  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
+   * panel render method is present.
+   */
+  overshootLeft?: boolean;
+
+  /**
+   * Value indicating if the swipeable panel can be pulled further than the
+   * right actions panel's width. It is set to true by default as long as the
+   * right panel render method is present.
+   */
+  overshootRight?: boolean;
+
+  /**
+   * Specifies how much the visual interaction will be delayed compared to the
+   * gesture distance at overshoot. Default value is 1, it mean no friction, for
+   * a native feel, try 8 or above.
+   */
+  overshootFriction?: number;
+
+  /**
+   * Called when action panel gets open (either right or left).
+   */
+  onSwipeableOpen?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
+
+  /**
+   * Called when action panel is closed.
+   */
+  onSwipeableClose?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
+
+  /**
+   * Called when action panel starts animating on open (either right or left).
+   */
+  onSwipeableWillOpen?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
+
+  /**
+   * Called when action panel starts animating on close.
+   */
+  onSwipeableWillClose?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
+
+  /**
+   * Called when action panel starts being shown on dragging to open.
+   */
+  onSwipeableOpenStartDrag?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
+
+  /**
+   * Called when action panel starts being shown on dragging to close.
+   */
+  onSwipeableCloseStartDrag?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
+
+  /**
+   * `progress`: Equals `0` when `swipeable` is closed, `1` when `swipeable` is opened.
+   *  - When the element overshoots it's opened position the value tends towards `Infinity`.
+   *  - Goes back to `1` when `swipeable` is released.
+   *
+   * `translation`: a horizontal offset of the `swipeable` relative to its closed position.\
+   * `swipeableMethods`: provides an object exposing methods for controlling the `swipeable`.
+   *
+   * To support `rtl` flexbox layouts use `flexDirection` styling.
+   * */
+  renderLeftActions?: (
+    progress: SharedValue<number>,
+    translation: SharedValue<number>,
+    swipeableMethods: SwipeableMethods
+  ) => React.ReactNode;
+
+  /**
+   * `progress`: Equals `0` when `swipeable` is closed, `1` when `swipeable` is opened.
+   *  - When the element overshoots it's opened position the value tends towards `Infinity`.
+   *  - Goes back to `1` when `swipeable` is released.
+   *
+   * `translation`: a horizontal offset of the `swipeable` relative to its closed position.\
+   * `swipeableMethods`: provides an object exposing methods for controlling the `swipeable`.
+   *
+   * To support `rtl` flexbox layouts use `flexDirection` styling.
+   * */
+  renderRightActions?: (
+    progress: SharedValue<number>,
+    translation: SharedValue<number>,
+    swipeableMethods: SwipeableMethods
+  ) => React.ReactNode;
+
+  animationOptions?: Record<string, unknown>;
+
+  /**
+   * Style object for the container (`Animated.View`), for example to override
+   * `overflow: 'hidden'`.
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the children container (`Animated.View`), for example to
+   * apply `flex: 1`
+   */
+  childrenContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the swipeable's gesture handler.
+   */
+  simultaneousWithExternalGesture?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the swipeable's gesture handler.
+   */
+  requireExternalGestureToFail?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the swipeable's gesture handler.
+   */
+  blocksExternalGesture?: RelationPropType;
+}
+
+export interface SwipeableMethods {
+  close: () => void;
+  openLeft: () => void;
+  openRight: () => void;
+  reset: () => void;
+}

package/src/components/ReanimatedSwipeable/index.ts

@@ -0,0 +1,6 @@
+export {
+  type SwipeableProps,
+  type SwipeableMethods,
+  SwipeDirection,
+} from './ReanimatedSwipeableProps';
+export { default } from './ReanimatedSwipeable';

package/src/components/Swipeable.tsx

@@ -20,13 +20,13 @@ import {
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
-  PanGestureHandlerEventPayload,
   PanGestureHandlerProps,
 } from '../handlers/PanGestureHandler';
 import {
-  TapGestureHandler,
+  PanGestureHandlerEventPayload,
   TapGestureHandlerEventPayload,
-} from '../handlers/TapGestureHandler';
+} from '../handlers/GestureHandlerEventPayload';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -157,6 +157,16 @@ export interface SwipeableProps
    */
   onSwipeableWillClose?: (direction: 'left' | 'right') => void;
 
+  /**
+   * Called when action panel starts being shown on dragging to open.
+   */
+  onSwipeableOpenStartDrag?: (direction: 'left' | 'right') => void;
+
+  /**
+   * Called when action panel starts being shown on dragging to close.
+   */
+  onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;
+
   /**
    *
    * This map describes the values to use as inputRange for extra interpolation:
@@ -212,6 +222,12 @@ type SwipeableState = {
   rowWidth?: number;
 };
 
+/**
+ * @deprecated use Reanimated version of Swipeable instead
+ *
+ * This component allows for implementing swipeable rows or similar interaction.
+ */
+
 export default class Swipeable extends Component<
   SwipeableProps,
   SwipeableState
@@ -297,9 +313,9 @@ export default class Swipeable extends Component<
     this.showLeftAction =
       leftWidth > 0
         ? transX.interpolate({
-            inputRange: [-1, 0, leftWidth],
-            outputRange: [0, 0, 1],
-          })
+          inputRange: [-1, 0, leftWidth],
+          outputRange: [0, 0, 1],
+        })
         : new Animated.Value(0);
     this.leftActionTranslate = this.showLeftAction.interpolate({
       inputRange: [0, Number.MIN_VALUE],
@@ -309,9 +325,9 @@ export default class Swipeable extends Component<
     this.showRightAction =
       rightWidth > 0
         ? transX.interpolate({
-            inputRange: [-rightWidth, 0, 1],
-            outputRange: [1, 0, 0],
-          })
+          inputRange: [-rightWidth, 0, 1],
+          outputRange: [1, 0, 0],
+        })
         : new Animated.Value(0);
     this.rightActionTranslate = this.showRightAction.interpolate({
       inputRange: [0, Number.MIN_VALUE],
@@ -334,6 +350,29 @@ export default class Swipeable extends Component<
     if (ev.nativeEvent.oldState === State.ACTIVE) {
       this.handleRelease(ev);
     }
+
+    if (ev.nativeEvent.state === State.ACTIVE) {
+      const { velocityX, translationX: dragX } = ev.nativeEvent;
+      const { rowState } = this.state;
+      const { friction } = this.props;
+
+      const translationX = (dragX + DRAG_TOSS * velocityX) / friction!;
+
+      const direction =
+        rowState === -1
+          ? 'right'
+          : rowState === 1
+            ? 'left'
+            : translationX > 0
+              ? 'left'
+              : 'right';
+
+      if (rowState === 0) {
+        this.props.onSwipeableOpenStartDrag?.(direction);
+      } else {
+        this.props.onSwipeableCloseStartDrag?.(direction);
+      }
+    }
   };
 
   private handleRelease = (
@@ -360,12 +399,12 @@ export default class Swipeable extends Component<
         toValue = -rightWidth;
       }
     } else if (rowState === 1) {
-      // swiped to left
+      // Swiped to left
       if (translationX > -leftThreshold) {
         toValue = leftWidth;
       }
     } else {
-      // swiped to right
+      // Swiped to right
       if (translationX < rightThreshold) {
         toValue = -rightWidth;
       }
@@ -380,9 +419,9 @@ export default class Swipeable extends Component<
     velocityX?:
       | number
       | {
-          x: number;
-          y: number;
-        }
+        x: number;
+        y: number;
+      }
   ) => {
     const { dragX, rowTranslation } = this.state;
     dragX.setValue(0);
@@ -443,11 +482,13 @@ export default class Swipeable extends Component<
     this.animateRow(this.currentOffset(), 0);
   };
 
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
   openLeft = () => {
     const { leftWidth = 0 } = this.state;
     this.animateRow(this.currentOffset(), leftWidth);
   };
 
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
   openRight = () => {
     const { rowWidth = 0 } = this.state;
     const { rightOffset = rowWidth } = this.state;
@@ -455,6 +496,7 @@ export default class Swipeable extends Component<
     this.animateRow(this.currentOffset(), -rightWidth);
   };
 
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
   reset = () => {
     const { dragX, rowTranslation } = this.state;
     dragX.setValue(0);
@@ -476,7 +518,7 @@ export default class Swipeable extends Component<
       <Animated.View
         style={[
           styles.leftActions,
-          // all those and below parameters can have ! since they are all
+          // All those and below parameters can have ! since they are all
           // asigned in constructor in `updateAnimatedEvent` but TS cannot spot
           // it for some reason
           { transform: [{ translateX: this.leftActionTranslate! }] },
@@ -508,6 +550,7 @@ export default class Swipeable extends Component<
     return (
       <PanGestureHandler
         activeOffsetX={[-dragOffsetFromRightEdge, dragOffsetFromLeftEdge]}
+        touchAction="pan-y"
         {...this.props}
         onGestureEvent={this.onGestureEvent}
         onHandlerStateChange={this.onHandlerStateChange}>
@@ -518,6 +561,7 @@ export default class Swipeable extends Component<
           {right}
           <TapGestureHandler
             enabled={rowState !== 0}
+            touchAction="pan-y"
             onHandlerStateChange={this.onTapHandlerStateChange}>
             <Animated.View
               pointerEvents={rowState === 0 ? 'auto' : 'box-only'}

package/src/components/Text.tsx

@@ -0,0 +1,77 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  RefObject,
+  useEffect,
+  useRef,
+} from 'react';
+import {
+  Platform,
+  Text as RNText,
+  TextProps as RNTextProps,
+} from 'react-native';
+
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../handlers/gestures/GestureDetector';
+
+export const Text = forwardRef(
+  (
+    props: RNTextProps,
+    ref: ForwardedRef<React.ComponentRef<typeof RNText>>
+  ) => {
+    const { onPress, onLongPress, ...rest } = props;
+
+    const textRef = useRef<RNText | null>(null);
+    const native = Gesture.Native().runOnJS(true);
+
+    const refHandler = (node: any) => {
+      textRef.current = node;
+
+      if (ref === null) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    };
+
+    // This is a special case for `Text` component. After https://github.com/software-mansion/react-native-gesture-handler/pull/3379 we check for
+    // `displayName` field. However, `Text` from RN has this field set to `Text`, but is also present in `RNSVGElements` set.
+    // We don't want to treat our `Text` as the one from `SVG`, therefore we add special field to ref.
+    refHandler.rngh = true;
+
+    useEffect(() => {
+      if (Platform.OS !== 'web') {
+        return;
+      }
+
+      const textElement = ref
+        ? (ref as RefObject<React.ComponentRef<typeof RNText>>).current
+        : textRef.current;
+
+      // At this point we are sure that textElement is div in HTML tree
+      (textElement as unknown as HTMLDivElement)?.setAttribute(
+        'rnghtext',
+        'true'
+      );
+    }, []);
+
+    return onPress || onLongPress ? (
+      <GestureDetector gesture={native}>
+        <RNText
+          onPress={onPress}
+          onLongPress={onLongPress}
+          ref={refHandler}
+          {...rest}
+        />
+      </GestureDetector>
+    ) : (
+      <RNText ref={ref} {...rest} />
+    );
+  }
+);
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type Text = typeof Text & RNText;

package/src/components/gestureHandlerRootHOC.tsx

@@ -3,9 +3,11 @@ import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import GestureHandlerRootView from './GestureHandlerRootView';
 
-export default function gestureHandlerRootHOC<
-  P extends Record<string, unknown>
->(
+/**
+ * @deprecated `gestureHandlerRootHOC` is deprecated and will be removed in the future version of Gesture Handler.
+ * Use `GestureHandlerRootView` directly instead.
+ */
+export default function gestureHandlerRootHOC<P extends object>(
   Component: React.ComponentType<P>,
   containerStyles?: StyleProp<ViewStyle>
 ): React.ComponentType<P> {
@@ -17,9 +19,8 @@ export default function gestureHandlerRootHOC<
     );
   }
 
-  Wrapper.displayName = `gestureHandlerRootHOC(${
-    Component.displayName || Component.name
-  })`;
+  Wrapper.displayName = `gestureHandlerRootHOC(${Component.displayName || Component.name
+    })`;
 
   // @ts-ignore - hoistNonReactStatics uses old version of @types/react
   hoistNonReactStatics(Wrapper, Component);

package/src/components/touchables/ExtraButtonProps.ts

@@ -0,0 +1,7 @@
+export type ExtraButtonProps = {
+  borderless?: boolean;
+  rippleColor?: number | string | null;
+  rippleRadius?: number | null;
+  foreground?: boolean;
+  exclusive?: boolean;
+};

package/src/components/touchables/GenericTouchable.tsx

@@ -1,13 +1,6 @@
 import * as React from 'react';
 import { Component } from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  ViewStyle,
-  TouchableWithoutFeedbackProps,
-  Insets,
-} from 'react-native';
+import { Animated, Platform } from 'react-native';
 
 import { State } from '../../State';
 import { BaseButton } from '../GestureButtons';
@@ -16,8 +9,8 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../../handlers/gestureHandlerCommon';
-import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
-import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
+import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
  * Each touchable is a states' machine which preforms transitions.
@@ -32,29 +25,9 @@ export const TOUCHABLE_STATE = {
   MOVED_OUTSIDE: 2,
 } as const;
 
-type TouchableState = typeof TOUCHABLE_STATE[keyof typeof TOUCHABLE_STATE];
-
-export interface GenericTouchableProps
-  extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
-  // Decided to drop not used fields from RN's implementation.
-  // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment
-
-  // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too
-  onPress?: () => void;
-  onPressIn?: () => void;
-  onPressOut?: () => void;
-  onLongPress?: () => void;
-
-  nativeID?: string;
-  shouldActivateOnStart?: boolean;
-  disallowInterruption?: boolean;
-
-  containerStyle?: StyleProp<ViewStyle>;
-  hitSlop?: Insets | number;
-}
+type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
 
 interface InternalProps {
-  extraButtonProps: TouchableNativeFeedbackExtraProps;
   onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
 }
 
@@ -78,7 +51,7 @@ export default class GenericTouchable extends Component<
     },
   };
 
-  // timeout handlers
+  // Timeout handlers
   pressInTimeout: Timeout;
   pressOutTimeout: Timeout;
   longPressTimeout: Timeout;
@@ -145,7 +118,7 @@ export default class GenericTouchable extends Component<
   componentDidMount() {
     this.reset();
   }
-  // reset timeout to prevent memory leaks.
+  // Reset timeout to prevent memory leaks.
   reset() {
     this.longPressDetected = false;
     this.pointerInside = true;
@@ -227,12 +200,12 @@ export default class GenericTouchable extends Component<
 
   onLongPressDetected = () => {
     this.longPressDetected = true;
-    // checked for in the caller of `onLongPressDetected`, but better to check twice
+    // Checked for in the caller of `onLongPressDetected`, but better to check twice
     this.props.onLongPress?.();
   };
 
   componentWillUnmount() {
-    // to prevent memory leaks
+    // To prevent memory leaks
     this.reset();
   }
 
@@ -244,7 +217,7 @@ export default class GenericTouchable extends Component<
   }
 
   onMoveOut() {
-    // long press should no longer be detected
+    // Long press should no longer be detected
     clearTimeout(this.longPressTimeout!);
     this.longPressTimeout = null;
     if (this.STATE === TOUCHABLE_STATE.BEGAN) {
@@ -256,11 +229,11 @@ export default class GenericTouchable extends Component<
     const hitSlop =
       (typeof this.props.hitSlop === 'number'
         ? {
-            top: this.props.hitSlop,
-            left: this.props.hitSlop,
-            bottom: this.props.hitSlop,
-            right: this.props.hitSlop,
-          }
+          top: this.props.hitSlop,
+          left: this.props.hitSlop,
+          bottom: this.props.hitSlop,
+          right: this.props.hitSlop,
+        }
         : this.props.hitSlop) ?? undefined;
 
     const coreProps = {
@@ -286,6 +259,7 @@ export default class GenericTouchable extends Component<
         }
         onGestureEvent={this.onGestureEvent}
         hitSlop={hitSlop}
+        userSelect={this.props.userSelect}
         shouldActivateOnStart={this.props.shouldActivateOnStart}
         disallowInterruption={this.props.disallowInterruption}
         testID={this.props.testID}

package/src/components/touchables/GenericTouchableProps.ts

@@ -0,0 +1,28 @@
+import type {
+  StyleProp,
+  ViewStyle,
+  TouchableWithoutFeedbackProps,
+  Insets,
+} from 'react-native';
+import type { UserSelect } from '../../handlers/gestureHandlerCommon';
+import { ExtraButtonProps } from './ExtraButtonProps';
+
+export interface GenericTouchableProps
+  extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
+  // Decided to drop not used fields from RN's implementation.
+  // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment
+  // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too
+  onPress?: () => void;
+  onPressIn?: () => void;
+  onPressOut?: () => void;
+  onLongPress?: () => void;
+
+  nativeID?: string;
+  shouldActivateOnStart?: boolean;
+  disallowInterruption?: boolean;
+
+  containerStyle?: StyleProp<ViewStyle>;
+  hitSlop?: Insets | number;
+  userSelect?: UserSelect;
+  extraButtonProps?: ExtraButtonProps;
+}

package/src/components/touchables/TouchableHighlight.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { Component } from 'react';
-import GenericTouchable, {
-  GenericTouchableProps,
-  TOUCHABLE_STATE,
-} from './GenericTouchable';
+import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 import {
   StyleSheet,
   View,
@@ -21,10 +19,15 @@ interface State {
   };
 }
 
+/**
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
+ */
 export type TouchableHighlightProps = RNTouchableHighlightProps &
   GenericTouchableProps;
 
 /**
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
+ *
  * TouchableHighlight follows RN's implementation
  */
 export default class TouchableHighlight extends Component<