Reanimated 2 with Flatlists - Are there any examples?

[CallumHemsley]

Hello,

I'm currently developing a "drag and sort" component that allows users to drag items within a list and re-sort in real time using reanimated and react-native-gesture-handler.

Currently, my component just does a .map() on the array of items to display the list, with each items top value being animated and changed depending on gestures and sorting. However, as we know, this is inefficient and doesn't allow for virtualization of the list. I want to convert my component to use a Flatlist for virtualization while still allowing my gesture based animations with reanimated and react-native-gesture-handler.

Is this possible currently? When I've tried to achieve this I've had issues where I can't animate and change the top value of items within the list in the same way. Does anyone have any examples of animating items within a flatlist using reanimated 2?

Thanks!

[maxfahl]

I don't know if you're interested in using a library, but I'm currently using react-native-draggable-flatlist, and it works great for my needs:
https://github.com/computerjazz/react-native-draggable-flatlist

[CallumHemsley]

Thanks for the response. I've seen this but haven't personally used it yet, will definitely check it out thanks :) Seems to be using re-animated 1 and classes when I looked into the code though! Not necessarily a bad thing

[maxfahl]

I think the version I'm using is on reanimated 2. Also, you can still use functional components as list items, that's what I do. You don't have to you class components.

[CallumHemsley]

Ah I realised since last week they've just converted!