Finish the new auto scroll implementation

Author: MatiPl01

example/app/src/examples/SortableGrid/features/AutoScrollExample.tsx

@@ -155,7 +155,6 @@ function ManyCards({ scrollableRef }: CardsSectionProps) {
       renderItem={({ item }) => <GridCard>{item}</GridCard>}
       rowGap={spacing.xs}
       scrollableRef={scrollableRef}
-      debug
     />
   );
 }
@@ -169,7 +168,6 @@ function FewCards({ scrollableRef }: CardsSectionProps) {
       renderItem={({ item }) => <GridCard>{item}</GridCard>}
       rowGap={spacing.xs}
       scrollableRef={scrollableRef}
-      debug
     />
   );
 }

packages/react-native-sortables/src/components/SortableFlex.tsx

@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
-import { useAnimatedStyle } from 'react-native-reanimated';
+import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
 
 import { DEFAULT_SORTABLE_FLEX_PROPS } from '../constants';
 import type { PropsWithDefaults } from '../hooks';
@@ -236,7 +236,7 @@ function SortableFlexComponent({
       {...rest}
       containerStyle={[baseContainerStyle, animatedContainerStyle]}
       itemStyle={styles.styleOverride}
-      onLayout={handleContainerMeasurement}
+      onLayout={runOnUI(handleContainerMeasurement)}
     />
   );
 }

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -2,7 +2,7 @@ import { useLayoutEffect, useMemo, useRef } from 'react';
 import type { DimensionValue } from 'react-native';
 import { StyleSheet } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
-import { useAnimatedStyle } from 'react-native-reanimated';
+import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
 
 import { DEFAULT_SORTABLE_GRID_PROPS, IS_WEB } from '../constants';
 import type { PropsWithDefaults } from '../hooks';
@@ -249,13 +249,12 @@ function SortableGridComponent<I>({
       {...rest}
       containerStyle={[styles.gridContainer, animatedInnerStyle]}
       itemStyle={itemStyle}
-      onLayout={(w, h) => {
-        'worklet';
+      onLayout={runOnUI((w, h) => {
         handleContainerMeasurement(
           w - (isVertical && !IS_WEB ? columnGap.value : 0),
           h
         );
-      }}
+      })}
     />
   );
 }

packages/react-native-sortables/src/components/shared/SortableContainer.tsx

@@ -2,19 +2,14 @@ import { memo, useSyncExternalStore } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
   LinearTransition,
-  runOnUI,
   useAnimatedStyle,
   withTiming
 } from 'react-native-reanimated';
 
 import { EMPTY_OBJECT, IS_WEB } from '../../constants';
 import { DebugOutlet } from '../../debug';
 import type { AnimatedStyleProp } from '../../integrations/reanimated';
-import {
-  useAutoScrollContext,
-  useCommonValuesContext,
-  useItemsContext
-} from '../../providers';
+import { useCommonValuesContext, useItemsContext } from '../../providers';
 import type {
   DimensionsAnimation,
   DropIndicatorSettings,
@@ -58,7 +53,6 @@ export default function SortableContainer({
     shouldAnimateLayout,
     usesAbsoluteLayout
   } = useCommonValuesContext();
-  const { onContainerLayout } = useAutoScrollContext() ?? {};
 
   const animateWorklet = dimensionsAnimationType === 'worklet';
   const animateLayout = dimensionsAnimationType === 'layout';
@@ -122,10 +116,7 @@ export default function SortableContainer({
         ref={containerRef}
         style={[containerStyle, innerContainerStyle]}
         onLayout={({ nativeEvent: { layout } }) =>
-          runOnUI(() => {
-            onContainerLayout?.();
-            onLayout(layout.width, layout.height);
-          })()
+          onLayout(layout.width, layout.height)
         }>
         <ItemsOutlet
           itemEntering={itemEntering}

packages/react-native-sortables/src/providers/shared/AutoScrollProvider/AutoScrollProvider.tsx

@@ -103,21 +103,12 @@ const { AutoScrollProvider, useAutoScrollContext } = createProvider(
 
     const prop = isVertical ? 'pageY' : 'pageX';
     const scrollContainerPosition =
-      scrollableMeasurements[prop] + scrollOffset.value;
+      scrollableMeasurements[prop] - scrollOffset.value;
     const sortableContainerPosition = containerMeasurements[prop];
 
-    console.log(containerMeasurements, scrollableMeasurements);
-
     return sortableContainerPosition - scrollContainerPosition;
   }, [containerRef, scrollableRef, scrollOffset, isVertical]);
 
-  const onContainerLayout = useCallback(() => {
-    'worklet';
-    if (context.value) {
-      context.value.sortableOffset = getSortableOffset() ?? 0;
-    }
-  }, [context, getSortableOffset]);
-
   return {
     children: (
       <>
@@ -140,7 +131,6 @@ const { AutoScrollProvider, useAutoScrollContext } = createProvider(
     value: {
       contentBounds,
       isVerticalScroll: isVertical,
-      onContainerLayout,
       scrollableRef,
       scrollBy,
       scrollOffsetDiff
@@ -175,8 +165,7 @@ function AutoScrollUpdater({
   scrollOffset,
   scrollToOffset
 }: AutoScrollUpdaterProps) {
-  const { activeAnimationProgress, containerRef, touchPosition } =
-    useCommonValuesContext();
+  const { activeAnimationProgress, touchPosition } = useCommonValuesContext();
 
   const scrollAxis = isVertical ? 'y' : 'x';
   const activationOffset = toPair(autoScrollActivationOffset);
@@ -207,41 +196,46 @@ function AutoScrollUpdater({
   const scrollBy = useCallback(
     (distance: number, animated: boolean) => {
       'worklet';
-      // const ctx = context.value;
-      // const bounds = contentAxisBounds.value;
-      // const containerMeasurements = measure(containerRef);
-      // const scrollableMeasurements = measure(scrollableRef);
-      // if (
-      //   !ctx ||
-      //   !bounds ||
-      //   !scrollableMeasurements ||
-      //   !containerMeasurements
-      // ) {
-      //   return;
-      // }
-
-      // const newContainerOffset = ctx.targetContainerOffset + distance;
-
-      // if (distance < 0) {
-      //   // Scroll up
-      // } else if (distance > 0) {
-      //   // Scroll down
-      // }
-
-      // console.log(ctx.targetContainerOffset, distance, newContainerOffset);
-
-      // ctx.targetContainerOffset = newContainerOffset;
-      // const offsetDiff = newContainerOffset - ctx.startContainerOffset;
-
-      // scrollToOffset(ctx.startScrollOffset + offsetDiff, animated);
+      const ctx = context.value;
+      const bounds = contentAxisBounds.value;
+      const scrollableMeasurements = measure(scrollableRef);
+      if (!ctx || !bounds || !scrollableMeasurements) {
+        return;
+      }
+
+      const scrollableSize =
+        scrollableMeasurements[isVertical ? 'height' : 'width'];
+
+      let newScrollOffset = 0;
+
+      if (distance > 0) {
+        // scroll down
+        newScrollOffset = Math.min(
+          ctx.targetScrollOffset + distance,
+          ctx.sortableOffset - scrollableSize + bounds[1] + maxOverscroll[1]
+        );
+      } else if (distance < 0) {
+        // scroll up
+        newScrollOffset = Math.max(
+          ctx.targetScrollOffset + distance,
+          ctx.sortableOffset + bounds[0] - maxOverscroll[0]
+        );
+      }
+
+      if (Math.abs(newScrollOffset - ctx.targetScrollOffset) < 1) {
+        return;
+      }
+
+      ctx.targetScrollOffset = newScrollOffset;
+      scrollToOffset(newScrollOffset, animated);
     },
     [
       context,
-      scrollableRef,
-      containerRef,
+      scrollToOffset,
       contentAxisBounds,
       maxOverscroll,
-      scrollToOffset
+      isVertical,
+      scrollableRef
     ]
   );
 
@@ -346,22 +340,22 @@ function AutoScrollUpdater({
         return;
       }
 
-      const containerPos = scrollOffset.value + ctx.sortableOffset;
+      const scrollableSize =
+        scrollableMeasurements[isVertical ? 'height' : 'width'];
+      const containerPos = ctx.sortableOffset - scrollOffset.value;
+
       ctx.progress = calculateRawProgress(
         position,
         containerPos,
-        scrollableMeasurements[isVertical ? 'pageY' : 'pageX'],
-        scrollableMeasurements[isVertical ? 'height' : 'width'],
+        scrollableSize,
         activationOffset,
         bounds,
         maxOverscroll,
         autoScrollExtrapolation
       );
 
-      // console.log(ctx.progress);
-
       if (debug) {
-        debug?.updateDebugRects?.(containerPos, scrollableMeasurements);
+        debug?.updateDebugRects?.(containerPos, scrollableSize);
       }
     },
     [debug]

packages/react-native-sortables/src/providers/shared/AutoScrollProvider/useDebugHelpers.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import type { MeasuredDimensions, SharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 import { useDebugContext } from '../../../debug';
 
@@ -37,10 +37,8 @@ export default function useDebugHelpers(
   }, [debugRects]);
 
   const updateDebugRects = useCallback(
-    (containerPos: number, scrollableMeasurements: MeasuredDimensions) => {
+    (containerPos: number, scrollableSize: number) => {
       'worklet';
-      const { height: sH, width: sW } = scrollableMeasurements;
-
       const startTriggerProps = isVertical
         ? {
             height: startActivationOffset,
@@ -55,12 +53,12 @@ export default function useDebugHelpers(
         ? {
             height: endActivationOffset,
             positionOrigin: 'bottom' as const,
-            y: -containerPos + sH
+            y: -containerPos + scrollableSize
           }
         : {
             positionOrigin: 'right' as const,
             width: endActivationOffset,
-            x: -containerPos + sW
+            x: -containerPos + scrollableSize
           };
 
       debugRects?.start.set({ ...TRIGGER_COLORS, ...startTriggerProps });

packages/react-native-sortables/src/providers/shared/AutoScrollProvider/utils.ts

@@ -5,7 +5,6 @@ import { Extrapolation, interpolate } from 'react-native-reanimated';
 export const calculateRawProgress = (
   position: number,
   containerPos: number,
-  scrollablePos: number,
   scrollableSize: number,
   activationOffset: [number, number],
   contentBounds: [number, number],
@@ -20,22 +19,20 @@ export const calculateRawProgress = (
     Extrapolation.CLAMP
   );
 
-  const contentEndPos = containerPos + contentBounds[1];
-  const endDistance = scrollablePos + scrollableSize - contentEndPos;
+  const contentSize = contentBounds[1] - contentBounds[0];
+  const endDistance = scrollableSize - contentSize - startDistance;
   const endBoundProgress = interpolate(
     endDistance,
     [-activationOffset[1], maxOverscroll[1]],
     [1, 0],
     Extrapolation.CLAMP
   );
 
-  const startBound = scrollablePos - containerPos;
+  const startBound = -containerPos;
   const startThreshold = startBound + activationOffset[0];
   const endBound = startBound + scrollableSize;
   const endThreshold = endBound - activationOffset[1];
 
-  console.log(position, [startBound, startThreshold, endThreshold, endBound]);
-
   return interpolate(
     position,
     [startBound, startThreshold, endThreshold, endBound],

packages/react-native-sortables/src/types/providers/shared.ts

@@ -116,7 +116,6 @@ export type AutoScrollContextType = {
   scrollOffsetDiff: SharedValue<number>;
   isVerticalScroll: boolean;
   contentBounds: SharedValue<[Vector, Vector] | null>;
-  onContainerLayout: () => void;
   scrollBy: (distance: number, animated: boolean) => void;
 };