fivecar / react-native-draglist

FlatList that can be reordered by dragging its items
MIT License
118 stars 19 forks source link

can't scroll below viewport #19

Closed Pau1fitz closed 1 year ago

Pau1fitz commented 1 year ago

hey, nice library, great work. Just wondering if I am missing something, but when testing on the iOS simulator the drag and drop works great but if my list is longer than the screen I can't scroll to the items below.

Any ideas here?

fivecar commented 1 year ago

It should scroll if you hold the dragged item near the bottom of the list (i.e. in the bottom half of the last visible item). Please LMK if that's not the case.

Pau1fitz commented 1 year ago

Thanks for the response.

Yeah, so It does scroll when you do that. But what I mean is if i have 100 items and I want to move the last one to the top I would hope I can scroll to the bottom of the list without having to drag an item? Does what I'm describing make sense?

fivecar commented 1 year ago

@Pau1fitz : Ah, I get it. It's by design in the example app, but won't be in any real app.

Specifically, you get the drag behavior, as opposed to the scroll behavior, whenever the client calls onDragStart. In the example app, to keep things simple, we call onDragStart whenever you onPressIn on any part of the item. But in real life, you probably want either a drag handle on the item that calls onDragStart (in which case dragging on any other part of the item will scroll the list), or you want to map something like onLongPress to call onDragStart (in which case normal drags will scroll the list, and only long presses will initiate a drag action).

It's basically up to the client to define what behavior they'd like to represent the beginning of a drag/reorder motion. If the client defines any press on any part of a list item to begin the drag/reorder motion (as the example app does), then indeed you won't be able to scroll that list at all -- you'll only be able to reorder.

LMK if that all makes sense.

fivecar commented 1 year ago

(This is covered in the first item in https://github.com/fivecar/react-native-draglist#use. LMK if the docs need to be further clarified!)