Drag positions are inaccurate after adding items to middle of list

[brimby]

Description

If I add items to the middle of my list, afterward any item below/after the added items that I try to drag UP ABOVE the new item(s) has misaligned drag breaks between items. Currently my fix is to give a key to the list that is based on the data.length, but it looks kind of bad when the list remounts because of the key change so it would be nice to have this fixed in the library if possible.

Steps to reproduce

1. Use reproducible example provided
2. Hit "Add to middle" button (tip: hitting it 3 or so times to add several to the middle actually helps make the problem clearer)
3. Drag an item that's UNDER the new items UPWARD. Look for the "New" tag on the items to know which ones you should be looking underneath for drag candidates.
4. The drag positions that cause item shifts should be wrong. It usually gets more noticeable the more new items are added and the higher you try to drag (usually dragging it into the top position becomes impossible).
5. You might have to try a couple times with different numbers of items, because sometimes the wrongness can be slight and/or masked depending on how the exact heights line up. So if you don't see anything, hit the reset button and try again with a different number of new items perhaps. Note that after dragEnded the list won't have problems anymore until you add more new items again.

Minimal reproducible example

import React from 'react'
import { View, StyleSheet, Pressable, Text } from 'react-native'
import { ScrollViewContainer, NestedReorderableList, useReorderableDrag, reorderItems } from 'react-native-reorderable-list'

// Default items with varying heights (in px)
const INITIAL_ITEMS = [
  { key: 'a', label: 'Short', height: 30 },
  { key: 'b', label: 'Medium', height: 50 },
  { key: 'c', label: 'Tall', height: 100 },
  { key: 'd', label: 'Short', height: 30 },
  { key: 'e', label: 'Medium-tall', height: 70 },
]

const TestItem = React.memo(({ item }) => {
  const dragHandler = useReorderableDrag()
  return (
    <View
      style={[styles.item, { height: item.height }]}
    >
      <Text>{item.label} ({item.height}px)</Text>
      <Pressable onPressIn={dragHandler} delayLongPress={0} style={styles.dragHandle}>
        <Text style={styles.dragHandleText}>⋮⋮</Text>
      </Pressable>
    </View>
  )
})

let idCounter = 0
function nextKey() {
  return 'item-' + ++idCounter + '-' + Date.now()
}

export default function ReorderableListTestPage() {
  const [items, setItems] = React.useState(INITIAL_ITEMS)

  const addToMiddle = () => {
    const mid = Math.floor(items.length / 2)
    const newItem = {
      key: nextKey(),
      label: `New #${items.length + 1}`,
      height: 50 + (items.length % 3) * 15, // 50, 65, or 80
    }
    setItems((prev) => {
      const next = [...prev]
      next.splice(mid, 0, newItem)
      return next
    })
  }

  const handleReorder = ({ from, to }) => {
    setItems((prev) => reorderItems(prev, from, to))
  }

  const renderItem = ({ item }) => <TestItem item={item} />

  return (

      <View style={{ flex: 1 }}>
        <View style={styles.header}>
          <Text style={styles.title}>Reorderable List Test</Text>
          <View style={styles.buttonContainer}>
            <Pressable onPress={addToMiddle} style={styles.button}><Text style={styles.buttonText}>Add to middle</Text></Pressable>
            <Pressable onPress={() => setItems(INITIAL_ITEMS)} style={styles.button}><Text style={styles.buttonText}>Reset list</Text></Pressable>
          </View>
        </View>
        <Text style={styles.hint}>
          Drag items to reorder. After adding items to the middle, check if drag
          drop targets align correctly.
        </Text>
        <View style={{ flex: 1 }}>
          <ScrollViewContainer style={{ flex: 1 }}>
            <NestedReorderableList
              data={items}
              onReorder={handleReorder}
              keyExtractor={({ key }) => key}
              renderItem={renderItem}
              scrollEnabled={false}
              contentContainerStyle={styles.listContent}
            />
          </ScrollViewContainer>
        </View>
      </View>

  )
}

const styles = StyleSheet.create({
  header: {
    padding: 12,
    gap: 8,
    alignItems: 'center',
    flexShrink: 1
  },
  buttonContainer: {
    flexDirection: 'row',
    gap: 8,
  },
  button: {
    padding: 8,
    backgroundColor: '#cde8ff',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#4b4b4b',
  },
  buttonText: {
    fontSize: 14,
    color: '#333',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  hint: {
    paddingHorizontal: 12,
    paddingBottom: 8,
    fontSize: 12,
    color: '#666',
  },
  listContent: {
    paddingBottom: 40,
  },
  item: {
    backgroundColor: '#f5f5f5',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    paddingHorizontal: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  dragHandle: {
    padding: 8,
  },
  dragHandleText: {
    fontSize: 15,
    color: '#666',
    letterSpacing: -2,
  },
})

Relevant logs

No response

Reorderable List version

16.0

React Native version

81.5

Project type

Expo

Architecture

Fabric (New Architecture)

Reanimated version

4.1.1

Gesture Handler version

2.28.0

Affected platforms

Android

[brimby]

I imagine it has something to do with how items being removed is handled here, but not items being added (ReorderableListCore):

  useEffect(() => {
    itemCount.value = data.length;

    // This could be done unmount of the removed cell, however it leads to bugs.
    // Surprisingly the unmount gets sometimes called after the onLayout event
    // setting all layout data to 0 and breaking the list. So we solve it like this.
    if (data.length < prevItemCount.current) {
      for (let i = data.length; i < prevItemCount.current; i++) {
        runOnUI(() => {
          itemHeight.value[i] = 0;
          itemOffset.value[i] = 0;
        })();
      }
    }

    prevItemCount.current = data.length;
  }, [data.length, itemHeight, itemOffset, itemCount]);

My guess is in your testing you were mostly only adding items to the end of the list, which would obscure the problem. You can really only see the issues if you add to the middle of the list. I tried adding an else if clause to this (else if (data.length > prevItemCount.current)) where it zeros out the heights, and I was getting my breakpoint to hit in that block, but for some reason I didn't see an improvement in the problem. Is itemHeight not up to date with the added items yet at this point?

[omahili]

Hi @brimby, thanks for the detailed issue.
I tried but I still need to reproduce the issue. If there's a bug it might be the layout data not being read/updated correctly. I need to do some more debugging to figure it out and I'll let you know.

[brimby]

I'll try to come up with better reproducible code soon. I think it actually happens with deleting items from the middle of the list too. But the items have to be very different heights for the problem to be obvious.

[brimby]

@omahili Ok I'm finally coming back to this.

You're right, my example doesn't show the problem. I'm scratching my head, because I swore I saw the problem happen on it previously, but I can't get it to happen now.

Unfortunately, I still have the issue on my app. But I have a lot of very complex tools that operate on my list. Things that changes multiple rows' heights at a time, combine rows, phantom rows, all kinds of wacky shit. So although I haven't figured out exactly what causes the stale drag threshold data, I did find a fix for it.

This is my patch. I basically allow my own layout to be provided into the list when my app knows that something as changed, rather than relying on the base onLayout to trigger. Because something about some of my changes seem to fly under the radar for onLayout:

index 2d4a346..caeeb65 100644
--- a/node_modules/react-native-reorderable-list/src/components/ReorderableListCore.tsx
+++ b/node_modules/react-native-reorderable-list/src/components/ReorderableListCore.tsx
@@ -1,4 +1,11 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   CellRendererProps,
   FlatList,
@@ -179,6 +186,25 @@ const ReorderableListCore = <T,>(
     prevItemCount.current = data.length;
   }, [data.length, itemHeight, itemOffset, itemCount]);
 
+  useLayoutEffect(() => {
+    if (!rest.getItemLayout) {
+      return;
+    }
+
+    const layouts = data.map((_, index) =>
+      rest.getItemLayout?.(data, index),
+    );
+    const nextOffsets = layouts.map(layout => layout?.offset ?? 0);
+    const nextHeights = layouts.map(layout => layout?.length ?? 0);
+
+    runOnUI((offsets: number[], heights: number[]) => {
+      'worklet';
+
+      itemOffset.value = offsets;
+      itemHeight.value = heights;
+    })(nextOffsets, nextHeights);
+  }, [data, rest.getItemLayout, itemHeight, itemOffset]);
+
   useEffect(() => {
     if (
       !markedCellsRef.current ||

I'm not going to push for you to bring that into the library if you don't see a use for it, but it's still good to keep in mind that there can be stale data in certain situations. If you are interested in hearing more, I can provide logs that show objectively incorrect data (overlapping top/bottom for adjacent indices right before drag). But otherwise I'm fine with just patching my own library.