Fix race condition causing items to disappear after drag direction reversal

src/components/CellRendererComponent.tsx

@@ -55,6 +55,15 @@ function CellRendererComponent<T>(props: Props<T>) {
 
   const isActive = activeKey === key;
 
+  // Reset held translate when drag ends, in case onCellLayout doesn't fire
+  // (e.g. when FlatList doesn't detect a geometry change for the cell).
+  // By this point the spring animation has already completed.
+  useEffect(() => {
+    if (!activeKey) {
+      heldTanslate.value = 0;
+    }
+  }, [activeKey]);
+
   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.

src/components/DraggableFlatList.tsx

@@ -116,9 +116,10 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     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;
+  if (dataHasChanged && !activeKey) {
+    // When data changes (and no drag is active) reset animated values.
+    // Guard against activeKey to prevent reset() from racing with the
+    // spring animation callback during an active drag.
     InteractionManager.runAfterInteractions(() => {
       reset();
     });

src/hooks/useCellTranslate.tsx

@@ -13,6 +13,7 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
   const {
     activeIndexAnim,
     activeCellSize,
+    activeCellOffset,
     hoverOffset,
     spacerIndexAnim,
     placeholderOffset,
@@ -75,7 +76,22 @@ export function useCellTranslate({ cellIndex, cellSize, cellOffset }: Params) {
     }
 
     if (result !== -1 && result !== spacerIndexAnim.value) {
-      spacerIndexAnim.value = result;
+      // Direction-aware guard: during a drag reversal, both a before-active
+      // and after-active cell can match overlap conditions in the same frame.
+      // Only allow the write if the result is on the correct side relative
+      // to the hover direction, preventing the "wrong side" cell from winning.
+      const isHoverBelowOrigin = hoverOffset.value >= activeCellOffset.value;
+      const resultIsAfterActive = result > activeIndexAnim.value;
+      const resultIsBeforeActive = result < activeIndexAnim.value;
+      const resultIsAtActive = result === activeIndexAnim.value;
+
+      const directionMatch =
+        (isHoverBelowOrigin && (resultIsAfterActive || resultIsAtActive)) ||
+        (!isHoverBelowOrigin && (resultIsBeforeActive || resultIsAtActive));
+
+      if (spacerIndexAnim.value < 0 || directionMatch) {
+        spacerIndexAnim.value = result;
+      }
     }
 
     if (spacerIndexAnim.value === cellIndex) {