react-native-draggable-flatlist
react-native-draggable-flatlist copied to clipboard
computerjazz
Support onScroll and RefreshControl props
- When we passed in onScroll props, it doesn't work and didn't get called
- RefreshControl didn't work as well on Android, when adding RefreshControl, it will block the whole FlatList from scrolling.
See #127 for more info about onScroll.
I haven't tried RefreshControl yet.
Confirmed this is happening on the refreshControl, having it be a prop will block scrolling on Android.
In 2.3.1 you can use onScrollOffsetChange prop instead of onScroll. But still there is nothing about refreshControll
Scrooling with refreshControl not working (refreshControl with props onRefresh and refreshing) And simple props onRefresh and refreshing - not work
No, sorry, it is not something I needed on my project, so I have never investigated.
@computerjazz any plans about RefreshControl support? I thought that this issue connected with https://github.com/software-mansion/react-native-gesture-handler/issues/492
But I can't solve it that way.
The root issue seems to be that the PanGestureHandler that wraps the flatlist has a bad interaction with RefreshControl. I spent a while trying to find a fix but didn't find one.
At this point I'm leaning toward a custom RefreshControl implementation would be the way to go, as it would keep everything in the RNGH + Reanimated world.
@computerjazz thank you for reply. I created custom RefreshControl Android implementation for my project. If someone need it too. I could make a PR.
@computerjazz thank you for reply. I created custom
RefreshControlAndroid implementation for my project. If someone need it too. I could make a PR.
please make a PR, I got need of that as well, thanks!
Any updates on this? I'm seeing that on Android there is no scrolling at all when a RefreshControl is added.
You can disable the refresh controller to overcome this issue.
<RefreshControl enabled={!isCurrentlyDragging} ... />
I'm facing this issue in Android. Will there be a fix?
RN version: 0.63.2 react-native-draggable-flatlist version: 2.4.0
I think there will never be a fix as the issue is with the gesture handler by another library. What I did to overcome this is to put the refresh control on a higher level than the draggable flat list. That way it works just fine on Android.
I think there will never be a fix as the issue is with the gesture handler by another library. What I did to overcome this is to put the refresh control on a higher level than the draggable flat list. That way it works just fine on Android.
Can you post your solution here?
I think there will never be a fix as the issue is with the gesture handler by another library. What I did to overcome this is to put the refresh control on a higher level than the draggable flat list. That way it works just fine on Android.
Please give us some example which will be very useful. Thanks in Advance..!
I think there will never be a fix as the issue is with the gesture handler by another library. What I did to overcome this is to put the refresh control on a higher level than the draggable flat list. That way it works just fine on Android.
@callaars Could you share your wrapper idea ?
@callaars Sorry for bothering you, but I just stuck with that issue - that will be super helpful if you could share your idea :)
Ok I'm very sorry it kept going through the cracks. I've put the basics in this gist. I haven't ran this but that's basically of the components you need.
Ignore the sloppy code, as I've copy pasted things from the source tree, so some ways of implementation might not make total sense.
The main idea is that you have an overriding ScrollView on a higher level than the draggable flatlist. The only caveat here is that the refresh control itself doesn't work on the list, but on the wrapping component of it. For us, that works just fine, but if it doesn't for you then I'm sorry and I don't have a good solution for it. For us triggering the dragging was a major issue as well as it would trigger the refresh control, hence the drag aware context as well.
The meat is found in some-component.tsx. Again, sorry for the messy code, if you have any questions let me know.
@callaars Thanks a lot - I will jump into the code and let you know about the progress :)
@callaars Thanks for that gist. But are you facing any issues with scrolling when wrapping the DraggableFlatList with ScrollView? I can't seem to find a fix for that.
Any solutions for this? The issue is still happening on android. works fine on iOS.
@computerjazz
The root issue seems to be that the
PanGestureHandlerthat wraps the FlatList has a bad interaction withRefreshControl. I spent a while trying to find a fix but didn't find one.At this point I'm leaning toward a custom
RefreshControlimplementation would be the way to go, as it would keep everything in the RNGH + Reanimated world.
I seem to have managed to get it working on android with a minor library patch.
I noticed something interesting, it would be good if someone could confirm and I am curious what the trade-off is of the change. Switching the dependency for FlatList from react-native-gesture-handler to react-native's implementation seems to resolve the issues around refreshControl on android. I also needed to set the activationDistance prop. It seems only to be effective over 14 (activationDistance={14}) not sure why that is. Didn't dive too deeply into the code.
If anyone could check if this works for them or if the maintainers could comment, I would appreciate the feedback.
Update:
To prevent both pull-to-refresh and dragging of an item, when he item was the first one. I added a state that keeps track of whether im dragging anything. that is toggled by onDragBegin / onDragEnd. This is used to toggle the RrefreshControls enabled prop.
If you are importing ScrollView from react-native-gesture-handler it won't work unless you import it from react-native. This solved my issue, I hope it does help you as well
