react-native-gesture-handler 2.22.0 → 2.23.0

package/src/components/ReanimatedSwipeable.tsx

@@ -9,6 +9,7 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
+import { GestureRef } from '../handlers/gestures/gesture';
 import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 import { GestureDetector } from '../handlers/gestures/GestureDetector';
 import {
@@ -18,9 +19,13 @@ import {
 import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
 import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload';
 import Animated, {
+  ReduceMotion,
   SharedValue,
   interpolate,
+  measure,
   runOnJS,
+  runOnUI,
+  useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
@@ -198,6 +203,14 @@ export interface SwipeableProps
    * apply `flex: 1`
    */
   childrenContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the swipeable's gesture handler.
+   */
+  simultaneousWithExternalGesture?:
+    | Exclude<GestureRef, number>
+    | Exclude<GestureRef, number>[];
 }
 
 export interface SwipeableMethods {
@@ -243,6 +256,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       onSwipeableClose,
       renderLeftActions,
       renderRightActions,
+      simultaneousWithExternalGesture,
       ...remainingProps
     } = props;
 
@@ -256,20 +270,9 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     const leftWidth = useSharedValue<number>(0);
     const rightWidth = useSharedValue<number>(0);
 
-    // used for synchronizing layout measurements between JS and UI
-    const rightOffset = useSharedValue<number | null>(null);
-
     const showLeftProgress = useSharedValue<number>(0);
     const showRightProgress = useSharedValue<number>(0);
 
-    const updateRightElementWidth = useCallback(() => {
-      'worklet';
-      if (rightOffset.value === null) {
-        rightOffset.value = rowWidth.value;
-      }
-      rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
-    }, [rightOffset, rightWidth, rowWidth]);
-
     const updateAnimatedEvent = useCallback(() => {
       'worklet';
 
@@ -371,11 +374,12 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           'worklet';
 
           const translationSpringConfig = {
-            duration: 1000,
-            dampingRatio: 0.9,
-            stiffness: 500,
+            mass: 2,
+            damping: 1000,
+            stiffness: 700,
             velocity: velocityX,
             overshootClamping: true,
+            reduceMotion: ReduceMotion.System,
             ...animationOptions,
           };
 
@@ -411,16 +415,17 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
             }
           );
 
-          const progressTarget = toValue === 0 ? 0 : 1;
+          const progressTarget = toValue === 0 ? 0 : 1 * Math.sign(toValue);
+
+          showLeftProgress.value = withSpring(
+            Math.max(progressTarget, 0),
+            progressSpringConfig
+          );
 
-          showLeftProgress.value =
-            leftWidth.value > 0
-              ? withSpring(progressTarget, progressSpringConfig)
-              : 0;
-          showRightProgress.value =
-            rightWidth.value > 0
-              ? withSpring(progressTarget, progressSpringConfig)
-              : 0;
+          showRightProgress.value = withSpring(
+            Math.max(-progressTarget, 0),
+            progressSpringConfig
+          );
 
           dispatchImmediateEvents(frozenRowState, toValue);
 
@@ -439,20 +444,66 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         ]
       );
 
+    const leftLayoutRef = useAnimatedRef();
+    const leftWrapperLayoutRef = useAnimatedRef();
+    const rightLayoutRef = useAnimatedRef();
+
+    const updateElementWidths = useCallback(() => {
+      'worklet';
+      const leftLayout = measure(leftLayoutRef);
+      const leftWrapperLayout = measure(leftWrapperLayoutRef);
+      const rightLayout = measure(rightLayoutRef);
+      leftWidth.value =
+        (leftLayout?.pageX ?? 0) - (leftWrapperLayout?.pageX ?? 0);
+
+      rightWidth.value =
+        rowWidth.value -
+        (rightLayout?.pageX ?? rowWidth.value) +
+        (leftWrapperLayout?.pageX ?? 0);
+    }, [
+      leftLayoutRef,
+      leftWrapperLayoutRef,
+      rightLayoutRef,
+      leftWidth,
+      rightWidth,
+      rowWidth,
+    ]);
+
     const swipeableMethods = useMemo<SwipeableMethods>(
       () => ({
         close() {
           'worklet';
-          animateRow(0);
+          if (_WORKLET) {
+            animateRow(0);
+            return;
+          }
+          runOnUI(() => {
+            animateRow(0);
+          })();
         },
         openLeft() {
           'worklet';
-          animateRow(leftWidth.value);
+          if (_WORKLET) {
+            updateElementWidths();
+            animateRow(leftWidth.value);
+            return;
+          }
+          runOnUI(() => {
+            updateElementWidths();
+            animateRow(leftWidth.value);
+          })();
         },
         openRight() {
           'worklet';
-          // rightOffset and rowWidth are already much sooner than rightWidth
-          animateRow((rightOffset.value ?? 0) - rowWidth.value);
+          if (_WORKLET) {
+            updateElementWidths();
+            animateRow(-rightWidth.value);
+            return;
+          }
+          runOnUI(() => {
+            updateElementWidths();
+            animateRow(-rightWidth.value);
+          })();
         },
         reset() {
           'worklet';
@@ -463,14 +514,14 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         },
       }),
       [
+        animateRow,
+        updateElementWidths,
         leftWidth,
-        rightOffset,
-        rowWidth,
+        rightWidth,
         userDrag,
         showLeftProgress,
         appliedTranslation,
         rowState,
-        animateRow,
       ]
     );
 
@@ -481,49 +532,61 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       [rowWidth]
     );
 
+    // As stated in `Dimensions.get` docstring, this function should be called on every render
+    // since dimensions may change (e.g. orientation change)
+
+    const leftActionAnimation = useAnimatedStyle(() => {
+      return {
+        opacity: showLeftProgress.value === 0 ? 0 : 1,
+      };
+    });
+
     const leftElement = useCallback(
       () => (
-        <Animated.View style={[styles.leftActions]}>
+        <Animated.View
+          ref={leftWrapperLayoutRef}
+          style={[styles.leftActions, leftActionAnimation]}>
           {renderLeftActions?.(
             showLeftProgress,
             appliedTranslation,
             swipeableMethods
           )}
-          <View
-            onLayout={({ nativeEvent }) =>
-              (leftWidth.value = nativeEvent.layout.x)
-            }
-          />
+          <Animated.View ref={leftLayoutRef} />
         </Animated.View>
       ),
       [
         appliedTranslation,
-        leftWidth,
+        leftActionAnimation,
+        leftLayoutRef,
+        leftWrapperLayoutRef,
         renderLeftActions,
         showLeftProgress,
         swipeableMethods,
       ]
     );
 
+    const rightActionAnimation = useAnimatedStyle(() => {
+      return {
+        opacity: showRightProgress.value === 0 ? 0 : 1,
+      };
+    });
+
     const rightElement = useCallback(
       () => (
-        <Animated.View style={[styles.rightActions]}>
+        <Animated.View style={[styles.rightActions, rightActionAnimation]}>
           {renderRightActions?.(
             showRightProgress,
             appliedTranslation,
             swipeableMethods
           )}
-          <View
-            onLayout={({ nativeEvent }) => {
-              rightOffset.value = nativeEvent.layout.x;
-            }}
-          />
+          <Animated.View ref={rightLayoutRef} />
         </Animated.View>
       ),
       [
         appliedTranslation,
         renderRightActions,
-        rightOffset,
+        rightActionAnimation,
+        rightLayoutRef,
         showRightProgress,
         swipeableMethods,
       ]
@@ -535,8 +598,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         const { velocityX } = event;
         userDrag.value = event.translationX;
 
-        updateRightElementWidth();
-
         const leftThresholdProp = leftThreshold ?? leftWidth.value / 2;
         const rightThresholdProp = rightThreshold ?? rightWidth.value / 2;
 
@@ -574,7 +635,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         rightWidth,
         rowState,
         userDrag,
-        updateRightElementWidth,
       ]
     );
 
@@ -585,75 +645,94 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
     const dragStarted = useSharedValue<boolean>(false);
 
-    const tapGesture = useMemo(
-      () =>
-        Gesture.Tap()
-          .shouldCancelWhenOutside(true)
-          .onStart(() => {
-            if (rowState.value !== 0) {
-              close();
-            }
-          }),
-      [close, rowState]
-    );
+    const tapGesture = useMemo(() => {
+      const tap = Gesture.Tap()
+        .shouldCancelWhenOutside(true)
+        .onStart(() => {
+          if (rowState.value !== 0) {
+            close();
+          }
+        });
 
-    const panGesture = useMemo(
-      () =>
-        Gesture.Pan()
-          .enabled(enabled !== false)
-          .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
-          .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
-          .onStart(() => {
-            updateRightElementWidth();
-          })
-          .onUpdate(
-            (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
-              userDrag.value = event.translationX;
-
-              const direction =
-                rowState.value === -1
-                  ? SwipeDirection.RIGHT
-                  : rowState.value === 1
-                    ? SwipeDirection.LEFT
-                    : event.translationX > 0
-                      ? SwipeDirection.RIGHT
-                      : SwipeDirection.LEFT;
-
-              if (!dragStarted.value) {
-                dragStarted.value = true;
-                if (rowState.value === 0 && onSwipeableOpenStartDrag) {
-                  runOnJS(onSwipeableOpenStartDrag)(direction);
-                } else if (onSwipeableCloseStartDrag) {
-                  runOnJS(onSwipeableCloseStartDrag)(direction);
-                }
-              }
+      if (!simultaneousWithExternalGesture) {
+        return tap;
+      }
 
-              updateAnimatedEvent();
-            }
-          )
-          .onEnd(
-            (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-              handleRelease(event);
+      if (Array.isArray(simultaneousWithExternalGesture)) {
+        tap.simultaneousWithExternalGesture(...simultaneousWithExternalGesture);
+      } else {
+        tap.simultaneousWithExternalGesture(simultaneousWithExternalGesture);
+      }
+
+      return tap;
+    }, [close, rowState, simultaneousWithExternalGesture]);
+
+    const panGesture = useMemo(() => {
+      const pan = Gesture.Pan()
+        .enabled(enabled !== false)
+        .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
+        .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
+        .onStart(updateElementWidths)
+        .onUpdate(
+          (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+            userDrag.value = event.translationX;
+
+            const direction =
+              rowState.value === -1
+                ? SwipeDirection.RIGHT
+                : rowState.value === 1
+                  ? SwipeDirection.LEFT
+                  : event.translationX > 0
+                    ? SwipeDirection.RIGHT
+                    : SwipeDirection.LEFT;
+
+            if (!dragStarted.value) {
+              dragStarted.value = true;
+              if (rowState.value === 0 && onSwipeableOpenStartDrag) {
+                runOnJS(onSwipeableOpenStartDrag)(direction);
+              } else if (onSwipeableCloseStartDrag) {
+                runOnJS(onSwipeableCloseStartDrag)(direction);
+              }
             }
-          )
-          .onFinalize(() => {
-            dragStarted.value = false;
-          }),
-      [
-        dragOffsetFromLeftEdge,
-        dragOffsetFromRightEdge,
-        dragStarted,
-        enableTrackpadTwoFingerGesture,
-        enabled,
-        handleRelease,
-        onSwipeableCloseStartDrag,
-        onSwipeableOpenStartDrag,
-        rowState,
-        updateAnimatedEvent,
-        updateRightElementWidth,
-        userDrag,
-      ]
-    );
+
+            updateAnimatedEvent();
+          }
+        )
+        .onEnd(
+          (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+            handleRelease(event);
+          }
+        )
+        .onFinalize(() => {
+          dragStarted.value = false;
+        });
+
+      if (!simultaneousWithExternalGesture) {
+        return pan;
+      }
+
+      if (Array.isArray(simultaneousWithExternalGesture)) {
+        pan.simultaneousWithExternalGesture(...simultaneousWithExternalGesture);
+      } else {
+        pan.simultaneousWithExternalGesture(simultaneousWithExternalGesture);
+      }
+
+      return pan;
+    }, [
+      dragOffsetFromLeftEdge,
+      dragOffsetFromRightEdge,
+      dragStarted,
+      enableTrackpadTwoFingerGesture,
+      enabled,
+      handleRelease,
+      onSwipeableCloseStartDrag,
+      onSwipeableOpenStartDrag,
+      rowState,
+      updateAnimatedEvent,
+      updateElementWidths,
+      userDrag,
+      simultaneousWithExternalGesture,
+    ]);
 
     useImperativeHandle(ref, () => swipeableMethods, [swipeableMethods]);
 
@@ -700,9 +779,11 @@ const styles = StyleSheet.create({
   leftActions: {
     ...StyleSheet.absoluteFillObject,
     flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+    overflow: 'hidden',
   },
   rightActions: {
     ...StyleSheet.absoluteFillObject,
     flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
+    overflow: 'hidden',
   },
 });

package/src/components/Text.tsx

@@ -11,11 +11,13 @@ import {
   TextProps as RNTextProps,
 } from 'react-native';
 
-import { Gesture, GestureDetector } from '../';
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../handlers/gestures/GestureDetector';
 
 export const Text = forwardRef(
   (props: RNTextProps, ref: ForwardedRef<RNText>) => {
-    const { onPress, ...rest } = props;
+    const { onPress, onLongPress, ...rest } = props;
+
     const textRef = useRef<RNText | null>(null);
     const native = Gesture.Native().runOnJS(true);
 
@@ -49,10 +51,17 @@ export const Text = forwardRef(
       );
     }, []);
 
-    return (
+    return onPress || onLongPress ? (
       <GestureDetector gesture={native}>
-        <RNText onPress={onPress} ref={refHandler} {...rest} />
+        <RNText
+          onPress={onPress}
+          onLongPress={onLongPress}
+          ref={refHandler}
+          {...rest}
+        />
       </GestureDetector>
+    ) : (
+      <RNText ref={ref} {...rest} />
     );
   }
 );

package/src/components/touchables/TouchableHighlight.tsx

@@ -19,10 +19,15 @@ interface State {
   };
 }
 
+/**
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ */
 export type TouchableHighlightProps = RNTouchableHighlightProps &
   GenericTouchableProps;
 
 /**
+ * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
+ *
  * TouchableHighlight follows RN's implementation
  */
 export default class TouchableHighlight extends Component<

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

@@ -8,6 +8,8 @@ import {
 } from './TouchableNativeFeedbackProps';
 
 /**
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ *
  * 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

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.
+ */
+const TouchableNativeFeedback = RNTouchableNativeFeedback;
 
 export default TouchableNativeFeedback;

package/src/components/touchables/TouchableNativeFeedbackProps.tsx

@@ -8,5 +8,8 @@ export type TouchableNativeFeedbackExtraProps = {
   foreground?: boolean;
 };
 
+/**
+ * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
+ */
 export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
   GenericTouchableProps;

package/src/components/touchables/TouchableOpacity.tsx

@@ -10,12 +10,17 @@ 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.
+ */
 export type TouchableOpacityProps = RNTouchableOpacityProps &
   GenericTouchableProps & {
     useNativeAnimations?: boolean;
   };
 
 /**
+ * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler.
+ *
  * TouchableOpacity bases on timing animation which has been used in RN's core
  */
 export default class TouchableOpacity extends Component<TouchableOpacityProps> {

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -3,8 +3,14 @@ import { PropsWithChildren } from 'react';
 import GenericTouchable from './GenericTouchable';
 import type { GenericTouchableProps } from './GenericTouchableProps';
 
+/**
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
+ */
 export type TouchableWithoutFeedbackProps = GenericTouchableProps;
 
+/**
+ * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
+ */
 const TouchableWithoutFeedback = React.forwardRef<
   GenericTouchable,
   PropsWithChildren<TouchableWithoutFeedbackProps>

package/src/findNodeHandle.web.ts

@@ -1,9 +1,15 @@
+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).

package/src/handlers/FlingGestureHandler.ts

@@ -33,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

@@ -50,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/LongPressGestureHandler.ts

@@ -32,13 +32,23 @@ export interface LongPressGestureConfig {
   numberOfPointers?: number;
 }
 
+/**
+ * @deprecated LongPressGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.LongPress()` instead.
+ */
 export interface LongPressGestureHandlerProps
   extends BaseGestureHandlerProps<LongPressGestureHandlerEventPayload>,
     LongPressGestureConfig {}
 
 export const longPressHandlerName = 'LongPressGestureHandler';
 
+/**
+ * @deprecated LongPressGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.LongPress()` instead.
+ */
 export type LongPressGestureHandler = typeof LongPressGestureHandler;
+
+/**
+ * @deprecated LongPressGestureHandler will be removed in the future version of Gesture Handler. Use `Gesture.LongPress()` instead.
+ */
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const LongPressGestureHandler = createHandler<
   LongPressGestureHandlerProps,