Support react-native-reanimated 2

[nelsonprsousa]

trafficstars

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

[lh9403]

The same problem

[nelsonprsousa]

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

[pirroman]

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

[chanlito]

Can't wait. Thanks for this cool lib.

[nelsonprsousa]

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

[pirroman]

@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]

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]

;)

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

[nelsonprsousa]

;)

#276

Wow, you rock 🚀

[computerjazz]

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]

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]

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]

@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]

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]

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:

• https://github.com/computerjazz/react-native-draggable-flatlist/issues/304
• https://github.com/computerjazz/react-native-draggable-flatlist/issues/314

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]

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:

• iOS: Item floating away on long press, preventing drag and drop to work correctly #304
• IOS: drag and drop not working on ios. while working perfectly on android. #314

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]

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]

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]

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:

• iOS: Item floating away on long press, preventing drag and drop to work correctly #304
• IOS: drag and drop not working on ios. while working perfectly on android. #314

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]

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:

• iOS: Item floating away on long press, preventing drag and drop to work correctly #304
• IOS: drag and drop not working on ios. while working perfectly on android. #314

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