react-native-draggable-flatlist
react-native-draggable-flatlist copied to clipboard
computerjazz
App stuck while dropping item on iOS
Describe the bug From time to time I got my app completely stuck at the moment of dropping a floating item.
To Reproduce
https://user-images.githubusercontent.com/24992980/187746741-6f66c266-f654-42e2-bc11-0356460af878.mov
Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).
- react-native-draggable-flatlist version: 4.0.0-beta (5, 8, 9 and 12 - versions I tried)
- Platform: ios
- React Native or Expo version: RN 0.68.2
- Reanimated version: 2.8.0
- React Native Gesture Handler version: 2.4.2
Additional context Works fine on v3.1.2
Expo Snack is a way to share small react native projects that can run in the browser, or on device: https://snack.expo.dev/
@computerjazz , here is a snack with 2 main files connected to the list (App.js - list, TaskEditor - list item). https://snack.expo.dev/ZAI1sLmcH
Thanks, but there's a lot of missing dependencies so I can't run it. I did notice there is a LOT of complex logic in your onDragEnd (and elsewhere). Is it possible the freezing is a side effect of some other runaway process that's being triggered?
@computerjazz , sorry, I can't push all code. I think freezing must be connected to draggable-flatlist component, because downgrading to 3.1.2 fully resolved the problem (but the performance of beta is much better, that's why I would like to have 4.0.0).
When this freezing happens, it freezes my app completely so it doesn't react on anything. Also I don't have any logs in xcode that can hint at the reason. And if to don't touch and wait - nothing happens with the app. I was waiting for any crash in order to receive a crash report, but nothing.
May it be connected to reanimated? I'm also using reanimated in my project on another screen.
@MikhailVasiliev : I can't speak for your specific situation, but I ended up pulling react-native-reanimated out of my entire project because of its various hangs and crashes (exposed to me first through react-native-draggable-flatlist). What you'll find if you look through Reanimated issues is that hangs/crashes have been reported through several "stable" releases, by many people, but the issues continue to be unfixed (perhaps because they're hard to reproduce). Sometimes they don't reproduce because, IMO, race-condition hangs can go away even if you change some other build parameters; the most common reports come from people who load the animations early in their app stack, or who use react-navigation.
I tried researching this for way too long, so ended up just publishing react-native-draglist with the sole purpose of avoiding these crashes and hangs. It's not half as well-animated as react-native-draggable-flatlist, and it doesn't even support horizontal lists yet — but I got so worried about the inevitable hangs and crashes that I couldn't bear the risk prior to launch.
My TL;DR is this: react-native-draggable-flatlist is far superior to what I wrote (e.g. it has probably 10x the number of lines of code), but react-native-reanimated has had hard-to-reproduce hangs/crashes for so many "stable" releases that I can't bet a production app on it.
I report the same issue on Android.
The dragged item will stay in an active state (isActive is true), and everything is unmovable, unless I close and re-open the container.
Each of my item is a Pressable with android_ripple configured. I can always reproduce the problem this way: when just start dragging, slightly lift my finger off the item, so that the ripple just disappears, and then instantly slide my finger up or down. The whole thing will then get stuck.
In other words, what I was doing is "decoupling" dragging movement on the screen with press. I didn't hold the item tight when dragging, I left it behind my finger.
I guess the problem is in guesture handler. But I really have no idea how to fix it.
Fixed it with help of this answer (https://github.com/software-mansion/react-native-reanimated/issues/2244#issuecomment-1337623271), so added one line to the source code with a patch:
@computerjazz I'm closing it, feel free to re-open if you need it to be open
Fixed it with help of this answer (software-mansion/react-native-reanimated#2244 (comment)), so added one line to the source code with a patch:
I experience exactly the same issue like MikhailVasiliev The screen freeze randomly. However, for my case, the strange part is it works well when I use Expo Go to live reload the app. It never freeze. However, when I build a product version, it happens. So I think this issue can't be reproduced by share a snack. Also, I guess the root cause of it might related to reanimated as mentioned here https://github.com/software-mansion/react-native-reanimated/issues/2327 For my case, it's not a complex drag and drop list like MikhailVasiliev has, but it's a simple drag and drop list. Finally, MikhailVasiliev solution solve my issues too. So I do suggest, can we have his solution directly in "eact-native-draggable-flatlist" library? So in the future, no body will report this issue again and use patch to solve it.
@MikhailVasiliev Running into the same issue and I was curious if you are actually changing the node modules themselves?
Is there anyway we can get a PR for this? We are still having the same issue and don't really want to do a patch.
@computerjazz @MikhailVasiliev
hi @donotriplett try this https://github.com/ds300/patch-package if you are using yarn，they also support patch package natively. in this way you fix node_modules in an easy way
Running on the JS thread kinda defeats the point of RNGH + Reanimated. I agree this does seem like a pretty significant issue though. Have you tried Reanimated 3.x? Looks like the issue may be resolved: https://github.com/software-mansion/react-native-reanimated/issues/3917#issuecomment-1380854561
@computerjazz for reanimated 3.x, the issue is many people use Expo to develop RN apps and Expo won't update the reanimated version to the latest version pretty fast. (In one of my latest project, I use Expo 47 and Expo 48 just released recently. For my project I was forced to use reanimated 2.14 ) So it takes a pretty long time before expo finally include reanimated 3.x. I guess maybe a practical fix here is to add another prop isRunOnJs on DraggableFlatList to let user to decide whether they want to run on JS or not. In this case, people working with reanmiated 3.x won't have issue while people working with reanimated 2.x could still work around.
Actually, the performance different between runOnJs(true) and runOnJs(false) might not be that significant, for my case, I actually can't tell the differences when I drag and drop from UI, both are pretty smooth for me.