react-native-gesture-handler 1.10.3 → 2.0.0

package/src/components/Swipeable.tsx

@@ -1,6 +1,6 @@
 // Similarily to the DrawerLayout component this deserves to be put in a
-// separate repo. Although, keeping it here for the time being will allow us
-// to move faster and fix possible issues quicker
+// separate repo. Although, keeping it here for the time being will allow us to
+// move faster and fix possible issues quicker
 
 import * as React from 'react';
 import { Component } from 'react';
@@ -15,14 +15,18 @@ import {
 } from 'react-native';
 
 import {
-  PanGestureHandler,
-  TapGestureHandler,
-  PanGestureHandlerProps,
   GestureEvent,
-  PanGestureHandlerEventPayload,
   HandlerStateChangeEvent,
+} from '../handlers/gestureHandlerCommon';
+import {
+  PanGestureHandler,
+  PanGestureHandlerEventPayload,
+  PanGestureHandlerProps,
+} from '../handlers/PanGestureHandler';
+import {
+  TapGestureHandler,
   TapGestureHandlerEventPayload,
-} from '../handlers/gestureHandlers';
+} from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -32,30 +36,105 @@ type SwipeableExcludes = Exclude<
   'onGestureEvent' | 'onHandlerStateChange'
 >;
 
-interface SwipeableProps
+export interface SwipeableProps
   extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
+  /**
+   * 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;
+
+  /**
+   * 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 left action panel gets open.
+   */
   onSwipeableLeftOpen?: () => void;
+
+  /**
+   * Called when right action panel gets open.
+   */
   onSwipeableRightOpen?: () => void;
+
+  /**
+   * Called when action panel gets open (either right or left).
+   */
   onSwipeableOpen?: () => void;
+
+  /**
+   * Called when action panel is closed.
+   */
   onSwipeableClose?: () => void;
+
+  /**
+   * Called when left action panel starts animating on open.
+   */
   onSwipeableLeftWillOpen?: () => void;
+
+  /**
+   * Called when right action panel starts animating on open.
+   */
   onSwipeableRightWillOpen?: () => void;
+
+  /**
+   * Called when action panel starts animating on open (either right or left).
+   */
   onSwipeableWillOpen?: () => void;
+
+  /**
+   * Called when action panel starts animating on close.
+   */
   onSwipeableWillClose?: () => void;
+
   /**
    *
    * This map describes the values to use as inputRange for extra interpolation:
    * AnimatedValue: [startValue, endValue]
    *
-   * progressAnimatedValue: [0, 1]
-   * dragAnimatedValue: [0, +]
+   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
@@ -68,8 +147,7 @@ interface SwipeableProps
    * This map describes the values to use as inputRange for extra interpolation:
    * AnimatedValue: [startValue, endValue]
    *
-   * progressAnimatedValue: [0, 1]
-   * dragAnimatedValue: [0, -]
+   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
@@ -77,9 +155,21 @@ interface SwipeableProps
     progressAnimatedValue: Animated.AnimatedInterpolation,
     dragAnimatedValue: Animated.AnimatedInterpolation
   ) => React.ReactNode;
+
   useNativeAnimations?: boolean;
+
   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>;
 }
 
@@ -165,17 +255,12 @@ export default class Swipeable extends Component<
         outputRange: [0, 1],
       })
     ).interpolate({
-      inputRange: [
-        -rightWidth - (overshootRight ? 1 : overshootFriction!),
-        -rightWidth,
-        leftWidth,
-        leftWidth + (overshootLeft ? 1 : overshootFriction!),
-      ],
+      inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
       outputRange: [
-        -rightWidth - (overshootRight || overshootFriction! > 1 ? 1 : 0),
+        -rightWidth - (overshootRight ? 1 / overshootFriction! : 0),
         -rightWidth,
         leftWidth,
-        leftWidth + (overshootLeft || overshootFriction! > 1 ? 1 : 0),
+        leftWidth + (overshootLeft ? 1 / overshootFriction! : 0),
       ],
     });
     this.transX = transX;
@@ -350,7 +435,9 @@ export default class Swipeable extends Component<
       <Animated.View
         style={[
           styles.leftActions,
-          // all those and below parameters can have ! since they are all asigned in constructor in `updateAnimatedEvent` but TS cannot spot it for some reason
+          // 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! }] },
         ]}>
         {renderLeftActions(this.showLeftAction!, this.transX!)}

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 root view. 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 root view. 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