search

computerjazz / react-native-draggable-flatlist

A drag-and-drop-enabled FlatList for React Native
MIT License
1.91k stars 393 forks source link

Support react-native-reanimated 2 #247

Open nelsonprsousa opened 3 years ago

nelsonprsousa commented 3 years ago

Describe the solution you'd like We could take advantages of the new react-native-reanimated 2, already using Turbo Modules.

lh9403 commented 3 years ago

The same problem

nelsonprsousa commented 3 years ago

@computerjazz is there any plans to rewrite the lib with reanimated v2, now that it is stable?

pirroman commented 3 years ago

@nelsonprsousa @computerjazz Hello, please take a look at this request. https://github.com/computerjazz/react-native-draggable-flatlist/pull/270

chanlito commented 3 years ago

Can't wait. Thanks for this cool lib.

nelsonprsousa commented 3 years ago

@pirroman Just checked that #270 was merged, however we still have warnings using REA v2 (it is working nevertheless)

pirroman commented 3 years ago

@nelsonprsousa I saw those warnings. This is because Animated.createAnimatedComponent method is being used. It returns components with legacy references. I couldn't fix it quickly, but it shouldn't affect the work itself.

nelsonprsousa commented 3 years ago

Okay, thank you @pirroman It would be awesome to see a real migration to v2 to take advantage of turbo modules, maybe the author can do it someday 😜

computerjazz commented 3 years ago

;)

https://github.com/computerjazz/react-native-draggable-flatlist/pull/276

nelsonprsousa commented 3 years ago

;)

276

Wow, you rock 🚀

computerjazz commented 3 years ago

UPDATE: While migrating to reanimated 2 is in the long-term plan, v2 currently has performance issues when rendering lots of nodes. Until these are addressed, this package (as well as react-native-swipeable-item) will stick to the v1 implementation, which is much more performant.

see: https://github.com/software-mansion/react-native-reanimated/issues/1710 https://github.com/software-mansion/react-native-reanimated/issues/1635 https://github.com/software-mansion/react-native-reanimated/discussions/1632

nelsonprsousa commented 3 years ago

UPDATE: While migrating to reanimated 2 is in the long-term plan, v2 currently has performance issues when rendering lots of nodes. Until these are addressed, this package (as well as react-native-swipeable-item) will stick to the v1 implementation, which is much more performant.

see: software-mansion/react-native-reanimated#1710 software-mansion/react-native-reanimated#1635 software-mansion/react-native-reanimated#1632

Will there be a beta using v2 that we can use if we want?

computerjazz commented 3 years ago

v2 migration is on hold until the rewrite is released (https://github.com/computerjazz/react-native-draggable-flatlist/pull/281) and the above performance issues are addressed.

svenlombaert commented 3 years ago

@computerjazz Quite confused, since package.json requires reanimated v2.0 or higher as a peer dependency? So if the migration is not ready, why did the peer deps get bumped?

Not wanting to hijack this issue but when I use v2 I'm unable to drag on the iOS simulator on v2.6.2. Works perfectly fine with reanimated < 2.0.0

computerjazz commented 3 years ago

v2 peer dep shouldn't have been bumped, I will revert that. This package is currently compatible with BOTH v1 and v2, and v1 will be supported for the immediate future.

The migration is completely separate from making the package compatible with v2. The purpose of the migration is to make this package actually use the new v2 apis. Since v2 is backwards compatible, we can still use the v1 apis.

Not sure about that drag issue. please open a separate issue with a snack repro.

yuhr commented 2 years ago

Now it's 2022, what's the status of this issue? I wonder if Reanimated v2 is officially supported or not.

I'm facing into the problem described by svenlombaert, which also appears in these issues:

Downgrading Reanimated to 1.13.4 worked for iOS but it breaks Android build (maybe due to compatibility with other packages), so I'm in a dead lock now.

Is the codebase tested on Reanimated v2?

nelsonprsousa commented 2 years ago

Now it's 2022, what's the status of this issue? I wonder if Reanimated v2 is officially supported or not.

I'm facing into the problem described by svenlombaert, which also appears in these issues:

Downgrading Reanimated to 1.13.4 worked for iOS but it breaks Android build (maybe due to compatibility with other packages), so I'm in a dead lock now.

Is the codebase tested on Reanimated v2?

I am using this library in the current latest version (3.0.6) with Reanimated (2.5.0) and it works. Some warnings related with react-native-gesture-handler are being generated, tho. @computerjazz know much better what's happening and the state of draggable-flatlist and REA v2 + RNGH.

computerjazz commented 2 years ago

TLDR: react-native-draggable-flatlist is compatible with Reanimated v2, it's mostly an implementation detail that we're using the backwards-compatible v1 apis under the hood for better performance.

I'm curious, this seems to be a common misconception that you cannot use reanimated v2 in a project with react-native-draggable-flatlist. Is there some misleading documentation somewhere?

As far as upgrading to the v2 api ,we're in basically the same boat as we were when reanimated v2 launched. It's simply not performant enough to handle react-native-draggable-flatlist—I guarantee you would not be happy with the result if we started using the v2 api as it stands today. Feel free to make some noise on this issue that I opened a while back ;) https://github.com/software-mansion/react-native-reanimated/issues/2845

As far as the drag issue you're facing, please provide a repro snack/project and I'll look into it.

yuhr commented 2 years ago

Thanks, then there might be another factor I'm not aware of. I'm going to tinker around the dependencies further and try to create a repro.

I'm curious, this seems to be a common misconception that you cannot use reanimated v2 in a project with react-native-draggable-flatlist. Is there some misleading documentation somewhere?

My bad, in my case the misconception mostly came from the fact that this issue is still open and seemed to be inactive for several months. Another point is somone says “v1.13.3 is the latest working version with draggable flatlist” in the issues I listed above.

svenlombaert commented 2 years ago

Now it's 2022, what's the status of this issue? I wonder if Reanimated v2 is officially supported or not.

I'm facing into the problem described by svenlombaert, which also appears in these issues:

Downgrading Reanimated to 1.13.4 worked for iOS but it breaks Android build (maybe due to compatibility with other packages), so I'm in a dead lock now.

Is the codebase tested on Reanimated v2?

Back then, on that version, the peer dependencies where just pinned wrongly and I had to install with the --force flag. So I thought I had to have reanimated v2. Still works fine with 1.x now.

robertcreaner commented 1 year ago

Now it's 2022, what's the status of this issue? I wonder if Reanimated v2 is officially supported or not.

I'm facing into the problem described by svenlombaert, which also appears in these issues:

Downgrading Reanimated to 1.13.4 worked for iOS but it breaks Android build (maybe due to compatibility with other packages), so I'm in a dead lock now.

Is the codebase tested on Reanimated v2?

@computerjazz the issue with the item moving position on long press still exists. Note the issue only occurs after scrolling down the list. Scrolling to the top of the list and then dragging works fine. I have tried downgrading reanimated to 1.13.4 but that didn't work. Any idea?

Dependencies: "react": "^17.0.2", "react-native": "0.68.2" "react-native-gesture-handler": "^1.9.0", "react-native-reanimated": "^2.2.4", "react-native-draggable-flatlist": "^3.1.2",

Code structure example: NestableScrollContainer NestableDraggableFlatList NestableDraggableFlatList ... NestableScrollContainer