can't scroll the list when too many items

[mtalhagaoglu]

Hi. I'm trying to use this library in my expo project but i can't get any successful result. When there is too many item in the list i can't scroll down for see them. i tried activationDistance={10} but its not working good and bad for ux. i was using this library when it 1.1.9 and it was working without activationDistance and was good. is there a better way than go back old version?

Platform: React Native or Expo version: 3.21.13 expo (expo --version) Reanimated version: "~1.7.0", React Native Gesture Handler version: "~1.6.0", <DraggableFlatList data={data} renderItem={this.renderResult} keyExtractor={(item, index) =>draggable-item-${item.id}} scrollPercent={5} onDragEnd={({ data }) => { this.setOrder(data); this.setState({ bus: data }); }} />

[computerjazz]

can you submit a repro snack? Do you have other gesture handlers that could be stealing the gesture from the list?

[creambyemute]

@mtalhagaoglu Is the DraggableFlatlist inside a ScrollView?

[surajwasnik]

Facing the same issue @creambyemute yes I used the scroll view as well.

<ScrollView style={{ flex: 1 }} scrollEnabled={true}>
<DraggableFlatList
data={tab.data[0].dargdropfielddata}
renderItem={this.renderItem}
keyExtractor={(item, index) => "draggable-item-${item.tab_id}-${item.key}"}
onDragEnd={({ data }) => {
    let prevFields = [...this.state.customTabDataArray];
    prevFields[index].data[0].dargdropfielddata = data;
    this.setState({ customTabDataArray:prevFields });
  }
}
/>
</ScrollView >

[kfernandes29]

Same issue here. Not sure how to get this working properly inside of a scrollview.

[NavidHosseini]

same issue

[midimurphdesigns]

same issue here. looking for workarounds and alternative packages.

[computerjazz]

If you have the draggable list nested in a scrollview you have to use the scrollview from react-native-gesture-handler and pass the outer scrollview ref on simultaneousHandlers, see: https://github.com/computerjazz/react-native-draggable-flatlist/pull/273#issue-600733261

Note that you'll also have to disable scroll on the outer scrollview while dragging or else it will cancel the gesture.

[midimurphdesigns]

oh nice, thanks for the prompt response. Following these suggestions, it looks like I'm able to scroll just fine through the draggable list when the list is longer than the screen size. My list is nested a few levels as a child, so I passed the scrollViewRef down 3 levels to the actual draggable list, and it seems to work. I also set the scrollEnabled value to global state and it works with a nested list. However, I am also facing an issue where the list doesn't drag in the simulator but does on an apk/ipa build on a device (https://github.com/computerjazz/react-native-draggable-flatlist/issues/282).

[vranjesluka]

Hi @computerjazz @midimurphdesigns, I'm unable to make this work, I would appreciate your help.

Here is the snack example, try it on iOS or Android: https://snack.expo.io/EraglKWg9J

PS Off-topic I'm trying to have labels on the left of the draggable items. Labels should be fixed to the position and should not change while or after dragging, only the right items should be draggable. 341
Currently, I'm trying to do that with having a list inside scrollview, but I'm having the above issue, it scrolls when I scroll on the label side but it doesn't when I scroll on the list's side. If you have any other suggestions on how this behavior could be implemented without wrapping the list in scrollview I would be more than happy to try it our.

[computerjazz]

The draggable flatlist will steal the gesture unless you add an activationDistance. You probably also want to disable outer scroll while the drag is in progress. See: https://snack.expo.io/@computerjazz/rndfl-nested-scrollview-example

please open a separate issue for your second point.

[johnny-rematter]

Hi @computerjazz ,

I think the error is still there in the example you provided, you are able to scroll the draggable-list but just in the visible portion of the screen, you can't go further than that, the outer-scroll is not responding to the drag gesture.

[hamzaawais96]

@johnny-rematter were you able to make it work?