react-native-gesture-handler 1.10.0 → 2.0.0

package/src/components/GestureComponents.tsx

@@ -1,4 +1,10 @@
-import React, { PropsWithChildren } from 'react';
+import * as React from 'react';
+import {
+  PropsWithChildren,
+  ForwardedRef,
+  RefAttributes,
+  ReactElement,
+} from 'react';
 import {
   ScrollView as RNScrollView,
   ScrollViewProps as RNScrollViewProps,
@@ -14,7 +20,10 @@ import {
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 
-import { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+import {
+  NativeViewGestureHandlerProps,
+  nativeViewProps,
+} from '../handlers/NativeViewGestureHandler';
 
 export const ScrollView = createNativeWrapper<
   PropsWithChildren<RNScrollViewProps>
@@ -23,15 +32,9 @@ export const ScrollView = createNativeWrapper<
   shouldCancelWhenOutside: false,
 });
 // backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
+// include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type ScrollView = typeof ScrollView & {
-  scrollTo(
-    y?: number | { x?: number; y?: number; animated?: boolean },
-    x?: number,
-    animated?: boolean
-  ): void;
-  scrollToEnd(options?: { animated: boolean }): void;
-};
+export type ScrollView = typeof ScrollView & RNScrollView;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
@@ -39,47 +42,51 @@ export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   disallowInterruption: true,
 });
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Switch = typeof Switch;
+export type Switch = typeof Switch & RNSwitch;
 
 export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type TextInput = typeof TextInput;
+export type TextInput = typeof TextInput & RNTextInput;
 
 export const DrawerLayoutAndroid = createNativeWrapper<
   PropsWithChildren<RNDrawerLayoutAndroidProps>
 >(RNDrawerLayoutAndroid, { disallowInterruption: true });
-// we use literal object since TS gives error when using RN's `positions`
-// @ts-ignore FIXME(TS) maybe this should be removed?
-DrawerLayoutAndroid.positions = { Left: 'left', Right: 'right' };
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid;
+export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
+  RNDrawerLayoutAndroid;
 
-export const FlatList = React.forwardRef<RNFlatList<any>, RNFlatListProps<any>>(
-  (props, ref) => (
+export const FlatList = React.forwardRef((props, ref) => {
+  const flatListProps = {};
+  const scrollViewProps = {};
+  for (const [propName, value] of Object.entries(props)) {
+    // https://github.com/microsoft/TypeScript/issues/26255
+    if ((nativeViewProps as readonly string[]).includes(propName)) {
+      // @ts-ignore - this function cannot have generic type so we have to ignore this error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      scrollViewProps[propName] = value;
+    } else {
+      // @ts-ignore - this function cannot have generic type so we have to ignore this error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      flatListProps[propName] = value;
+    }
+  }
+  return (
+    // @ts-ignore - this function cannot have generic type so we have to ignore this error
     <RNFlatList
       ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
+      {...flatListProps}
+      renderScrollComponent={(scrollProps) => (
+        <ScrollView {...{ ...scrollProps, ...scrollViewProps }} />
+      )}
     />
-  )
-);
+  );
+}) as <ItemT = any>(
+  props: PropsWithChildren<
+    RNFlatListProps<ItemT> &
+      RefAttributes<FlatList<ItemT>> &
+      NativeViewGestureHandlerProps
+  >,
+  ref: ForwardedRef<FlatList<ItemT>>
+) => ReactElement | null;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList<ItemT> = React.ComponentType<
-  RNFlatListProps<ItemT> &
-    NativeViewGestureHandlerProps &
-    React.RefAttributes<any>
-> & {
-  scrollToEnd: (params?: { animated?: boolean }) => void;
-  scrollToIndex: (params: {
-    animated?: boolean;
-    index: number;
-    viewOffset?: number;
-    viewPosition?: number;
-  }) => void;
-  scrollToItem: (params: {
-    animated?: boolean;
-    item: ItemT;
-    viewPosition?: number;
-  }) => void;
-  scrollToOffset: (params: { animated?: boolean; offset: number }) => void;
-};
+export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

package/src/components/GestureComponents.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   DrawerLayoutAndroid as RNDrawerLayoutAndroid,
   FlatList as RNFlatList,

package/src/components/GestureHandlerButton.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { View } from 'react-native';
 
 export default React.forwardRef<View>((props, ref) => (

package/src/components/Swipeable.tsx

@@ -1,8 +1,9 @@
 // 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 React, { Component } from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 import {
   Animated,
   StyleSheet,
@@ -14,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;
@@ -31,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.
    * */
@@ -67,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.
    * */
@@ -76,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>;
 }
 
@@ -164,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;
@@ -349,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

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 import {
   Animated,
   Platform,
@@ -13,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';
 
@@ -56,7 +57,7 @@ interface InternalProps {
 
 // TODO: maybe can be better
 // TODO: all clearTimeout have ! added, maybe they shouldn't ?
-type Timeout = null | NodeJS.Timeout | undefined;
+type Timeout = ReturnType<typeof setTimeout> | null | undefined;
 
 /**
  * GenericTouchable is not intented to be used as it is.
@@ -70,6 +71,7 @@ export default class GenericTouchable extends Component<
     delayLongPress: 600,
     extraButtonProps: {
       rippleColor: 'transparent',
+      exclusive: true,
     },
   };
 

package/src/components/touchables/TouchableHighlight.tsx

@@ -1,4 +1,5 @@
-import React, { Component } from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 import GenericTouchable, {
   GenericTouchableProps,
   TOUCHABLE_STATE,

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

@@ -3,7 +3,8 @@ import {
   TouchableNativeFeedbackProps,
   ColorValue,
 } from 'react-native';
-import React, { Component } from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
 
 export type TouchableNativeFeedbackExtraProps = {

package/src/components/touchables/TouchableOpacity.tsx

@@ -9,7 +9,8 @@ import GenericTouchable, {
   TOUCHABLE_STATE,
   GenericTouchableProps,
 } from './GenericTouchable';
-import React, { Component } from 'react';
+import * as React from 'react';
+import { Component } from 'react';
 
 /**
  * TouchableOpacity bases on timing animation which has been used in RN's core
@@ -35,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/components/touchables/TouchableWithoutFeedback.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
 import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
 
 const TouchableWithoutFeedback = React.forwardRef<
   GenericTouchable,
-  GenericTouchableProps
+  PropsWithChildren<GenericTouchableProps>
 >((props, ref) => <GenericTouchable ref={ref} {...props} />);
 
 TouchableWithoutFeedback.defaultProps = GenericTouchable.defaultProps;

package/src/gestureHandlerRootHOC.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import * as React from 'react';
 import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import GestureHandlerRootView from './GestureHandlerRootView';
 
-export default function gestureHandlerRootHOC(
-  Component: React.ComponentType<Record<string, unknown>>,
+export default function gestureHandlerRootHOC<P>(
+  Component: React.ComponentType<P>,
   containerStyles?: StyleProp<ViewStyle>
-): React.ComponentType<Record<string, unknown>> {
-  function Wrapper(props: Record<string, unknown>) {
+): React.ComponentType<P> {
+  function Wrapper(props: P) {
     return (
       <GestureHandlerRootView style={[styles.container, containerStyles]}>
         <Component {...props} />

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: {},
+});