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

package/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -1,23 +1,15 @@
-import {
-  Platform,
-  TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps,
-  ColorValue,
-} from 'react-native';
+import { Platform, ColorValue } from 'react-native';
 import * as React from 'react';
 import { Component } from 'react';
-import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
-
-export type TouchableNativeFeedbackExtraProps = {
-  borderless?: boolean;
-  rippleColor?: number | null;
-  rippleRadius?: number | null;
-  foreground?: boolean;
-};
-
-export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
-  GenericTouchableProps;
+import GenericTouchable from './GenericTouchable';
+import {
+  TouchableNativeFeedbackProps,
+  TouchableNativeFeedbackExtraProps,
+} from './TouchableNativeFeedbackProps';
 
 /**
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
+ *
  * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
  * There's small difference with handling long press ripple since RN's implementation calls
  * ripple animation via bridge. This solution leaves all animations' handling for native components so
@@ -33,7 +25,7 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
     },
   };
 
-  // could be taken as RNTouchableNativeFeedback.SelectableBackground etc. but the API may change
+  // Could be taken as RNTouchableNativeFeedback.SelectableBackground etc. but the API may change
   static SelectableBackground = (rippleRadius?: number) => ({
     type: 'ThemeAttrAndroid',
     // I added `attribute` prop to clone the implementation of RN and be able to use only 2 types
@@ -57,7 +49,7 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
   });
 
   static canUseNativeForeground = () =>
-    parseInt(Platform.Version.toString()) >= 23;
+    Platform.OS === 'android' && Platform.Version >= 23;
 
   getExtraButtonProps() {
     const extraProps: TouchableNativeFeedbackExtraProps = {};

package/src/components/touchables/TouchableNativeFeedback.tsx

@@ -1,3 +1,8 @@
-import { TouchableNativeFeedback } from 'react-native';
+import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
+
+/**
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
+ */
+const TouchableNativeFeedback = RNTouchableNativeFeedback;
 
 export default TouchableNativeFeedback;

package/src/components/touchables/TouchableNativeFeedbackProps.tsx

@@ -0,0 +1,10 @@
+import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native';
+import type { GenericTouchableProps } from './GenericTouchableProps';
+import { ExtraButtonProps } from './ExtraButtonProps';
+
+export type TouchableNativeFeedbackExtraProps = ExtraButtonProps;
+/**
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
+ */
+export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
+  GenericTouchableProps;

package/src/components/touchables/TouchableOpacity.tsx

@@ -5,19 +5,22 @@ import {
   View,
   TouchableOpacityProps as RNTouchableOpacityProps,
 } from 'react-native';
-import GenericTouchable, {
-  TOUCHABLE_STATE,
-  GenericTouchableProps,
-} from './GenericTouchable';
+import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 import * as React from 'react';
 import { Component } from 'react';
 
+/**
+ * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
+ */
 export type TouchableOpacityProps = RNTouchableOpacityProps &
   GenericTouchableProps & {
     useNativeAnimations?: boolean;
   };
 
 /**
+ * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
+ *
  * TouchableOpacity bases on timing animation which has been used in RN's core
  */
 export default class TouchableOpacity extends Component<TouchableOpacityProps> {
@@ -26,7 +29,7 @@ export default class TouchableOpacity extends Component<TouchableOpacityProps> {
     activeOpacity: 0.2,
   };
 
-  // opacity is 1 one by default but could be overwritten
+  // Opacity is 1 one by default but could be overwritten
   getChildStyleOpacityWithDefault = () => {
     const childStyle = StyleSheet.flatten(this.props.style) || {};
     return childStyle.opacity == null

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -1,14 +1,39 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
+import GenericTouchable from './GenericTouchable';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 
-export type TouchableWithoutFeedbackProps = GenericTouchable;
+/**
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
+ */
+export type TouchableWithoutFeedbackProps = GenericTouchableProps;
 
+/**
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
+ */
 const TouchableWithoutFeedback = React.forwardRef<
-  TouchableWithoutFeedbackProps,
-  PropsWithChildren<GenericTouchableProps>
->((props, ref) => <GenericTouchable ref={ref} {...props} />);
+  GenericTouchable,
+  PropsWithChildren<TouchableWithoutFeedbackProps>
+>(
+  (
+    {
+      delayLongPress = 600,
+      extraButtonProps = {
+        rippleColor: 'transparent',
+        exclusive: true,
+      },
+      ...rest
+    },
 
-TouchableWithoutFeedback.defaultProps = GenericTouchable.defaultProps;
+    ref
+  ) => (
+    <GenericTouchable
+      ref={ref}
+      delayLongPress={delayLongPress}
+      extraButtonProps={extraButtonProps}
+      {...rest}
+    />
+  )
+);
 
 export default TouchableWithoutFeedback;

package/src/components/utils.ts

@@ -0,0 +1,26 @@
+import { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
+
+export type RelationPropName =
+  | 'simultaneousWithExternalGesture'
+  | 'requireExternalGestureToFail'
+  | 'blocksExternalGesture';
+
+export type RelationPropType =
+  | Exclude<GestureRef, number>
+  | Exclude<GestureRef, number>[];
+
+export function applyRelationProp(
+  gesture: BaseGesture<any>,
+  relationPropName: RelationPropName,
+  relationProp: RelationPropType
+) {
+  if (!relationProp) {
+    return;
+  }
+
+  if (Array.isArray(relationProp)) {
+    gesture[relationPropName](...relationProp);
+  } else {
+    gesture[relationPropName](relationProp);
+  }
+}

package/src/findNodeHandle.ts

@@ -0,0 +1,3 @@
+import { findNodeHandle } from 'react-native';
+
+export default findNodeHandle;

package/src/findNodeHandle.web.ts

@@ -0,0 +1,41 @@
+import { FlatList } from 'react-native';
+import type { GestureHandlerRef, SVGRef } from './web/interfaces';
+import { isRNSVGElement } from './web/utils';
+
+export default function findNodeHandle(
+  viewRef: GestureHandlerRef | SVGRef | HTMLElement | SVGElement
+): HTMLElement | SVGElement | number {
+  // TODO: Remove this once we remove old API.
+  if (viewRef instanceof FlatList) {
+    // @ts-ignore This is the only way to get the scroll ref from FlatList.
+    return viewRef._listRef._scrollRef.firstChild;
+  }
+  // Old API assumes that child handler is HTMLElement.
+  // However, if we nest handlers, we will get ref to another handler.
+  // In that case, we want to recursively call findNodeHandle with new handler viewTag (which can also be ref to another handler).
+  if ((viewRef as GestureHandlerRef)?.viewTag !== undefined) {
+    return findNodeHandle((viewRef as GestureHandlerRef).viewTag);
+  }
+
+  if (viewRef instanceof Element) {
+    if (viewRef.style.display === 'contents') {
+      return findNodeHandle(viewRef.firstChild as HTMLElement);
+    }
+
+    return viewRef;
+  }
+
+  if (isRNSVGElement(viewRef)) {
+    return (viewRef as SVGRef).elementRef.current;
+  }
+
+  // In new API, we receive ref object which `current` field points to  wrapper `div` with `display: contents;`.
+  // We want to return the first descendant (in DFS order) that doesn't have this property.
+  let element = (viewRef as GestureHandlerRef)?.current;
+
+  while (element && element.style.display === 'contents') {
+    element = element.firstChild as HTMLElement;
+  }
+
+  return element;
+}

package/src/getShadowNodeFromRef.ts

@@ -2,21 +2,49 @@
 // attached view may get flattened on Fabric. This implementation causes errors
 // on web due to the static resolution of `require` statements by webpack breaking
 // the conditional importing. Solved by making .web file.
-let findHostInstance_DEPRECATED: (ref: any) => void;
+let findHostInstance_DEPRECATED: (ref: unknown) => void;
+let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
+  stateNode: { node: unknown };
+};
 
-export function getShadowNodeFromRef(ref: any) {
-  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+export function getShadowNodeFromRef(ref: unknown) {
+  // Load findHostInstance_DEPRECATED lazily because it may not be available before render
   if (findHostInstance_DEPRECATED === undefined) {
     try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const ReactFabric = require('react-native/Libraries/Renderer/shims/ReactFabric');
+      // Since RN 0.77 ReactFabric exports findHostInstance_DEPRECATED in default object so we're trying to
+      // access it first, then fallback on named export
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       findHostInstance_DEPRECATED =
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        ReactFabric?.default?.findHostInstance_DEPRECATED ||
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        ReactFabric?.findHostInstance_DEPRECATED;
+    } catch (e) {
+      findHostInstance_DEPRECATED = (_ref: unknown) => null;
+    }
+  }
+
+  // Load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (getInternalInstanceHandleFromPublicInstance === undefined) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      getInternalInstanceHandleFromPublicInstance =
         // eslint-disable-next-line @typescript-eslint/no-var-requires
-        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+        require('react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
+          .getInternalInstanceHandleFromPublicInstance ??
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        ((ref: any) => ref._internalInstanceHandle);
     } catch (e) {
-      findHostInstance_DEPRECATED = (_ref: any) => null;
+      getInternalInstanceHandleFromPublicInstance = (ref: any) =>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        ref._internalInstanceHandle;
     }
   }
 
   // @ts-ignore Fabric
-  return findHostInstance_DEPRECATED(ref)._internalInstanceHandle.stateNode
-    .node;
+  return getInternalInstanceHandleFromPublicInstance(
+    findHostInstance_DEPRECATED(ref)
+  ).stateNode.node;
 }

package/src/ghQueueMicrotask.ts

@@ -0,0 +1,8 @@
+// We check for typeof requestAnimationFrame because of SSR
+// Functions are bound to null to avoid issues with scope when using Metro inline requires.
+export const ghQueueMicrotask =
+  typeof setImmediate === 'function'
+    ? setImmediate.bind(null)
+    : typeof requestAnimationFrame === 'function'
+      ? requestAnimationFrame.bind(null)
+      : queueMicrotask.bind(null);

package/src/handlers/FlingGestureHandler.ts

@@ -1,3 +1,4 @@
+import type { FlingGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
 import {
   BaseGestureHandlerProps,
@@ -9,12 +10,6 @@ export const flingGestureHandlerProps = [
   'direction',
 ] as const;
 
-export type FlingGestureHandlerEventPayload = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-};
 export interface FlingGestureConfig {
   /**
    * Expressed allowed direction of movement. It's possible to pass one or many
@@ -38,13 +33,23 @@ export interface FlingGestureConfig {
   numberOfPointers?: number;
 }
 
+/**
+ * @deprecated FlingGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Fling()` instead.
+ */
 export interface FlingGestureHandlerProps
   extends BaseGestureHandlerProps<FlingGestureHandlerEventPayload>,
     FlingGestureConfig {}
 
 export const flingHandlerName = 'FlingGestureHandler';
 
+/**
+ * @deprecated FlingGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Fling()` instead.
+ */
 export type FlingGestureHandler = typeof FlingGestureHandler;
+
+/**
+ * @deprecated FlingGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.Fling()` instead.
+ */
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const FlingGestureHandler = createHandler<
   FlingGestureHandlerProps,

package/src/handlers/ForceTouchGestureHandler.ts

@@ -6,6 +6,7 @@ import {
   BaseGestureHandlerProps,
   baseGestureHandlerProps,
 } from './gestureHandlerCommon';
+import type { ForceTouchGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 
 export const forceTouchGestureHandlerProps = [
   'minForce',
@@ -28,18 +29,6 @@ class ForceTouchFallback extends React.Component<PropsWithChildren<unknown>> {
   }
 }
 
-export type ForceTouchGestureHandlerEventPayload = {
-  x: number;
-  y: number;
-  absoluteX: number;
-  absoluteY: number;
-
-  /**
-   * The pressure of a touch.
-   */
-  force: number;
-};
-
 export interface ForceTouchGestureConfig {
   /**
    *
@@ -61,16 +50,25 @@ export interface ForceTouchGestureConfig {
   feedbackOnActivation?: boolean;
 }
 
+/**
+ * @deprecated ForceTouchGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.ForceTouch()` instead.
+ */
 export interface ForceTouchGestureHandlerProps
   extends BaseGestureHandlerProps<ForceTouchGestureHandlerEventPayload>,
     ForceTouchGestureConfig {}
 
+/**
+ * @deprecated ForceTouchGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.ForceTouch()` instead.
+ */
 export type ForceTouchGestureHandler = typeof ForceTouchGestureHandler & {
   forceTouchAvailable: boolean;
 };
 
 export const forceTouchHandlerName = 'ForceTouchGestureHandler';
 
+/**
+ * @deprecated ForceTouchGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.ForceTouch()` instead.
+ */
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const ForceTouchGestureHandler = PlatformConstants?.forceTouchAvailable
   ? createHandler<

package/src/handlers/GestureHandlerEventPayload.ts

@@ -0,0 +1,229 @@
+import { StylusData } from '../web/interfaces';
+
+export type FlingGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+/**
+ * @deprecated ForceTouch gesture is deprecated and will be removed in the future.
+ */
+export type ForceTouchGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+
+  /**
+   * The pressure of a touch.
+   */
+  force: number;
+};
+
+export type LongPressGestureHandlerEventPayload = {
+  /**
+   * X coordinate, expressed in points, of the current position of the pointer
+   * (finger or a leading pointer when there are multiple fingers placed)
+   * relative to the view attached to the handler.
+   */
+  x: number;
+
+  /**
+   * Y coordinate, expressed in points, of the current position of the pointer
+   * (finger or a leading pointer when there are multiple fingers placed)
+   * relative to the view attached to the handler.
+   */
+  y: number;
+
+  /**
+   * X coordinate, expressed in points, of the current position of the pointer
+   * (finger or a leading pointer when there are multiple fingers placed)
+   * relative to the window. It is recommended to use `absoluteX` instead of
+   * `x` in cases when the view attached to the handler can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteX: number;
+
+  /**
+   * Y coordinate, expressed in points, of the current position of the pointer
+   * (finger or a leading pointer when there are multiple fingers placed)
+   * relative to the window. It is recommended to use `absoluteY` instead of
+   * `y` in cases when the view attached to the handler can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteY: number;
+
+  /**
+   * Duration of the long press (time since the start of the event), expressed
+   * in milliseconds.
+   */
+  duration: number;
+};
+
+export type NativeViewGestureHandlerPayload = {
+  /**
+   * True if gesture was performed inside of containing view, false otherwise.
+   */
+  pointerInside: boolean;
+};
+
+export type PanGestureHandlerEventPayload = {
+  /**
+   * X coordinate of the current position of the pointer (finger or a leading
+   * pointer when there are multiple fingers placed) relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  x: number;
+
+  /**
+   * Y coordinate of the current position of the pointer (finger or a leading
+   * pointer when there are multiple fingers placed) relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  y: number;
+
+  /**
+   * X coordinate of the current position of the pointer (finger or a leading
+   * pointer when there are multiple fingers placed) relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `x` in cases when the original view can be transformed as an effect of
+   * the gesture.
+   */
+  absoluteX: number;
+
+  /**
+   * Y coordinate of the current position of the pointer (finger or a leading
+   * pointer when there are multiple fingers placed) relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `y` in cases when the original view can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteY: number;
+
+  /**
+   * Translation of the pan gesture along X axis accumulated over the time of
+   * the gesture. The value is expressed in the point units.
+   */
+  translationX: number;
+
+  /**
+   * Translation of the pan gesture along Y axis accumulated over the time of
+   * the gesture. The value is expressed in the point units.
+   */
+  translationY: number;
+
+  /**
+   * Velocity of the pan gesture along the X axis in the current moment. The
+   * value is expressed in point units per second.
+   */
+  velocityX: number;
+
+  /**
+   * Velocity of the pan gesture along the Y axis in the current moment. The
+   * value is expressed in point units per second.
+   */
+  velocityY: number;
+
+  /**
+   * Object containing additional stylus data.
+   */
+  stylusData?: StylusData;
+};
+
+export type PinchGestureHandlerEventPayload = {
+  /**
+   * The scale factor relative to the points of the two touches in screen
+   * coordinates.
+   */
+  scale: number;
+
+  /**
+   * Position expressed in points along X axis of center anchor point of
+   * gesture.
+   */
+  focalX: number;
+
+  /**
+   * Position expressed in points along Y axis of center anchor point of
+   * gesture.
+   */
+  focalY: number;
+
+  /**
+   *
+   * Velocity of the pan gesture the current moment. The value is expressed in
+   * point units per second.
+   */
+  velocity: number;
+};
+
+export type TapGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+export type RotationGestureHandlerEventPayload = {
+  /**
+   * Amount rotated, expressed in radians, from the gesture's focal point
+   * (anchor).
+   */
+  rotation: number;
+
+  /**
+   * X coordinate, expressed in points, of the gesture's central focal point
+   * (anchor).
+   */
+  anchorX: number;
+
+  /**
+   * Y coordinate, expressed in points, of the gesture's central focal point
+   * (anchor).
+   */
+  anchorY: number;
+
+  /**
+   *
+   * Instantaneous velocity, expressed in point units per second, of the
+   * gesture.
+   */
+  velocity: number;
+};
+
+export type HoverGestureHandlerEventPayload = {
+  /**
+   * X coordinate of the current position of the pointer relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  x: number;
+
+  /**
+   * Y coordinate of the current position of the pointer relative to the view
+   * attached to the handler. Expressed in point units.
+   */
+  y: number;
+
+  /**
+   * X coordinate of the current position of the pointer relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `x` in cases when the original view can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteX: number;
+
+  /**
+   * Y coordinate of the current position of the pointer relative to the window.
+   * The value is expressed in point units. It is recommended to use it instead
+   * of `y` in cases when the original view can be transformed as an
+   * effect of the gesture.
+   */
+  absoluteY: number;
+
+  /**
+   * Object containing additional stylus data.
+   */
+  stylusData?: StylusData;
+};