fix flicker, simplify

Author: computerjazz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-draggable-flatlist",
-  "version": "4.0.0-beta.5",
+  "version": "4.0.0-beta.7",
   "description": "A drag-and-drop-enabled FlatList component for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/CellRendererComponent.tsx

@@ -29,17 +29,6 @@ type Props<T> = {
 function CellRendererComponent<T>(props: Props<T>) {
   const { item, index, onLayout, children, ...rest } = props;
 
-  const currentIndexAnim = useSharedValue(index);
-
-  useEffect(() => {
-    // If we set the index immediately the newly-ordered data can get out of sync
-    // with the activeIndexAnim, and cause the wrong item to momentarily become the
-    // "active item", which causes a flicker.
-    requestAnimationFrame(() => {
-      currentIndexAnim.value = index;
-    });
-  }, [index]);
-
   const viewRef = useRef<Animated.View>(null);
   const { cellDataRef, propsRef, containerRef } = useRefs<T>();
 
@@ -57,26 +46,20 @@ function CellRendererComponent<T>(props: Props<T>) {
   const translate = useCellTranslate({
     cellOffset: offset,
     cellSize: size,
-    cellIndex: currentIndexAnim,
+    cellIndex: index,
   });
 
-  const indexRef = useRef(index);
-  const indexHasChanged = index !== indexRef.current;
-  indexRef.current = index;
-
-  const dragInProgress = !!activeKey && !indexHasChanged;
-  const isActive = dragInProgress && activeKey === key;
+  const isActive = activeKey === key;
 
   const animStyle = useAnimatedStyle(() => {
-    const _translate = dragInProgress ? translate.value : 0;
     return {
       transform: [
         horizontalAnim.value
-          ? { translateX: _translate }
-          : { translateY: _translate },
+          ? { translateX: translate.value }
+          : { translateY: translate.value },
       ],
     };
-  }, [dragInProgress, translate]);
+  }, [translate]);
 
   const updateCellMeasurements = useStableCallback(() => {
     const onSuccess: MeasureLayoutOnSuccessCallback = (x, y, w, h) => {
@@ -107,19 +90,19 @@ function CellRendererComponent<T>(props: Props<T>) {
     }
   });
 
+  const onCellLayout = useStableCallback((e?: LayoutChangeEvent) => {
+    updateCellMeasurements();
+    if (onLayout && e) onLayout(e);
+  });
+
   useEffect(() => {
     if (isWeb) {
       // onLayout isn't called on web when the cell index changes, so we manually re-measure
       requestAnimationFrame(() => {
-        updateCellMeasurements();
+        onCellLayout();
       });
     }
-  }, [index, updateCellMeasurements]);
-
-  const onCellLayout = useStableCallback((e: LayoutChangeEvent) => {
-    updateCellMeasurements();
-    if (onLayout) onLayout(e);
-  });
+  }, [index, onCellLayout]);
 
   const baseStyle = useMemo(() => {
     return {
@@ -137,11 +120,7 @@ function CellRendererComponent<T>(props: Props<T>) {
       {...rest}
       ref={viewRef}
       onLayout={onCellLayout}
-      style={[
-        props.style,
-        baseStyle,
-        dragInProgress ? animStyle : { transform: [] },
-      ]}
+      style={[props.style, baseStyle, animStyle]}
       pointerEvents={activeKey ? "none" : "auto"}
     >
       <CellProvider isActive={isActive}>{children}</CellProvider>

src/components/DraggableFlatList.tsx

@@ -13,7 +13,7 @@ import Animated, {
   withSpring,
 } from "react-native-reanimated";
 import CellRendererComponent from "./CellRendererComponent";
-import { DEFAULT_PROPS, isWeb } from "../constants";
+import { DEFAULT_PROPS } from "../constants";
 import PlaceholderItem from "./PlaceholderItem";
 import RowItem from "./RowItem";
 import { DraggableFlatListProps } from "../types";
@@ -87,17 +87,6 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     });
   }, [props.data, keyExtractor, keyToIndexRef]);
 
-  // Reset hover state whenever data changes
-  useMemo(() => {
-    requestAnimationFrame(() => {
-      activeIndexAnim.value = -1;
-      spacerIndexAnim.value = -1;
-      touchTranslate.value = 0;
-      activeCellSize.value = -1;
-      activeCellOffset.value = -1;
-    });
-  }, [props.data]);
-
   const drag = useStableCallback((activeKey: string) => {
     if (disabled.value) return;
     const index = keyToIndexRef.current.get(activeKey);
@@ -181,15 +170,15 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
           newData.splice(from, 1);
           newData.splice(to, 0, data[from]);
         }
-        onDragEnd({ from, to, data: newData });
-        if (isWeb) {
-          // prevent flicker
+        setTimeout(() => {
+          activeIndexAnim.value = -1;
+          spacerIndexAnim.value = -1;
+          touchTranslate.value = 0;
+          activeCellSize.value = -1;
+          activeCellOffset.value = -1;
           setActiveKey(null);
-        } else {
-          requestAnimationFrame(() => {
-            setActiveKey(null);
-          });
-        }
+        });
+        onDragEnd({ from, to, data: newData });
       }
     }
   );
@@ -266,7 +255,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
       runOnJS(onContainerTouchEnd)();
     });
 
-  if (props.hitSlop) panGesture.hitSlop(props.hitSlop);
+  if (dragHitSlop) panGesture.hitSlop(dragHitSlop);
   if (activationDistanceProp) {
     const activeOffset = [-activationDistanceProp, activationDistanceProp];
     if (props.horizontal) {

src/hooks/useCellTranslate.tsx

@@ -4,7 +4,7 @@ import { useDraggableFlatListContext } from "../context/draggableFlatListContext
 import { useRefs } from "../context/refContext";
 
 type Params = {
-  cellIndex: Animated.SharedValue<number>;
+  cellIndex: number;
   cellSize: Animated.SharedValue<number>;
   cellOffset: Animated.SharedValue<number>;
 };
@@ -19,16 +19,16 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
     hoverAnim,
   } = useAnimatedValues();
 
-  const { activeKey } = useDraggableFlatListContext()
+  const { activeKey } = useDraggableFlatListContext();
 
   const { animationConfigRef } = useRefs();
 
   const translate = useDerivedValue(() => {
-    if (!activeKey || activeIndexAnim.value < 0) return 0
+    if (!activeKey || activeIndexAnim.value < 0) return 0;
 
     // Determining spacer index is hard to visualize. See diagram: https://i.imgur.com/jRPf5t3.jpg
-    const isBeforeActive = cellIndex.value < activeIndexAnim.value;
-    const isAfterActive = cellIndex.value > activeIndexAnim.value;
+    const isBeforeActive = cellIndex < activeIndexAnim.value;
+    const isAfterActive = cellIndex > activeIndexAnim.value;
 
     const hoverPlusActiveSize = hoverOffset.value + activeCellSize.value;
     const offsetPlusHalfSize = cellOffset.value + cellSize.value / 2;
@@ -41,35 +41,35 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
         hoverPlusActiveSize < offsetPlusHalfSize
       ) {
         // bottom edge of active cell overlaps top half of current cell
-        result = cellIndex.value - 1;
+        result = cellIndex - 1;
       } else if (
         hoverPlusActiveSize >= offsetPlusHalfSize &&
         hoverPlusActiveSize < offsetPlusSize
       ) {
         // bottom edge of active cell overlaps bottom half of current cell
-        result = cellIndex.value;
+        result = cellIndex;
       }
     } else if (isBeforeActive) {
       if (
         hoverOffset.value < offsetPlusSize &&
         hoverOffset.value >= offsetPlusHalfSize
       ) {
         // top edge of active cell overlaps bottom half of current cell
-        result = cellIndex.value + 1;
+        result = cellIndex + 1;
       } else if (
         hoverOffset.value >= cellOffset.value &&
         hoverOffset.value < offsetPlusHalfSize
       ) {
         // top edge of active cell overlaps top half of current cell
-        result = cellIndex.value;
+        result = cellIndex;
       }
     }
 
     if (result !== -1 && result !== spacerIndexAnim.value) {
       spacerIndexAnim.value = result;
     }
 
-    if (spacerIndexAnim.value === cellIndex.value) {
+    if (spacerIndexAnim.value === cellIndex) {
       const newPlaceholderOffset = isAfterActive
         ? cellSize.value + (cellOffset.value - activeCellSize.value)
         : cellOffset.value;
@@ -80,16 +80,16 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
     if (activeIndexAnim.value < 0) return 0;
 
     // Active cell follows touch
-    if (cellIndex.value === activeIndexAnim.value) {
-      return hoverAnim.value
-    };
+    if (cellIndex === activeIndexAnim.value) {
+      return hoverAnim.value;
+    }
 
     // Translate cell down if it is before active index and active cell has passed it.
     // Translate cell up if it is after the active index and active cell has passed it.
 
     const shouldTranslate = isAfterActive
-      ? cellIndex.value <= spacerIndexAnim.value
-      : cellIndex.value >= spacerIndexAnim.value;
+      ? cellIndex <= spacerIndexAnim.value
+      : cellIndex >= spacerIndexAnim.value;
 
     const translationAmt = shouldTranslate
       ? activeCellSize.value * (isAfterActive ? -1 : 1)
@@ -98,6 +98,5 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
     return withSpring(translationAmt, animationConfigRef.current);
   }, [activeKey]);
 
-
   return translate;
 }