react-native-reorderable-list 0.11.0 → 0.13.0

package/src/components/ReorderableListCore/useReorderableListCore.ts

@@ -6,7 +6,12 @@ import {
   unstable_batchedUpdates,
 } from 'react-native';
 
-import {Gesture, State} from 'react-native-gesture-handler';
+import {
+  Gesture,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+  State,
+} from 'react-native-gesture-handler';
 import Animated, {
   AnimatedRef,
   Easing,
@@ -47,8 +52,8 @@ interface UseReorderableListCoreArgs<T> {
   autoscrollThresholdOffset: {top?: number; bottom?: number} | undefined;
   autoscrollSpeedScale: number;
   autoscrollDelay: number;
+  autoscrollActivationDelta: number;
   animationDuration: number;
-  dragReorderThreshold: number;
   onReorder: (event: ReorderableListReorderEvent) => void;
   onDragStart?: (event: ReorderableListDragStartEvent) => void;
   onDragEnd?: (event: ReorderableListDragEndEvent) => void;
@@ -73,8 +78,8 @@ export const useReorderableListCore = <T>({
   autoscrollThresholdOffset,
   autoscrollSpeedScale,
   autoscrollDelay,
+  autoscrollActivationDelta,
   animationDuration,
-  dragReorderThreshold,
   onReorder,
   onDragStart,
   onDragEnd,
@@ -98,22 +103,25 @@ export const useReorderableListCore = <T>({
   const gestureState = useSharedValue<State>(State.UNDETERMINED);
   const currentY = useSharedValue(0);
   const currentTranslationY = useSharedValue(0);
+  const currentItemDragCenterY = useSharedValue<number | null>(null);
+  const startItemDragCenterY = useSharedValue<number>(0);
   const flatListScrollOffsetY = useSharedValue(0);
   const flatListHeightY = useSharedValue(0);
   const nestedFlatListPositionY = useSharedValue(0);
+  // The scroll y translation of the list since drag start
   const dragScrollTranslationY = useSharedValue(0);
+  // The initial scroll offset y of the list on drag start
   const dragInitialScrollOffsetY = useSharedValue(0);
+  // The scroll y translation of the ScrollViewContainer since drag start
   const scrollViewDragScrollTranslationY = useSharedValue(0);
+  // The initial scroll offset y of the ScrollViewContainer on drag start
   const scrollViewDragInitialScrollOffsetY = useSharedValue(0);
   const draggedHeight = useSharedValue(0);
   const itemOffset = useSharedValue<number[]>([]);
   const itemHeight = useSharedValue<number[]>([]);
   const autoscrollTrigger = useSharedValue(-1);
   const lastAutoscrollTrigger = useSharedValue(-1);
-  const previousY = useSharedValue(0);
   const dragY = useSharedValue(0);
-  const previousDirection = useSharedValue(0);
-  const previousIndex = useSharedValue(-1);
   const currentIndex = useSharedValue(-1);
   const draggedIndex = useSharedValue(-1);
   const state = useSharedValue<ReorderableListState>(ReorderableListState.IDLE);
@@ -124,10 +132,14 @@ export const useReorderableListCore = <T>({
   const duration = useSharedValue(animationDuration);
   const scaleDefault = useSharedValue(1);
   const opacityDefault = useSharedValue(1);
+  const dragDirection = useSharedValue(0);
+  const lastDragDirectionPivot = useSharedValue<number | null>(null);
+  const autoscrollDelta = useSharedValue(autoscrollActivationDelta);
 
   useEffect(() => {
     duration.value = animationDuration;
-  }, [duration, animationDuration]);
+    autoscrollDelta.value = autoscrollActivationDelta;
+  }, [duration, animationDuration, autoscrollDelta, autoscrollActivationDelta]);
 
   const listContextValue = useMemo(
     () => ({
@@ -160,6 +172,66 @@ export const useReorderableListCore = <T>({
     ],
   );
 
+  /**
+   * Decides the intended drag direction of the user.
+   * This is used to to determine if the user intends to autoscroll
+   * when within the threshold area.
+   *
+   * @param e - The payload of the pan gesture update event.
+   */
+  const setDragDirection = useCallback(
+    (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
+
+      const direction = e.velocityY > 0 ? 1 : -1;
+      if (direction !== dragDirection.value) {
+        if (lastDragDirectionPivot.value === null) {
+          lastDragDirectionPivot.value = e.absoluteY;
+        } else if (
+          Math.abs(e.absoluteY - lastDragDirectionPivot.value) >=
+          autoscrollDelta.value
+        ) {
+          dragDirection.value = direction;
+          lastDragDirectionPivot.value = e.absoluteY;
+        }
+      }
+    },
+    [dragDirection, lastDragDirectionPivot, autoscrollDelta],
+  );
+
+  const setCurrentItemDragCenterY = useCallback(
+    (e: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
+
+      if (currentItemDragCenterY.value === null) {
+        if (currentIndex.value >= 0) {
+          const itemCenter = itemHeight.value[currentIndex.value] * 0.5;
+          // the y coordinate of the item relative to the list
+          const itemY =
+            itemOffset.value[currentIndex.value] -
+            (flatListScrollOffsetY.value +
+              scrollViewDragScrollTranslationY.value);
+
+          const value = itemY + itemCenter + e.translationY;
+          startItemDragCenterY.value = value;
+          currentItemDragCenterY.value = value;
+        }
+      } else {
+        currentItemDragCenterY.value =
+          startItemDragCenterY.value + e.translationY;
+      }
+    },
+    [
+      currentItemDragCenterY,
+      currentIndex,
+      startItemDragCenterY,
+      itemOffset,
+      itemHeight,
+      flatListScrollOffsetY,
+      scrollViewDragScrollTranslationY,
+    ],
+  );
+
   const panGestureHandler = useMemo(
     () =>
       Gesture.Pan()
@@ -174,7 +246,13 @@ export const useReorderableListCore = <T>({
           }
         })
         .onUpdate(e => {
+          if (state.value === ReorderableListState.DRAGGED) {
+            setDragDirection(e);
+          }
+
           if (state.value !== ReorderableListState.RELEASED) {
+            setCurrentItemDragCenterY(e);
+
             currentY.value = startY.value + e.translationY;
             currentTranslationY.value = e.translationY;
             dragY.value =
@@ -187,14 +265,16 @@ export const useReorderableListCore = <T>({
         .onEnd(e => (gestureState.value = e.state))
         .onFinalize(e => (gestureState.value = e.state)),
     [
-      currentTranslationY,
+      state,
+      startY,
       currentY,
+      currentTranslationY,
+      dragY,
+      gestureState,
       dragScrollTranslationY,
       scrollViewDragScrollTranslationY,
-      gestureState,
-      dragY,
-      startY,
-      state,
+      setDragDirection,
+      setCurrentItemDragCenterY,
     ],
   );
 
@@ -252,12 +332,18 @@ export const useReorderableListCore = <T>({
     dragY.value = 0;
     dragScrollTranslationY.value = 0;
     scrollViewDragScrollTranslationY.value = 0;
+    dragDirection.value = 0;
+    lastDragDirectionPivot.value = null;
+    currentItemDragCenterY.value = null;
   }, [
+    state,
     draggedIndex,
     dragY,
     dragScrollTranslationY,
     scrollViewDragScrollTranslationY,
-    state,
+    dragDirection,
+    lastDragDirectionPivot,
+    currentItemDragCenterY,
   ]);
 
   const resetSharedValuesAfterAnimations = useCallback(() => {
@@ -280,102 +366,106 @@ export const useReorderableListCore = <T>({
     }
   };
 
-  const getIndexFromY = useCallback(
-    (y: number) => {
+  const recomputeLayout = useCallback(
+    (from: number, to: number) => {
       'worklet';
 
-      const relativeY = flatListScrollOffsetY.value + y;
-      const count = itemOffset.value.length;
+      const itemDirection = to > from;
+      const index1 = itemDirection ? from : to;
+      const index2 = itemDirection ? to : from;
+
+      const newOffset1 = itemOffset.value[index1];
+      const newHeight1 = itemHeight.value[index2];
+      const newOffset2 =
+        itemOffset.value[index2] +
+        itemHeight.value[index2] -
+        itemHeight.value[index1];
+      const newHeight2 = itemHeight.value[index1];
+
+      itemOffset.value[index1] = newOffset1;
+      itemHeight.value[index1] = newHeight1;
+      itemOffset.value[index2] = newOffset2;
+      itemHeight.value[index2] = newHeight2;
+    },
+    [itemOffset, itemHeight],
+  );
 
-      for (let i = 0; i < count; i++) {
-        if (currentIndex.value === i) {
-          continue;
-        }
+  /**
+   * Computes a potential new drop container for the current dragged item and evaluates
+   * whether the dragged item center is nearer to the center of the current container or the new one.
+   *
+   * @returns The new index if the center of the dragged item is closer to the center of
+   * the new drop container or the current index if closer to the current drop container.
+   */
+  const computeCurrentIndex = useCallback(() => {
+    'worklet';
 
-        const direction = i > currentIndex.value ? 1 : -1;
-        const threshold = Math.max(0, Math.min(1, dragReorderThreshold));
-        const height = itemHeight.value[i];
-        const offset = itemOffset.value[i] + height * threshold * direction;
+    if (currentItemDragCenterY.value === null) {
+      return currentIndex.value;
+    }
 
-        if (
-          (i === 0 && relativeY <= offset) ||
-          (i === count - 1 && relativeY >= offset + height) ||
-          (relativeY >= offset && relativeY <= offset + height)
-        ) {
-          return {index: i, direction};
-        }
+    // apply scroll offset and scroll container translation
+    const relativeDragCenterY =
+      flatListScrollOffsetY.value +
+      scrollViewDragScrollTranslationY.value +
+      currentItemDragCenterY.value;
+
+    const currentOffset = itemOffset.value[currentIndex.value];
+    const currentHeight = itemHeight.value[currentIndex.value];
+    const currentCenter = currentOffset + currentHeight * 0.5;
+
+    const max = itemOffset.value.length;
+    const possibleIndex =
+      relativeDragCenterY < currentCenter
+        ? Math.max(0, currentIndex.value - 1)
+        : Math.min(max - 1, currentIndex.value + 1);
+
+    if (currentIndex.value !== possibleIndex) {
+      let possibleOffset = itemOffset.value[possibleIndex];
+      if (possibleIndex > currentIndex.value) {
+        possibleOffset += itemHeight.value[possibleIndex] - currentHeight;
       }
 
-      return {
-        index: currentIndex.value,
-        direction: previousDirection.value,
-      };
-    },
-    [
-      dragReorderThreshold,
-      currentIndex,
-      flatListScrollOffsetY,
-      previousDirection,
-      itemOffset,
-      itemHeight,
-    ],
-  );
+      const possibleCenter = possibleOffset + currentHeight * 0.5;
+      const distanceFromCurrent = Math.abs(relativeDragCenterY - currentCenter);
+      const distanceFromPossible = Math.abs(
+        relativeDragCenterY - possibleCenter,
+      );
 
-  const setCurrentIndex = useCallback(
-    (y: number) => {
-      'worklet';
+      return distanceFromCurrent <= distanceFromPossible
+        ? currentIndex.value
+        : possibleIndex;
+    }
+
+    return currentIndex.value;
+  }, [
+    currentIndex,
+    currentItemDragCenterY,
+    itemOffset,
+    itemHeight,
+    flatListScrollOffsetY,
+    scrollViewDragScrollTranslationY,
+  ]);
 
-      const {index: newIndex, direction: newDirection} = getIndexFromY(y);
-      const delta = Math.abs(previousY.value - y);
+  const setCurrentIndex = useCallback(() => {
+    'worklet';
 
-      if (
-        currentIndex.value !== newIndex &&
-        // if the same two items re-swap index check delta and direction to avoid swap flickering
-        (previousIndex.value !== newIndex ||
-          (previousDirection.value !== newDirection && delta >= 5))
-      ) {
-        const itemDirection = newIndex > currentIndex.value;
-        const index1 = itemDirection ? currentIndex.value : newIndex;
-        const index2 = itemDirection ? newIndex : currentIndex.value;
-
-        const newOffset1 = itemOffset.value[index1];
-        const newHeight1 = itemHeight.value[index2];
-        const newOffset2 =
-          itemOffset.value[index2] +
-          (itemHeight.value[index2] - itemHeight.value[index1]);
-        const newHeight2 = itemHeight.value[index1];
-
-        itemOffset.value[index1] = newOffset1;
-        itemHeight.value[index1] = newHeight1;
-        itemOffset.value[index2] = newOffset2;
-        itemHeight.value[index2] = newHeight2;
-
-        previousY.value = y;
-        previousDirection.value = newDirection;
-        previousIndex.value = currentIndex.value;
-        currentIndex.value = newIndex;
-
-        onIndexChange?.({index: newIndex});
-      }
-    },
-    [
-      currentIndex,
-      previousIndex,
-      previousDirection,
-      previousY,
-      itemOffset,
-      itemHeight,
-      getIndexFromY,
-      onIndexChange,
-    ],
-  );
+    const newIndex = computeCurrentIndex();
+
+    if (currentIndex.value !== newIndex) {
+      recomputeLayout(currentIndex.value, newIndex);
+      currentIndex.value = newIndex;
+
+      onIndexChange?.({index: newIndex});
+    }
+  }, [currentIndex, computeCurrentIndex, recomputeLayout, onIndexChange]);
 
   const runDefaultDragAnimations = useCallback(
     (type: 'start' | 'end') => {
       'worklet';
 
       // if no custom scale run default
-      if (!(cellAnimations && 'transformtra' in cellAnimations)) {
+      if (!(cellAnimations && 'transform' in cellAnimations)) {
         const scaleConfig = SCALE_ANIMATION_CONFIG_DEFAULT[type];
         scaleDefault.value = withTiming(scaleConfig.toValue, scaleConfig);
       }
@@ -580,14 +670,18 @@ export const useReorderableListCore = <T>({
         state.value === ReorderableListState.DRAGGED ||
         state.value === ReorderableListState.AUTOSCROLL
       ) {
-        setCurrentIndex(y);
-
-        if (scrollDirection(y) !== 0) {
+        setCurrentIndex();
+
+        // Trigger autoscroll when:
+        // 1. Within the threshold area (top or bottom of list)
+        // 2. Have dragged in the same direction as the scroll
+        // 3. Not already in autoscroll mode
+        if (dragDirection.value === scrollDirection(y)) {
+          // When the first two conditions are met and it's already in autoscroll mode, we let it continue (no-op)
           if (state.value !== ReorderableListState.AUTOSCROLL) {
-            // trigger autoscroll
+            state.value = ReorderableListState.AUTOSCROLL;
             lastAutoscrollTrigger.value = autoscrollTrigger.value;
             autoscrollTrigger.value *= -1;
-            state.value = ReorderableListState.AUTOSCROLL;
           }
         } else if (state.value === ReorderableListState.AUTOSCROLL) {
           state.value = ReorderableListState.DRAGGED;
@@ -625,7 +719,7 @@ export const useReorderableListCore = <T>({
 
         // when autoscrolling user may not be moving his finger so we need
         // to update the current position of the dragged item here
-        setCurrentIndex(y);
+        setCurrentIndex();
       }
     },
   );
@@ -662,8 +756,7 @@ export const useReorderableListCore = <T>({
     value => {
       if (value && scrollViewScrollEnabled) {
         // checking if the list is not scrollable instead of the scrolling state
-        // fixes a bug on iOS where the item is shifted after autoscrolling and then
-        // moving await from autoscroll area
+        // fixes a bug on iOS where the item is shifted after autoscrolling and moving away from the area
         if (!scrollViewScrollEnabled.value) {
           scrollViewDragScrollTranslationY.value =
             value - scrollViewDragInitialScrollOffsetY.value;
@@ -698,13 +791,11 @@ export const useReorderableListCore = <T>({
         }
 
         dragInitialScrollOffsetY.value = flatListScrollOffsetY.value;
-        scrollViewDragInitialScrollOffsetY.value = scrollViewScrollOffsetY
-          ? scrollViewScrollOffsetY.value
-          : 0;
+        scrollViewDragInitialScrollOffsetY.value =
+          scrollViewScrollOffsetY?.value || 0;
 
         draggedHeight.value = itemHeight.value[index];
         draggedIndex.value = index;
-        previousIndex.value = -1;
         currentIndex.value = index;
         state.value = ReorderableListState.DRAGGED;
 
@@ -723,7 +814,6 @@ export const useReorderableListCore = <T>({
       scrollViewDragInitialScrollOffsetY,
       setScrollEnabled,
       currentIndex,
-      previousIndex,
       draggedHeight,
       draggedIndex,
       state,

package/src/types/props.ts

@@ -90,10 +90,11 @@ export interface ReorderableListProps<T>
    */
   autoscrollDelay?: number;
   /**
-   * Specifies the fraction of an item's size at which it will shift when a dragged item crosses over it.
-   * For example, a value of 0.2 means the item shifts when the dragged item passes 20% of its height (vertical list). Default is `0.2`.
+   * Allows configuring the delta for autoscroll activation when dragging an item in the same direction as the autoscroll.
+   * This is particularly useful when an item is dragged within the autoscroll area to account for minor unintentional movements.
+   * Default: `5`.
    */
-  dragReorderThreshold?: number;
+  autoscrollActivationDelta?: number;
   /**
    * Duration of the animations in milliseconds.
    * Be aware that users won't be able to drag a new item until the dragged item is released and