fix: Auto scroll not working when item is not dragged (#56)

## Description

This PR fixes the issue with impossibility to auto scroll the scrollable
container when the active item is not dragged (but its position exceeds
the auto scroll threshold).

Author: MatiPl01

packages/react-native-sortable/src/components/shared/DraggableView.tsx

@@ -204,18 +204,25 @@ export default function DraggableView({
   });
 
   return (
-    <Animated.View
-      {...viewProps}
-      style={[styles.decoration, style, animatedStyle, animatedDecorationStyle]}
-      onLayout={({
-        nativeEvent: {
-          layout: { height, width }
-        }
-      }: LayoutChangeEvent) => {
-        measureItem(key, { height, width });
-      }}>
-      <GestureDetector gesture={panGesture}>{children}</GestureDetector>
-    </Animated.View>
+    <GestureDetector gesture={panGesture}>
+      <Animated.View
+        {...viewProps}
+        style={[
+          styles.decoration,
+          style,
+          animatedStyle,
+          animatedDecorationStyle
+        ]}
+        onLayout={({
+          nativeEvent: {
+            layout: { height, width }
+          }
+        }: LayoutChangeEvent) => {
+          measureItem(key, { height, width });
+        }}>
+        {children}
+      </Animated.View>
+    </GestureDetector>
   );
 }
 

packages/react-native-sortable/src/constants/props.ts

@@ -8,7 +8,7 @@ export const SHARED_PROPS: RequiredExcept<SharedProps, 'scrollableRef'> = {
   activeItemShadowOpacity: 0.2,
   autoScrollActivationOffset: 40,
   autoScrollEnabled: true,
-  autoScrollSpeed: 0.5,
+  autoScrollSpeed: 1,
   dragEnabled: true,
   inactiveItemOpacity: 0.5,
   inactiveItemScale: 1,

packages/react-native-sortable/src/contexts/shared/AutoScrollProvider.tsx

@@ -3,15 +3,18 @@ import { View } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import {
   measure,
+  runOnJS,
   scrollTo,
   useAnimatedReaction,
   useAnimatedRef,
   useDerivedValue,
+  useFrameCallback,
   useScrollViewOffset,
   useSharedValue
 } from 'react-native-reanimated';
 
-import { useAnimatableValue, useSmoothValueChange } from '../../hooks';
+import { OFFSET_EPS } from '../../constants';
+import { useAnimatableValue } from '../../hooks';
 import type { AutoScrollSettings } from '../../types';
 import { createEnhancedContext } from '../utils';
 import { useDragContext } from './DragProvider';
@@ -40,8 +43,8 @@ const { AutoScrollProvider, useAutoScrollContext } = createEnhancedContext(
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   const scrollOffset = useScrollViewOffset(scrollableRef);
-  const targetScrollOffset = useSharedValue(0);
-  const dragStartScrollOffset = useAnimatableValue(0);
+  const targetScrollOffset = useSharedValue(-1);
+  const dragStartScrollOffset = useAnimatableValue(-1);
   const containerRef = useAnimatedRef<View>();
 
   const activeItemHeight = useDerivedValue(() => {
@@ -60,10 +63,37 @@ const { AutoScrollProvider, useAutoScrollContext } = createEnhancedContext(
   const enabled = useAnimatableValue(autoScrollEnabled);
   const speed = useAnimatableValue(autoScrollSpeed);
 
-  const currentScrollToValue = useSmoothValueChange(
-    dragStartScrollOffset,
-    targetScrollOffset,
-    speed
+  // SMOOTH SCROLL POSITION UPDATER
+  // Updates the scroll position smoothly
+  // (quickly at first, then slower if the remaining distance is small)
+  const frameCallback = useFrameCallback(() => {
+    const currentOffset = scrollOffset.value;
+    const targetOffset = targetScrollOffset.value;
+    const diff = targetOffset - currentOffset;
+
+    if (Math.abs(diff) < OFFSET_EPS || targetOffset === -1) {
+      targetScrollOffset.value = -1;
+      return;
+    }
+
+    const direction = diff > 0 ? 1 : -1;
+    const step = speed.value * direction * Math.sqrt(Math.abs(diff));
+    const nextOffset = currentOffset + step;
+
+    scrollTo(scrollableRef, 0, nextOffset, false);
+  });
+
+  const toggleFrameCallback = useCallback(
+    (isEnabled: boolean) => frameCallback.setActive(isEnabled),
+    [frameCallback]
+  );
+
+  // Enable/disable frame callback based on the auto scroll state
+  useAnimatedReaction(
+    () => enabled.value,
+    isEnabled => {
+      runOnJS(toggleFrameCallback)(isEnabled);
+    }
   );
 
   // AUTO SCROLL HANDLER
@@ -123,13 +153,6 @@ const { AutoScrollProvider, useAutoScrollContext } = createEnhancedContext(
     }
   );
 
-  useAnimatedReaction(
-    () => currentScrollToValue.value,
-    value => {
-      scrollTo(scrollableRef, 0, value, false);
-    }
-  );
-
   const updateStartScrollOffset = useCallback(() => {
     'worklet';
     dragStartScrollOffset.value = scrollOffset.value;

packages/react-native-sortable/src/hooks/reanimated.ts

@@ -4,12 +4,9 @@
 import {
   isSharedValue,
   type SharedValue,
-  useAnimatedReaction,
-  useDerivedValue,
-  useSharedValue
+  useDerivedValue
 } from 'react-native-reanimated';
 
-import { OFFSET_EPS } from '../constants';
 import type { Animatable } from '../types';
 
 export function useAnimatableValue<V>(value: Animatable<V>): SharedValue<V>;
@@ -28,45 +25,3 @@ export function useAnimatableValue<V, F extends (value: V) => any>(
     return modify ? modify(inputValue) : inputValue;
   }, [value, modify]);
 }
-
-export function useSmoothValueChange(
-  initialValue: SharedValue<number>,
-  target: SharedValue<number>,
-  speed: SharedValue<number>
-): SharedValue<number> {
-  'worklet';
-  const currentValue = useSharedValue(initialValue.value);
-  const remainingDifference = useSharedValue(0);
-
-  useAnimatedReaction(
-    () => initialValue.value,
-    value => {
-      currentValue.value = value;
-    },
-    [initialValue]
-  );
-
-  useAnimatedReaction(
-    () => ({
-      mul: speed.value,
-      remaining: remainingDifference.value,
-      to: target.value
-    }),
-    ({ mul, to }) => {
-      const difference = to - currentValue.value;
-      const direction = Math.sign(difference);
-      const step = direction * Math.sqrt(Math.abs(difference)) * mul;
-
-      if (Math.abs(difference) > OFFSET_EPS) {
-        currentValue.value = currentValue.value + step;
-      } else {
-        currentValue.value = to;
-      }
-
-      remainingDifference.value = difference - step;
-    },
-    [target]
-  );
-
-  return currentValue;
-}