react-native-gesture-handler 2.22.0 → 2.22.1

package/src/components/ReanimatedSwipeable.tsx

@@ -18,9 +18,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,
@@ -256,20 +260,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 +364,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 +405,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 +434,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.value,
+    ]);
+
     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 +504,14 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         },
       }),
       [
+        animateRow,
+        updateElementWidths,
         leftWidth,
-        rightOffset,
-        rowWidth,
+        rightWidth,
         userDrag,
         showLeftProgress,
         appliedTranslation,
         rowState,
-        animateRow,
       ]
     );
 
@@ -481,49 +522,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 +588,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 +625,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         rightWidth,
         rowState,
         userDrag,
-        updateRightElementWidth,
       ]
     );
 
@@ -603,9 +653,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           .enabled(enabled !== false)
           .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
           .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
-          .onStart(() => {
-            updateRightElementWidth();
-          })
+          .onStart(updateElementWidths)
           .onUpdate(
             (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
               userDrag.value = event.translationX;
@@ -650,7 +698,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         onSwipeableOpenStartDrag,
         rowState,
         updateAnimatedEvent,
-        updateRightElementWidth,
+        updateElementWidths,
         userDrag,
       ]
     );
@@ -700,9 +748,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/handlers/createNativeWrapper.tsx

@@ -29,17 +29,23 @@ export default function createNativeWrapper<P>(
     P & NativeViewGestureHandlerProps
   >((props, ref) => {
     // Filter out props that should be passed to gesture handler wrapper
-    const gestureHandlerProps = Object.keys(props).reduce(
+    const { gestureHandlerProps, childProps } = Object.keys(props).reduce(
       (res, key) => {
         // TS being overly protective with it's types, see https://github.com/microsoft/TypeScript/issues/26255#issuecomment-458013731 for more info
         const allowedKeys: readonly string[] = NATIVE_WRAPPER_PROPS_FILTER;
         if (allowedKeys.includes(key)) {
           // @ts-ignore FIXME(TS)
-          res[key] = props[key];
+          res.gestureHandlerProps[key] = props[key];
+        } else {
+          // @ts-ignore FIXME(TS)
+          res.childProps[key] = props[key];
         }
         return res;
       },
-      { ...config } // Watch out not to modify config
+      {
+        gestureHandlerProps: { ...config }, // Watch out not to modify config
+        childProps: { enabled: props.enabled } as P,
+      }
     );
     const _ref = useRef<React.ComponentType<P>>();
     const _gestureHandlerRef = useRef<React.ComponentType<P>>();
@@ -63,7 +69,7 @@ export default function createNativeWrapper<P>(
         {...gestureHandlerProps}
         // @ts-ignore TODO(TS)
         ref={_gestureHandlerRef}>
-        <Component {...props} ref={_ref} />
+        <Component {...childProps} ref={_ref} />
       </NativeViewGestureHandler>
     );
   });