When dragging an item outside of 'windowSize', item disappears

[lachtos]

trafficstars

Describe the bug Have a big list and set windowSize prop to lower value, like 5. This means 1 viewport height + 2 heights above and 2 heights below are filled (mounted). This optimizes memory for big lists. When dragging an item outside of those viewports, the item disappears (dismounts?). Note: Items from initialNumToRender will not disappear, because these items are always mounted.

To Reproduce Here is a small example. In this example I set windowSize to 1 to better illustrate the issue. As soon as the viewport goes too far below, the item disappears, but reappears when scrolled back.

let data = Array.from({ length: 100 }, (x, i) => i + 1);
return <DraggableFlatList
  data={data}
  renderItem={({ item, drag }) => <ScaleDecorator>
      <TouchableWithoutFeedback onLongPress={drag} style={{ height: 100, backgroundColor: Color("blue").rotate(item * 10).hex()}}>
        <Text style={{ color: "#fff", textAlign: "center", fontSize: 50 }}>{item}</Text>
      </TouchableWithoutFeedback>
    </ScaleDecorator>
  }
  keyExtractor={item => item}
  initialNumToRender={10}
  windowSize={1}
/>

https://user-images.githubusercontent.com/16613421/150084790-90fd2ec5-634e-4b16-8a7a-473a3c1ab9e2.mp4

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• react-native-draggable-flatlist version: 3.0.4
• Platform: iOS/Android
• React Native or Expo version: 0.67.0-rc.6, no expo
• Reanimated version: 2.3.1
• React Native Gesture Handler version: 2.1.1

[computerjazz]

hm yeah this is a tricky one. So, the item that you're dragging gets removed when its original location in the list moves out of the render window.

In previous versions of this package, I rendered a copy of the item as it was dragged instead of translating the original item, but that came with its own issues (rendering a copy meant that items lost all local state when they became active, and then 'regained' that state when they became inactive).

I'll have to think about this

[lachtos]

I noticed the first batch of items which account for initialNumToRender will never get dismounted. Would it be possible to flag the current active item (the one being dragged) as one of the initialNumToRender maybe?

[SvenJonsson]

@computerjazz Perhaps have the option of a copy then if possible if it's hard to solve? For an app I'm working on the state doesn't matter at all but this bug is very annoying. I could try patching the package for now if you have any pointers?

[SvenJonsson]

@computerjazz Any update on this?