react-native-gesture-handler 1.10.3 → 2.2.0

package/src/components/touchables/GenericTouchable.tsx

@@ -14,7 +14,7 @@ import { BaseButton } from '../GestureButtons';
 import {
   GestureEvent,
   HandlerStateChangeEvent,
-} from '../../handlers/gestureHandlers';
+} from '../../handlers/gestureHandlerCommon';
 import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
 import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
 
@@ -71,6 +71,7 @@ export default class GenericTouchable extends Component<
     delayLongPress: 600,
     extraButtonProps: {
       rippleColor: 'transparent',
+      exclusive: true,
     },
   };
 

package/src/components/touchables/TouchableOpacity.tsx

@@ -36,7 +36,7 @@ export default class TouchableOpacity extends Component<
       toValue: value,
       duration: duration,
       easing: Easing.inOut(Easing.quad),
-      useNativeDriver: true,
+      useNativeDriver: false,
     }).start();
   };
 

package/src/handlers/FlingGestureHandler.ts

@@ -0,0 +1,57 @@
+import createHandler from './createHandler';
+import {
+  BaseGestureHandlerProps,
+  baseGestureHandlerProps,
+} from './gestureHandlerCommon';
+
+export const flingGestureHandlerProps = [
+  'numberOfPointers',
+  '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
+   * directions in one parameter:
+   *
+   * ```js
+   * direction={Directions.RIGHT | Directions.LEFT}
+   * ```
+   *
+   * or
+   *
+   * ```js
+   * direction={Directions.DOWN}
+   * ```
+   */
+  direction?: number;
+
+  /**
+   * Determine exact number of points required to handle the fling gesture.
+   */
+  numberOfPointers?: number;
+}
+
+export interface FlingGestureHandlerProps
+  extends BaseGestureHandlerProps<FlingGestureHandlerEventPayload>,
+    FlingGestureConfig {}
+
+export type FlingGestureHandler = typeof FlingGestureHandler;
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
+export const FlingGestureHandler = createHandler<
+  FlingGestureHandlerProps,
+  FlingGestureHandlerEventPayload
+>({
+  name: 'FlingGestureHandler',
+  allowedProps: [
+    ...baseGestureHandlerProps,
+    ...flingGestureHandlerProps,
+  ] as const,
+  config: {},
+});

package/src/handlers/ForceTouchGestureHandler.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import PlatformConstants from '../PlatformConstants';
+import createHandler from './createHandler';
+import {
+  BaseGestureHandlerProps,
+  baseGestureHandlerProps,
+} from './gestureHandlerCommon';
+
+export const forceTouchGestureHandlerProps = [
+  'minForce',
+  'maxForce',
+  'feedbackOnActivation',
+] as const;
+
+class ForceTouchFallback extends React.Component {
+  static forceTouchAvailable = false;
+  componentDidMount() {
+    console.warn(
+      'ForceTouchGestureHandler is not available on this platform. Please use ForceTouchGestureHandler.forceTouchAvailable to conditionally render other components that would provide a fallback behavior specific to your usecase'
+    );
+  }
+  render() {
+    return this.props.children;
+  }
+}
+
+export type ForceTouchGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+
+  /**
+   * The pressure of a touch.
+   */
+  force: number;
+};
+
+export interface ForceTouchGestureConfig {
+  /**
+   *
+   * A minimal pressure that is required before handler can activate. Should be a
+   * value from range `[0.0, 1.0]`. Default is `0.2`.
+   */
+  minForce?: number;
+
+  /**
+   * A maximal pressure that could be applied for handler. If the pressure is
+   * greater, handler fails. Should be a value from range `[0.0, 1.0]`.
+   */
+  maxForce?: number;
+
+  /**
+   * Boolean value defining if haptic feedback has to be performed on
+   * activation.
+   */
+  feedbackOnActivation?: boolean;
+}
+
+export interface ForceTouchGestureHandlerProps
+  extends BaseGestureHandlerProps<ForceTouchGestureHandlerEventPayload>,
+    ForceTouchGestureConfig {}
+
+export type ForceTouchGestureHandler = typeof ForceTouchGestureHandler & {
+  forceTouchAvailable: boolean;
+};
+// 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<
+      ForceTouchGestureHandlerProps,
+      ForceTouchGestureHandlerEventPayload
+    >({
+      name: 'ForceTouchGestureHandler',
+      allowedProps: [
+        ...baseGestureHandlerProps,
+        ...forceTouchGestureHandlerProps,
+      ] as const,
+      config: {},
+    })
+  : ForceTouchFallback;
+
+(ForceTouchGestureHandler as ForceTouchGestureHandler).forceTouchAvailable =
+  PlatformConstants?.forceTouchAvailable || false;

package/src/handlers/LongPressGestureHandler.ts

@@ -0,0 +1,84 @@
+import createHandler from './createHandler';
+import {
+  BaseGestureHandlerProps,
+  baseGestureHandlerProps,
+} from './gestureHandlerCommon';
+
+export const longPressGestureHandlerProps = [
+  'minDurationMs',
+  '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
+   * the corresponding view. The default value is 500.
+   */
+  minDurationMs?: number;
+
+  /**
+   * Maximum distance, expressed in points, that defines how far the finger is
+   * allowed to travel during a long press gesture. If the finger travels
+   * further than the defined distance and the handler hasn't yet activated, it
+   * will fail to recognize the gesture. The default value is 10.
+   */
+  maxDist?: number;
+}
+
+export interface LongPressGestureHandlerProps
+  extends BaseGestureHandlerProps<LongPressGestureHandlerEventPayload>,
+    LongPressGestureConfig {}
+
+export type LongPressGestureHandler = typeof LongPressGestureHandler;
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
+export const LongPressGestureHandler = createHandler<
+  LongPressGestureHandlerProps,
+  LongPressGestureHandlerEventPayload
+>({
+  name: 'LongPressGestureHandler',
+  allowedProps: [
+    ...baseGestureHandlerProps,
+    ...longPressGestureHandlerProps,
+  ] as const,
+  config: {},
+});

package/src/handlers/NativeViewGestureHandler.ts

@@ -1,24 +1,48 @@
 import createHandler from './createHandler';
-import { BaseGestureHandlerProps, baseProps } from './gestureHandlers';
+import {
+  BaseGestureHandlerProps,
+  baseGestureHandlerProps,
+} from './gestureHandlerCommon';
 
-export interface NativeViewGestureHandlerProps
-  extends BaseGestureHandlerProps<NativeViewGestureHandlerPayload> {
+export const nativeViewGestureHandlerProps = [
+  'shouldActivateOnStart',
+  'disallowInterruption',
+] as const;
+
+export interface NativeViewGestureConfig {
+  /**
+   * Android only.
+   *
+   * Determines whether the handler should check for an existing touch event on
+   * instantiation.
+   */
   shouldActivateOnStart?: boolean;
+
+  /**
+   * When `true`, cancels all other gesture handlers when this
+   * `NativeViewGestureHandler` receives an `ACTIVE` state event.
+   */
   disallowInterruption?: boolean;
 }
 
+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 = [
-  ...baseProps,
-  'shouldActivateOnStart',
-  'disallowInterruption',
+  ...baseGestureHandlerProps,
+  ...nativeViewGestureHandlerProps,
 ] as const;
 
 export type NativeViewGestureHandler = typeof NativeViewGestureHandler;
-// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlers.ts file
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const NativeViewGestureHandler = createHandler<
   NativeViewGestureHandlerProps,
   NativeViewGestureHandlerPayload

package/src/handlers/PanGestureHandler.ts

@@ -0,0 +1,321 @@
+import createHandler from './createHandler';
+import {
+  BaseGestureHandlerProps,
+  baseGestureHandlerProps,
+} from './gestureHandlerCommon';
+
+export const panGestureHandlerProps = [
+  'activeOffsetY',
+  'activeOffsetX',
+  'failOffsetY',
+  'failOffsetX',
+  'minDist',
+  'minVelocity',
+  'minVelocityX',
+  'minVelocityY',
+  'minPointers',
+  'maxPointers',
+  'avgTouches',
+  'enableTrackpadTwoFingerGesture',
+] as const;
+
+export const panGestureHandlerCustomNativeProps = [
+  'activeOffsetYStart',
+  'activeOffsetYEnd',
+  'activeOffsetXStart',
+  'activeOffsetXEnd',
+  'failOffsetYStart',
+  'failOffsetYEnd',
+  'failOffsetXStart',
+  '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
+   * handler activates. Expressed in points.
+   */
+  minDist?: number;
+
+  /**
+   * Android only.
+   */
+  avgTouches?: boolean;
+
+  /**
+   * 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;
+
+  /**
+   * A number of fingers that is required to be placed before handler can
+   * activate. Should be a higher or equal to 0 integer.
+   */
+  minPointers?: number;
+
+  /**
+   * When the given number of fingers is placed on the screen and handler hasn't
+   * yet activated it will fail recognizing the gesture. Should be a higher or
+   * equal to 0 integer.
+   */
+  maxPointers?: number;
+
+  minVelocity?: number;
+  minVelocityX?: number;
+  minVelocityY?: number;
+}
+
+export interface PanGestureConfig extends CommonPanProperties {
+  activeOffsetYStart?: number;
+  activeOffsetYEnd?: number;
+  activeOffsetXStart?: number;
+  activeOffsetXEnd?: number;
+  failOffsetYStart?: number;
+  failOffsetYEnd?: number;
+  failOffsetXStart?: number;
+  failOffsetXEnd?: number;
+}
+
+export interface PanGestureHandlerProps
+  extends BaseGestureHandlerProps<PanGestureHandlerEventPayload>,
+    CommonPanProperties {
+  /**
+   * Range along X axis (in points) where fingers travels without activation of
+   * handler. Moving outside of this range implies activation of handler. Range
+   * can be given as an array or a single number. If range is set as an array,
+   * first value must be lower or equal to 0, a the second one higher or equal
+   * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
+   * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
+   */
+  activeOffsetY?: number | number[];
+
+  /**
+   * Range along X axis (in points) where fingers travels without activation of
+   * handler. Moving outside of this range implies activation of handler. Range
+   * can be given as an array or a single number. If range is set as an array,
+   * first value must be lower or equal to 0, a the second one higher or equal
+   * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
+   * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
+   */
+  activeOffsetX?: number | number[];
+
+  /**
+   * When the finger moves outside this range (in points) along Y axis and
+   * handler hasn't yet activated it will fail recognizing the gesture. Range
+   * can be given as an array or a single number. If range is set as an array,
+   * first value must be lower or equal to 0, a the second one higher or equal
+   * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
+   * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
+   */
+  failOffsetY?: number | number[];
+
+  /**
+   * When the finger moves outside this range (in points) along X axis and
+   * handler hasn't yet activated it will fail recognizing the gesture. Range
+   * can be given as an array or a single number. If range is set as an array,
+   * first value must be lower or equal to 0, a the second one higher or equal
+   * to 0. If only one number `p` is given a range of `(-inf, p)` will be used
+   * if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
+   */
+  failOffsetX?: number | number[];
+}
+
+export type PanGestureHandler = typeof PanGestureHandler;
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
+export const PanGestureHandler = createHandler<
+  PanGestureHandlerProps,
+  PanGestureHandlerEventPayload
+>({
+  name: 'PanGestureHandler',
+  allowedProps: [
+    ...baseGestureHandlerProps,
+    ...panGestureHandlerProps,
+  ] as const,
+  config: {},
+  transformProps: managePanProps,
+  customNativeProps: panGestureHandlerCustomNativeProps,
+});
+
+function validatePanGestureHandlerProps(props: PanGestureHandlerProps) {
+  if (
+    Array.isArray(props.activeOffsetX) &&
+    (props.activeOffsetX[0] > 0 || props.activeOffsetX[1] < 0)
+  ) {
+    throw new Error(
+      `First element of activeOffsetX should be negative, a the second one should be positive`
+    );
+  }
+
+  if (
+    Array.isArray(props.activeOffsetY) &&
+    (props.activeOffsetY[0] > 0 || props.activeOffsetY[1] < 0)
+  ) {
+    throw new Error(
+      `First element of activeOffsetY should be negative, a the second one should be positive`
+    );
+  }
+
+  if (
+    Array.isArray(props.failOffsetX) &&
+    (props.failOffsetX[0] > 0 || props.failOffsetX[1] < 0)
+  ) {
+    throw new Error(
+      `First element of failOffsetX should be negative, a the second one should be positive`
+    );
+  }
+
+  if (
+    Array.isArray(props.failOffsetY) &&
+    (props.failOffsetY[0] > 0 || props.failOffsetY[1] < 0)
+  ) {
+    throw new Error(
+      `First element of failOffsetY should be negative, a the second one should be positive`
+    );
+  }
+
+  if (props.minDist && (props.failOffsetX || props.failOffsetY)) {
+    throw new Error(
+      `It is not supported to use minDist with failOffsetX or failOffsetY, use activeOffsetX and activeOffsetY instead`
+    );
+  }
+
+  if (props.minDist && (props.activeOffsetX || props.activeOffsetY)) {
+    throw new Error(
+      `It is not supported to use minDist with activeOffsetX or activeOffsetY`
+    );
+  }
+}
+
+function transformPanGestureHandlerProps(props: PanGestureHandlerProps) {
+  type InternalPanGHKeys =
+    | 'activeOffsetXStart'
+    | 'activeOffsetXEnd'
+    | 'failOffsetXStart'
+    | 'failOffsetXEnd'
+    | 'activeOffsetYStart'
+    | 'activeOffsetYEnd'
+    | 'failOffsetYStart'
+    | 'failOffsetYEnd';
+  type PanGestureHandlerInternalProps = PanGestureHandlerProps &
+    Partial<Record<InternalPanGHKeys, number>>;
+
+  const res: PanGestureHandlerInternalProps = { ...props };
+
+  if (props.activeOffsetX !== undefined) {
+    delete res.activeOffsetX;
+    if (Array.isArray(props.activeOffsetX)) {
+      res.activeOffsetXStart = props.activeOffsetX[0];
+      res.activeOffsetXEnd = props.activeOffsetX[1];
+    } else if (props.activeOffsetX < 0) {
+      res.activeOffsetXStart = props.activeOffsetX;
+    } else {
+      res.activeOffsetXEnd = props.activeOffsetX;
+    }
+  }
+
+  if (props.activeOffsetY !== undefined) {
+    delete res.activeOffsetY;
+    if (Array.isArray(props.activeOffsetY)) {
+      res.activeOffsetYStart = props.activeOffsetY[0];
+      res.activeOffsetYEnd = props.activeOffsetY[1];
+    } else if (props.activeOffsetY < 0) {
+      res.activeOffsetYStart = props.activeOffsetY;
+    } else {
+      res.activeOffsetYEnd = props.activeOffsetY;
+    }
+  }
+
+  if (props.failOffsetX !== undefined) {
+    delete res.failOffsetX;
+    if (Array.isArray(props.failOffsetX)) {
+      res.failOffsetXStart = props.failOffsetX[0];
+      res.failOffsetXEnd = props.failOffsetX[1];
+    } else if (props.failOffsetX < 0) {
+      res.failOffsetXStart = props.failOffsetX;
+    } else {
+      res.failOffsetXEnd = props.failOffsetX;
+    }
+  }
+
+  if (props.failOffsetY !== undefined) {
+    delete res.failOffsetY;
+    if (Array.isArray(props.failOffsetY)) {
+      res.failOffsetYStart = props.failOffsetY[0];
+      res.failOffsetYEnd = props.failOffsetY[1];
+    } else if (props.failOffsetY < 0) {
+      res.failOffsetYStart = props.failOffsetY;
+    } else {
+      res.failOffsetYEnd = props.failOffsetY;
+    }
+  }
+
+  return res;
+}
+
+export function managePanProps(props: PanGestureHandlerProps) {
+  if (__DEV__) {
+    validatePanGestureHandlerProps(props);
+  }
+  return transformPanGestureHandlerProps(props);
+}

package/src/handlers/PinchGestureHandler.ts

@@ -0,0 +1,46 @@
+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> {}
+
+export type PinchGestureHandler = typeof PinchGestureHandler;
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
+export const PinchGestureHandler = createHandler<
+  PinchGestureHandlerProps,
+  PinchGestureHandlerEventPayload
+>({
+  name: 'PinchGestureHandler',
+  allowedProps: baseGestureHandlerProps,
+  config: {},
+});