react-native-reorderable-list 0.12.0 → 0.13.1

package/src/components/ReorderableListCore/useReorderableListCore.ts

@@ -16,12 +16,14 @@ import Animated, {
   AnimatedRef,
   Easing,
   SharedValue,
+  measure,
   runOnJS,
   runOnUI,
   scrollTo,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedScrollHandler,
+  useDerivedValue,
   useSharedValue,
   withDelay,
   withTiming,
@@ -37,9 +39,9 @@ import {
   ReorderableListDragEndEvent,
   ReorderableListDragStartEvent,
   ReorderableListIndexChangeEvent,
+  ReorderableListReorderEvent,
   ReorderableListState,
 } from '../../types';
-import type {ReorderableListReorderEvent} from '../../types';
 
 const version = React.version.split('.');
 const hasAutomaticBatching = version.length
@@ -54,19 +56,19 @@ interface UseReorderableListCoreArgs<T> {
   autoscrollDelay: number;
   autoscrollActivationDelta: number;
   animationDuration: number;
-  dragReorderThreshold: number;
   onReorder: (event: ReorderableListReorderEvent) => void;
   onDragStart?: (event: ReorderableListDragStartEvent) => void;
   onDragEnd?: (event: ReorderableListDragEndEvent) => void;
   onIndexChange?: (event: ReorderableListIndexChangeEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void;
   scrollViewContainerRef: React.RefObject<ScrollView> | undefined;
+  scrollViewPageY: SharedValue<number> | undefined;
   scrollViewHeightY: SharedValue<number> | undefined;
   scrollViewScrollOffsetY: SharedValue<number> | undefined;
   scrollViewScrollEnabled: SharedValue<boolean> | undefined;
+  scrollable: boolean | undefined;
   initialScrollEnabled: boolean | undefined;
   initialScrollViewScrollEnabled: boolean | undefined;
-  nestedScrollable: boolean | undefined;
   cellAnimations: ReorderableListCellAnimations | undefined;
   shouldUpdateActiveItem: boolean | undefined;
   panEnabled: boolean;
@@ -81,19 +83,19 @@ export const useReorderableListCore = <T>({
   autoscrollDelay,
   autoscrollActivationDelta,
   animationDuration,
-  dragReorderThreshold,
   onReorder,
   onDragStart,
   onDragEnd,
   onLayout,
   onIndexChange,
   scrollViewContainerRef,
+  scrollViewPageY,
   scrollViewHeightY,
   scrollViewScrollOffsetY,
   scrollViewScrollEnabled,
+  scrollable,
   initialScrollEnabled,
   initialScrollViewScrollEnabled,
-  nestedScrollable,
   cellAnimations,
   shouldUpdateActiveItem,
   panActivateAfterLongPress,
@@ -105,22 +107,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);
+  const flatListPageY = 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);
@@ -135,6 +140,11 @@ export const useReorderableListCore = <T>({
   const lastDragDirectionPivot = useSharedValue<number | null>(null);
   const autoscrollDelta = useSharedValue(autoscrollActivationDelta);
 
+  // Position of the list relative to the scroll container
+  const nestedFlatListPositionY = useDerivedValue(
+    () => flatListPageY.value - (scrollViewPageY?.value || 0),
+  );
+
   useEffect(() => {
     duration.value = animationDuration;
     autoscrollDelta.value = autoscrollActivationDelta;
@@ -175,6 +185,8 @@ 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>) => {
@@ -196,6 +208,39 @@ export const useReorderableListCore = <T>({
     [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()
@@ -215,6 +260,8 @@ export const useReorderableListCore = <T>({
           }
 
           if (state.value !== ReorderableListState.RELEASED) {
+            setCurrentItemDragCenterY(e);
+
             currentY.value = startY.value + e.translationY;
             currentTranslationY.value = e.translationY;
             dragY.value =
@@ -233,9 +280,10 @@ export const useReorderableListCore = <T>({
       currentTranslationY,
       dragY,
       gestureState,
-      setDragDirection,
       dragScrollTranslationY,
       scrollViewDragScrollTranslationY,
+      setDragDirection,
+      setCurrentItemDragCenterY,
     ],
   );
 
@@ -295,6 +343,7 @@ export const useReorderableListCore = <T>({
     scrollViewDragScrollTranslationY.value = 0;
     dragDirection.value = 0;
     lastDragDirectionPivot.value = null;
+    currentItemDragCenterY.value = null;
   }, [
     state,
     draggedIndex,
@@ -303,6 +352,7 @@ export const useReorderableListCore = <T>({
     scrollViewDragScrollTranslationY,
     dragDirection,
     lastDragDirectionPivot,
+    currentItemDragCenterY,
   ]);
 
   const resetSharedValuesAfterAnimations = useCallback(() => {
@@ -325,102 +375,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;
+    }
 
-      const {index: newIndex, direction: newDirection} = getIndexFromY(y);
-      const delta = Math.abs(previousY.value - y);
+    return currentIndex.value;
+  }, [
+    currentIndex,
+    currentItemDragCenterY,
+    itemOffset,
+    itemHeight,
+    flatListScrollOffsetY,
+    scrollViewDragScrollTranslationY,
+  ]);
 
-      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 setCurrentIndex = useCallback(() => {
+    'worklet';
+
+    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);
       }
@@ -498,7 +552,7 @@ export const useReorderableListCore = <T>({
     },
   );
 
-  const calculateHiddenArea = useCallback(() => {
+  const computeHiddenArea = useCallback(() => {
     'worklet';
     if (!scrollViewScrollOffsetY || !scrollViewHeightY) {
       return {top: 0, bottom: 0};
@@ -524,114 +578,132 @@ export const useReorderableListCore = <T>({
     flatListHeightY,
   ]);
 
-  const calculateThresholdArea = useCallback(
-    (hiddenArea: {top: number; bottom: number}) => {
-      'worklet';
-      const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
-      const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
-      const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
-      const visibleHeight =
-        flatListHeightY.value -
-        (hiddenArea.top + hiddenArea.bottom) -
-        (offsetTop + offsetBottom);
+  const computeThresholdArea = useCallback(() => {
+    'worklet';
 
-      const area = visibleHeight * threshold;
-      const top = area + offsetTop;
-      const bottom = flatListHeightY.value - area - offsetBottom;
+    const hiddenArea = computeHiddenArea();
 
-      return {top, bottom};
-    },
-    [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY],
-  );
+    const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
+    const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
+    const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
+    const visibleHeight =
+      flatListHeightY.value -
+      (hiddenArea.top + hiddenArea.bottom) -
+      (offsetTop + offsetBottom);
 
-  const calculateThresholdAreaParent = useCallback(
-    (hiddenArea: {top: number; bottom: number}) => {
-      'worklet';
-      const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
-      const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
-      const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
-
-      const area = flatListHeightY.value * threshold;
-      const top = area + offsetTop;
-      const bottom = flatListHeightY.value - area - offsetBottom;
-
-      // if the hidden area is 0 then we don't have a threshold area
-      // we might have floating errors like 0.0001 which we should ignore
-      return {
-        top: hiddenArea.top > 0.1 ? top + hiddenArea.top : 0,
-        bottom: hiddenArea.bottom > 0.1 ? bottom - hiddenArea.bottom : 0,
-      };
-    },
-    [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY],
-  );
+    const area = visibleHeight * threshold;
+    const top = area + offsetTop;
+    const bottom = flatListHeightY.value - area - offsetBottom;
 
-  const shouldScrollParent = useCallback(
+    return {top, bottom};
+  }, [
+    computeHiddenArea,
+    autoscrollThreshold,
+    autoscrollThresholdOffset,
+    flatListHeightY,
+  ]);
+
+  const computeContainerThresholdArea = useCallback(() => {
+    'worklet';
+    if (!scrollViewHeightY) {
+      return {top: -Infinity, bottom: Infinity};
+    }
+
+    const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
+    const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
+    const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
+    const visibleHeight = scrollViewHeightY.value - (offsetTop + offsetBottom);
+
+    const area = visibleHeight * threshold;
+    const top = area + offsetTop;
+    const bottom = visibleHeight - area - offsetBottom;
+
+    return {top, bottom};
+  }, [autoscrollThreshold, autoscrollThresholdOffset, scrollViewHeightY]);
+
+  const shouldScrollContainer = useCallback(
     (y: number) => {
       'worklet';
-      const hiddenArea = calculateHiddenArea();
-      const thresholdAreaParent = calculateThresholdAreaParent(hiddenArea);
+      const containerThresholdArea = computeContainerThresholdArea();
+      const nestedListHiddenArea = computeHiddenArea();
 
-      // we might have floating errors like 0.0001 which we should ignore
+      // We should scroll the container if there's a hidden part of the nested list.
+      // We might have floating errors like 0.0001 which we should ignore.
       return (
-        (hiddenArea.top > 0.1 && y <= thresholdAreaParent.top) ||
-        (hiddenArea.bottom > 0.1 && y >= thresholdAreaParent.bottom)
+        (nestedListHiddenArea.top > 0.01 && y <= containerThresholdArea.top) ||
+        (nestedListHiddenArea.bottom > 0.01 &&
+          y >= containerThresholdArea.bottom)
       );
     },
-    [calculateHiddenArea, calculateThresholdAreaParent],
+    [computeHiddenArea, computeContainerThresholdArea],
   );
 
-  const scrollDirection = useCallback(
-    (y: number) => {
-      'worklet';
-      const hiddenArea = calculateHiddenArea();
+  const getRelativeContainerY = useCallback(() => {
+    'worklet';
 
-      if (shouldScrollParent(y)) {
-        const thresholdAreaParent = calculateThresholdAreaParent(hiddenArea);
-        if (y <= thresholdAreaParent.top) {
-          return -1;
-        }
+    return (
+      currentY.value +
+      nestedFlatListPositionY.value -
+      scrollViewDragInitialScrollOffsetY.value
+    );
+  }, [currentY, nestedFlatListPositionY, scrollViewDragInitialScrollOffsetY]);
 
-        if (y >= thresholdAreaParent.bottom) {
-          return 1;
-        }
+  const getRelativeListY = useCallback(() => {
+    'worklet';
 
-        return 0;
-      } else if (nestedScrollable) {
-        const thresholdArea = calculateThresholdArea(hiddenArea);
-        if (y <= thresholdArea.top) {
-          return -1;
-        }
+    return currentY.value + scrollViewDragScrollTranslationY.value;
+  }, [currentY, scrollViewDragScrollTranslationY]);
 
-        if (y >= thresholdArea.bottom) {
-          return 1;
-        }
+  const scrollDirection = useCallback(() => {
+    'worklet';
+
+    const relativeContainerY = getRelativeContainerY();
+    if (shouldScrollContainer(relativeContainerY)) {
+      const containerThresholdArea = computeContainerThresholdArea();
+      if (relativeContainerY <= containerThresholdArea.top) {
+        return -1;
       }
 
-      return 0;
-    },
-    [
-      nestedScrollable,
-      shouldScrollParent,
-      calculateHiddenArea,
-      calculateThresholdArea,
-      calculateThresholdAreaParent,
-    ],
-  );
+      if (relativeContainerY >= containerThresholdArea.bottom) {
+        return 1;
+      }
+    } else if (scrollable) {
+      const relativeListY = getRelativeListY();
+      const thresholdArea = computeThresholdArea();
+
+      if (relativeListY <= thresholdArea.top) {
+        return -1;
+      }
+
+      if (relativeListY >= thresholdArea.bottom) {
+        return 1;
+      }
+    }
+
+    return 0;
+  }, [
+    shouldScrollContainer,
+    computeThresholdArea,
+    computeContainerThresholdArea,
+    getRelativeContainerY,
+    getRelativeListY,
+    scrollable,
+  ]);
 
   useAnimatedReaction(
-    () => currentY.value + scrollViewDragScrollTranslationY.value,
-    y => {
+    () => currentY.value,
+    () => {
       if (
         state.value === ReorderableListState.DRAGGED ||
         state.value === ReorderableListState.AUTOSCROLL
       ) {
-        setCurrentIndex(y);
+        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)) {
+        if (dragDirection.value === scrollDirection()) {
           // 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) {
             state.value = ReorderableListState.AUTOSCROLL;
@@ -652,9 +724,8 @@ export const useReorderableListCore = <T>({
         autoscrollTrigger.value !== lastAutoscrollTrigger.value &&
         state.value === ReorderableListState.AUTOSCROLL
       ) {
-        let y = currentY.value + scrollViewDragScrollTranslationY.value;
         const autoscrollIncrement =
-          scrollDirection(y) *
+          dragDirection.value *
           AUTOSCROLL_CONFIG.increment *
           autoscrollSpeedScale;
 
@@ -663,7 +734,13 @@ export const useReorderableListCore = <T>({
           let listRef =
             flatListRef as unknown as AnimatedRef<Animated.ScrollView>;
 
-          if (shouldScrollParent(y) && scrollViewScrollOffsetY) {
+          // Checking on every autoscroll whether to scroll the container,
+          // this allows to smoothly pass the scroll from the container to the nested list
+          // without any gesture input.
+          if (
+            scrollViewScrollOffsetY &&
+            shouldScrollContainer(getRelativeContainerY())
+          ) {
             scrollOffset = scrollViewScrollOffsetY.value;
             listRef =
               scrollViewContainerRef as unknown as AnimatedRef<Animated.ScrollView>;
@@ -674,7 +751,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();
       }
     },
   );
@@ -705,14 +782,13 @@ export const useReorderableListCore = <T>({
     }
   });
 
-  // parent scroll handler
+  // container scroll handler
   useAnimatedReaction(
     () => scrollViewScrollOffsetY?.value,
     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;
@@ -747,13 +823,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;
 
@@ -772,7 +846,6 @@ export const useReorderableListCore = <T>({
       scrollViewDragInitialScrollOffsetY,
       setScrollEnabled,
       currentIndex,
-      previousIndex,
       draggedHeight,
       draggedIndex,
       state,
@@ -785,12 +858,32 @@ export const useReorderableListCore = <T>({
 
   const handleFlatListLayout = useCallback(
     (e: LayoutChangeEvent) => {
-      nestedFlatListPositionY.value = e.nativeEvent.layout.y;
       flatListHeightY.value = e.nativeEvent.layout.height;
 
+      // If nested in a scroll container.
+      if (scrollViewScrollOffsetY) {
+        // Timeout fixes a bug where measure returns height 0.
+        setTimeout(() => {
+          runOnUI(() => {
+            const measurement = measure(flatListRef);
+            if (!measurement) {
+              return;
+            }
+
+            flatListPageY.value = measurement.pageY;
+          })();
+        }, 100);
+      }
+
       onLayout?.(e);
     },
-    [nestedFlatListPositionY, flatListHeightY, onLayout],
+    [
+      flatListRef,
+      flatListPageY,
+      flatListHeightY,
+      scrollViewScrollOffsetY,
+      onLayout,
+    ],
   );
 
   const handleRef = (value: FlatList<T>) => {