Merge pull request #202 from hsource/harry-fix-autoscroll

Fixed autoscroll being stuck when already scrolled to top/bottom

Author: computerjazz

package.json

@@ -47,7 +47,7 @@
     "react": "^16.12.0",
     "react-native": "^0.61.5",
     "react-native-gesture-handler": "^1.5.3",
-    "react-native-reanimated": "^1.7.0",
+    "react-native-reanimated": "^1.9.0",
     "typescript": "^3.7.3"
   }
 }

src/index.tsx

@@ -226,6 +226,7 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
 
   keyToIndex = new Map<string, number>();
 
+  /** Whether we've sent an incomplete call to the FlatList to do a scroll */
   isAutoscrolling = {
     native: new Value<number>(0),
     js: false
@@ -611,23 +612,49 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
     return targetOffset;
   };
 
-  autoscroll = async ([
-    distFromTop,
-    distFromBottom,
-    scrollOffset,
-    isScrolledUp,
-    isScrolledDown
-  ]: readonly number[]) => {
-    const targetOffset = this.getScrollTargetOffset(
-      distFromTop,
-      distFromBottom,
-      scrollOffset,
-      !!isScrolledUp,
-      !!isScrolledDown
-    );
-    if (targetOffset >= 0 && this.isPressedIn.js) {
-      const nextScrollParams = await this.scrollToAsync(targetOffset);
-      this.autoscroll(nextScrollParams);
+  /** Ensure that only 1 call to autoscroll is active at a time */
+  autoscrollLooping = false;
+  autoscroll = async (params: readonly number[]) => {
+    if (this.autoscrollLooping) {
+      return;
+    }
+    this.autoscrollLooping = true;
+    try {
+      let shouldScroll = true;
+      let curParams = params;
+      while (shouldScroll) {
+        const [
+          distFromTop,
+          distFromBottom,
+          scrollOffset,
+          isScrolledUp,
+          isScrolledDown
+        ] = curParams;
+        const targetOffset = this.getScrollTargetOffset(
+          distFromTop,
+          distFromBottom,
+          scrollOffset,
+          !!isScrolledUp,
+          !!isScrolledDown
+        );
+        const scrollingUpAtTop = !!(
+          isScrolledUp && targetOffset <= scrollOffset
+        );
+        const scrollingDownAtBottom = !!(
+          isScrolledDown && targetOffset >= scrollOffset
+        );
+        shouldScroll =
+          targetOffset >= 0 &&
+          this.isPressedIn.js &&
+          !scrollingUpAtTop &&
+          !scrollingDownAtBottom;
+
+        if (shouldScroll) {
+          curParams = await this.scrollToAsync(targetOffset);
+        }
+      }
+    } finally {
+      this.autoscrollLooping = false;
     }
   };
 
@@ -669,17 +696,26 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
             and(
               this.isAutoscrolling.native,
               or(
+                // We've scrolled to where we want to be
                 lessOrEq(
                   abs(sub(this.targetScrollOffset, this.scrollOffset)),
                   scrollPositionTolerance
                 ),
-                this.isScrolledUp,
-                this.isScrolledDown
+                // We're at the start, but still want to scroll farther up
+                and(
+                  this.isScrolledUp,
+                  lessOrEq(this.targetScrollOffset, this.scrollOffset)
+                ),
+                // We're at the end, but still want to scroll further down
+                and(
+                  this.isScrolledDown,
+                  greaterOrEq(this.targetScrollOffset, this.scrollOffset)
+                )
               )
             ),
             [
+              // Finish scrolling
               set(this.isAutoscrolling.native, 0),
-              this.checkAutoscroll,
               call(this.autoscrollParams, this.onAutoscrollComplete)
             ]
           )
@@ -779,7 +815,10 @@ class DraggableFlatList<T> extends React.Component<Props<T>, State> {
                 [`translate${horizontal ? "X" : "Y"}`]: this
                   .hoverComponentTranslate
               }
-            ]
+              // We need the cast because the transform array usually accepts
+              // only specific keys, and we dynamically generate the key
+              // above
+            ] as Animated.AnimatedTransform
           }
         ]}
       >

src/procs.tsx

@@ -1,5 +1,4 @@
 import Animated from "react-native-reanimated";
-import { State as GestureState } from "react-native-gesture-handler";
 
 let {
   or,
@@ -68,9 +67,16 @@ export const hardReset = proc(
     block([set(position, 0), set(finished, 0), set(time, 0), set(toValue, 0)])
 );
 
-export const setupCell = proc(
+/**
+ * The in react-native-reanimated.d.ts definition of `proc` only has generics
+ * for up to 10 arguments. We cast it to accept any params to avoid errors when
+ * type-checking.
+ */
+type RetypedProc = (cb: (...params: any) => Animated.Node<number>) => typeof cb;
+
+export const setupCell = (proc as RetypedProc)(
   (
-    currentIndex: Animated.Node<number>,
+    currentIndex: Animated.Value<number>,
     initialized: Animated.Value<number>,
     size: Animated.Node<number>,
     offset: Animated.Node<number>,
@@ -207,7 +213,7 @@ export const setupCell = proc(
     ])
 );
 
-const betterSpring = proc(
+const betterSpring = (proc as RetypedProc)(
   (
     finished: Animated.Value<number>,
     velocity: Animated.Value<number>,

yarn.lock

@@ -3740,10 +3740,12 @@ react-native-gesture-handler@^1.5.3:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-reanimated@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.7.0.tgz#896db2576552ac59d288a1f6c7f00afc171f240c"
-  integrity sha512-FQWSqP605eQVJumuK2HpR+7heF0ZI+qfy4jNguv3Xv8nPFHeIgZaRTXHCEQL2AcuSIj50zy8jGJf5l134QMQWQ==
+react-native-reanimated@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz#38676c99dd585504fdc7331efb45e5f48ec7339a"
+  integrity sha512-Aj+spgIHRiVv7ezGADxnSH1EoKrQRD2+XaSiGY0MiB/pvRNNrZPSJ+3NVpvLwWf9lZMOP7dwqqyJIzoZgBDt8w==
+  dependencies:
+    fbjs "^1.0.0"
 
 react-native@^0.61.5:
   version "0.61.5"