react-native-gesture-handler 2.17.0 → 2.18.0

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';
@@ -15,10 +8,10 @@ import { BaseButton } from '../GestureButtons';
 import {
   GestureEvent,
   HandlerStateChangeEvent,
-  UserSelect,
 } from '../../handlers/gestureHandlerCommon';
-import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
-import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
+import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
+import type { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedbackProps';
+import type { GenericTouchableProps } from './GenericTouchableProps';
 
 /**
  * Each touchable is a states' machine which preforms transitions.
@@ -35,26 +28,6 @@ export const TOUCHABLE_STATE = {
 
 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;
-  userSelect?: UserSelect;
-}
-
 interface InternalProps {
   extraButtonProps: TouchableNativeFeedbackExtraProps;
   onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
@@ -80,7 +53,7 @@ export default class GenericTouchable extends Component<
     },
   };
 
-  // timeout handlers
+  // Timeout handlers
   pressInTimeout: Timeout;
   pressOutTimeout: Timeout;
   longPressTimeout: Timeout;
@@ -147,7 +120,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;
@@ -229,12 +202,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();
   }
 
@@ -246,7 +219,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) {

package/src/components/touchables/GenericTouchableProps.ts

@@ -0,0 +1,26 @@
+import type {
+  StyleProp,
+  ViewStyle,
+  TouchableWithoutFeedbackProps,
+  Insets,
+} from 'react-native';
+import type { UserSelect } from '../../handlers/gestureHandlerCommon';
+
+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;
+}

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,

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

@@ -1,21 +1,11 @@
-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';
 
 /**
  * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
@@ -33,7 +23,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

package/src/components/touchables/TouchableNativeFeedbackProps.tsx

@@ -0,0 +1,12 @@
+import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native';
+import type { GenericTouchableProps } from './GenericTouchableProps';
+
+export type TouchableNativeFeedbackExtraProps = {
+  borderless?: boolean;
+  rippleColor?: number | null;
+  rippleRadius?: number | null;
+  foreground?: boolean;
+};
+
+export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
+  GenericTouchableProps;

package/src/components/touchables/TouchableOpacity.tsx

@@ -5,10 +5,8 @@ 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';
 
@@ -26,7 +24,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,6 +1,7 @@
 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 = GenericTouchableProps;
 

package/src/getShadowNodeFromRef.ts

@@ -8,7 +8,7 @@ let getInternalInstanceHandleFromPublicInstance: (ref: unknown) => {
 };
 
 export function getShadowNodeFromRef(ref: unknown) {
-  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  // Load findHostInstance_DEPRECATED lazily because it may not be available before render
   if (findHostInstance_DEPRECATED === undefined) {
     try {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -20,7 +20,7 @@ export function getShadowNodeFromRef(ref: unknown) {
     }
   }
 
-  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  // 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

package/src/ghQueueMicrotask.ts

@@ -1,5 +1,8 @@
-// `queueMicrotask` was introduced to react-native in version 0.66 (https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0660)
-// Because Gesture Handler supports versions 0.64+, we have to handle situations where someone uses older version of react native.
-// That's why if `queueMicrotask` doesn't exist, we use `setImmediate` instead, since it was used before we switched to `queueMicrotask` in version 2.11.0
+// 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 queueMicrotask === 'function' ? queueMicrotask : setImmediate;
+  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

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 {
   /**
    *

package/src/handlers/GestureHandlerEventPayload.ts

@@ -0,0 +1,184 @@
+export type FlingGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+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;
+};
+
+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;
+};

package/src/handlers/LongPressGestureHandler.ts

@@ -1,3 +1,4 @@
+import { LongPressGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
 import {
   BaseGestureHandlerProps,
@@ -9,46 +10,6 @@ export const longPressGestureHandlerProps = [
   'maxDist',
 ] as const;
 
-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 interface LongPressGestureConfig {
   /**
    * Minimum time, expressed in milliseconds, that a finger must remain pressed on

package/src/handlers/NativeViewGestureHandler.ts

@@ -1,3 +1,4 @@
+import type { NativeViewGestureHandlerPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
 import {
   BaseGestureHandlerProps,
@@ -29,13 +30,6 @@ export interface NativeViewGestureHandlerProps
   extends BaseGestureHandlerProps<NativeViewGestureHandlerPayload>,
     NativeViewGestureConfig {}
 
-export type NativeViewGestureHandlerPayload = {
-  /**
-   * True if gesture was performed inside of containing view, false otherwise.
-   */
-  pointerInside: boolean;
-};
-
 export const nativeViewProps = [
   ...baseGestureHandlerProps,
   ...nativeViewGestureHandlerProps,

package/src/handlers/PanGestureHandler.ts

@@ -1,3 +1,4 @@
+import type { PanGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
 import {
   BaseGestureHandlerProps,
@@ -31,64 +32,6 @@ export const panGestureHandlerCustomNativeProps = [
   'failOffsetXEnd',
 ] as const;
 
-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;
-};
-
 interface CommonPanProperties {
   /**
    * Minimum distance the finger (or multiple finger) need to travel before the

package/src/handlers/PinchGestureHandler.ts

@@ -1,36 +1,10 @@
+import { PinchGestureHandlerEventPayload } from './GestureHandlerEventPayload';
 import createHandler from './createHandler';
 import {
   BaseGestureHandlerProps,
   baseGestureHandlerProps,
 } from './gestureHandlerCommon';
 
-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 interface PinchGestureHandlerProps
   extends BaseGestureHandlerProps<PinchGestureHandlerEventPayload> {}