attempt to fix occasional flicker on drag end

Author: computerjazz

src/components/CellRendererComponent.tsx

@@ -3,6 +3,7 @@ import {
   LayoutChangeEvent,
   MeasureLayoutOnSuccessCallback,
   StyleProp,
+  StyleSheet,
   ViewStyle,
 } from "react-native";
 import Animated, {
@@ -42,6 +43,7 @@ function CellRendererComponent<T>(props: Props<T>) {
   const key = keyExtractor(item, index);
   const offset = useSharedValue(-1);
   const size = useSharedValue(-1);
+  const heldTanslate = useSharedValue(0);
 
   const translate = useCellTranslate({
     cellOffset: offset,
@@ -52,14 +54,17 @@ function CellRendererComponent<T>(props: Props<T>) {
   const isActive = activeKey === key;
 
   const animStyle = useAnimatedStyle(() => {
+    // When activeKey becomes null at the end of a drag and the list reorders,
+    // the animated style may apply before the next paint, causing a flicker.
+    // Solution is to hold over the last animated value until the next onLayout.
+    if (translate.value) {
+      heldTanslate.value = translate.value;
+    }
+    const t = activeKey ? translate.value : heldTanslate.value;
     return {
-      transform: [
-        horizontalAnim.value
-          ? { translateX: translate.value }
-          : { translateY: translate.value },
-      ],
+      transform: [horizontalAnim.value ? { translateX: t } : { translateY: t }],
     };
-  }, [translate]);
+  }, [translate, activeKey]);
 
   const updateCellMeasurements = useStableCallback(() => {
     const onSuccess: MeasureLayoutOnSuccessCallback = (x, y, w, h) => {
@@ -91,6 +96,7 @@ function CellRendererComponent<T>(props: Props<T>) {
   });
 
   const onCellLayout = useStableCallback((e?: LayoutChangeEvent) => {
+    heldTanslate.value = 0;
     updateCellMeasurements();
     if (onLayout && e) onLayout(e);
   });
@@ -112,15 +118,16 @@ function CellRendererComponent<T>(props: Props<T>) {
     };
   }, [isActive, horizontal]);
 
-  // changing zIndex may crash android, but seems to work ok as of RN 68:
-  // https://github.com/facebook/react-native/issues/28751
-
   return (
     <Animated.View
       {...rest}
       ref={viewRef}
       onLayout={onCellLayout}
-      style={[props.style, baseStyle, animStyle]}
+      style={[
+        props.style,
+        baseStyle,
+        activeKey ? animStyle : styles.zeroTranslate,
+      ]}
       pointerEvents={activeKey ? "none" : "auto"}
     >
       <CellProvider isActive={isActive}>{children}</CellProvider>
@@ -129,3 +136,9 @@ function CellRendererComponent<T>(props: Props<T>) {
 }
 
 export default typedMemo(CellRendererComponent);
+
+const styles = StyleSheet.create({
+  zeroTranslate: {
+    transform: [{ translateX: 0 }, { translateY: 0 }],
+  },
+});

src/components/DraggableFlatList.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ListRenderItem, FlatListProps, LayoutChangeEvent } from "react-native";
 import {
   FlatList,
@@ -72,13 +78,22 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     disabled,
   } = useAnimatedValues();
 
+  const reset = useStableCallback(() => {
+    activeIndexAnim.value = -1;
+    spacerIndexAnim.value = -1;
+    touchTranslate.value = 0;
+    activeCellSize.value = -1;
+    activeCellOffset.value = -1;
+    setActiveKey(null);
+  });
+
   const {
     dragHitSlop = DEFAULT_PROPS.dragHitSlop,
     scrollEnabled = DEFAULT_PROPS.scrollEnabled,
     activationDistance: activationDistanceProp = DEFAULT_PROPS.activationDistance,
   } = props;
 
-  const [activeKey, setActiveKey] = useState<string | null>(null);
+  let [activeKey, setActiveKey] = useState<string | null>(null);
 
   const keyExtractor = useStableCallback((item: T, index: number) => {
     if (!props.keyExtractor) {
@@ -87,6 +102,16 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     return props.keyExtractor(item, index);
   });
 
+  const dataRef = useRef(props.data);
+  const dataHasChanged =
+    dataRef.current.map(keyExtractor).join("") !==
+    props.data.map(keyExtractor).join("");
+  dataRef.current = props.data;
+  if (dataHasChanged) {
+    // When data changes make sure `activeKey` is nulled out in the same render pass
+    activeKey = null;
+  }
+
   useLayoutEffect(() => {
     props.data.forEach((d, i) => {
       const key = keyExtractor(d, i);
@@ -178,19 +203,8 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
         newData.splice(to, 0, data[from]);
       }
 
-      const reset = () => {
-        activeIndexAnim.value = -1;
-        spacerIndexAnim.value = -1;
-        touchTranslate.value = 0;
-        activeCellSize.value = -1;
-        activeCellOffset.value = -1;
-        setActiveKey(null);
-      };
-
-      if (isWeb) reset();
-      else setTimeout(reset);
-
       onDragEnd?.({ from, to, data: newData });
+      reset();
     }
   );
 

src/hooks/useCellTranslate.tsx

@@ -85,9 +85,6 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
       placeholderOffset.value = newPlaceholderOffset;
     }
 
-    // If no active cell, translation is already 0
-    if (activeIndexAnim.value < 0) return 0;
-
     // Active cell follows touch
     if (isActiveCell) {
       return hoverAnim.value;