react-native-reorderable-list 0.13.0 → 0.13.1

package/src/components/ReorderableListCore/ReorderableListCore.tsx

@@ -32,6 +32,7 @@ const AnimatedFlatList = Animated.createAnimatedComponent(
 interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
   // not optional but undefined to avoid forgetting to pass a prop
   scrollViewContainerRef: React.RefObject<ScrollView> | undefined;
+  scrollViewPageY: SharedValue<number> | undefined;
   scrollViewHeightY: SharedValue<number> | undefined;
   scrollViewScrollOffsetY: SharedValue<number> | undefined;
   scrollViewScrollEnabled: SharedValue<boolean> | undefined;
@@ -56,6 +57,7 @@ const ReorderableListCore = <T,>(
     onDragEnd,
     onIndexChange,
     scrollViewContainerRef,
+    scrollViewPageY,
     scrollViewHeightY,
     scrollViewScrollOffsetY,
     scrollViewScrollEnabled,
@@ -96,9 +98,11 @@ const ReorderableListCore = <T,>(
     onDragEnd,
     onIndexChange,
     scrollViewContainerRef,
+    scrollViewPageY,
     scrollViewHeightY,
     scrollViewScrollOffsetY,
     scrollViewScrollEnabled,
+    scrollable,
     // flatlist will default to true if we pass explicitly undefined,
     // but internally we would treat it as false, so we force true
     initialScrollEnabled:
@@ -107,7 +111,6 @@ const ReorderableListCore = <T,>(
       typeof initialScrollViewScrollEnabled === 'undefined'
         ? true
         : initialScrollViewScrollEnabled,
-    nestedScrollable: scrollable,
     cellAnimations,
     shouldUpdateActiveItem,
     panEnabled,

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
@@ -60,12 +62,13 @@ interface UseReorderableListCoreArgs<T> {
   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;
@@ -86,12 +89,13 @@ export const useReorderableListCore = <T>({
   onLayout,
   onIndexChange,
   scrollViewContainerRef,
+  scrollViewPageY,
   scrollViewHeightY,
   scrollViewScrollOffsetY,
   scrollViewScrollEnabled,
+  scrollable,
   initialScrollEnabled,
   initialScrollViewScrollEnabled,
-  nestedScrollable,
   cellAnimations,
   shouldUpdateActiveItem,
   panActivateAfterLongPress,
@@ -107,7 +111,7 @@ export const useReorderableListCore = <T>({
   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
@@ -136,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;
@@ -543,7 +552,7 @@ export const useReorderableListCore = <T>({
     },
   );
 
-  const calculateHiddenArea = useCallback(() => {
+  const computeHiddenArea = useCallback(() => {
     'worklet';
     if (!scrollViewScrollOffsetY || !scrollViewHeightY) {
       return {top: 0, bottom: 0};
@@ -569,103 +578,121 @@ 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
@@ -676,7 +703,7 @@ export const useReorderableListCore = <T>({
         // 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;
@@ -697,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;
 
@@ -708,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>;
@@ -750,7 +782,7 @@ export const useReorderableListCore = <T>({
     }
   });
 
-  // parent scroll handler
+  // container scroll handler
   useAnimatedReaction(
     () => scrollViewScrollOffsetY?.value,
     value => {
@@ -826,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>) => {

package/src/components/ScrollViewContainer.tsx

@@ -1,8 +1,10 @@
-import React, {useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {LayoutChangeEvent} from 'react-native';
 
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {
+  measure,
+  runOnUI,
   useAnimatedRef,
   useAnimatedScrollHandler,
   useComposedEventHandler,
@@ -21,6 +23,7 @@ export const ScrollViewContainer: React.FC<ScrollViewContainerProps> = ({
   const scrollViewScrollEnabled = useSharedValue(scrollEnabled);
   const scrollViewContainerRef = useAnimatedRef<Animated.ScrollView>();
   const scrollViewScrollOffsetY = useSharedValue(0);
+  const scrollViewPageY = useSharedValue(0);
   const scrollViewHeightY = useSharedValue(0);
 
   const outerScrollGesture = useMemo(() => Gesture.Native(), []);
@@ -40,6 +43,7 @@ export const ScrollViewContainer: React.FC<ScrollViewContainerProps> = ({
   const contextValue = useMemo(
     () => ({
       scrollViewContainerRef,
+      scrollViewPageY,
       scrollViewHeightY,
       scrollViewScrollOffsetY,
       scrollViewScrollEnabled,
@@ -48,6 +52,7 @@ export const ScrollViewContainer: React.FC<ScrollViewContainerProps> = ({
     }),
     [
       scrollViewContainerRef,
+      scrollViewPageY,
       scrollViewHeightY,
       scrollViewScrollOffsetY,
       scrollViewScrollEnabled,
@@ -56,11 +61,24 @@ export const ScrollViewContainer: React.FC<ScrollViewContainerProps> = ({
     ],
   );
 
-  const handleLayout = (e: LayoutChangeEvent) => {
-    scrollViewHeightY.value = e.nativeEvent.layout.height;
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      scrollViewHeightY.value = e.nativeEvent.layout.height;
 
-    onLayout?.(e);
-  };
+      // measuring pageY allows wrapping nested lists in other views
+      runOnUI(() => {
+        const measurement = measure(scrollViewContainerRef);
+        if (!measurement) {
+          return;
+        }
+
+        scrollViewPageY.value = measurement.pageY;
+      })();
+
+      onLayout?.(e);
+    },
+    [onLayout, scrollViewContainerRef, scrollViewHeightY, scrollViewPageY],
+  );
 
   return (
     <ScrollViewContainerContext.Provider value={contextValue}>

package/src/contexts/ScrollViewContainerContext.ts

@@ -6,6 +6,7 @@ import {SharedValue} from 'react-native-reanimated';
 
 interface ScrollViewContainerContextData {
   scrollViewContainerRef: React.RefObject<ScrollView>;
+  scrollViewPageY: SharedValue<number>;
   scrollViewHeightY: SharedValue<number>;
   scrollViewScrollOffsetY: SharedValue<number>;
   scrollViewScrollEnabled: SharedValue<boolean>;