Multiple Drag and Sort List in Reanimated 2

Let's recreate the Apple Music multiple drag and sort in React Native!
Read the code: gist.github.com/eveningkid/00...
Reanimated: docs.swmansion.com/react-nati...
Twitter: / eveningkid
Medium: / eveningkid
#reactnative #tutorial #reanimated2

[@eveningkid]

Alright so, I battled with my video editor for 2 days and still couldn't export the video to high-quality! That's all I can do this time. All will be back to normal starting from the next video :)

[@matiaspalheiro]

I still haven't found someone who can explain it better than you. Its content is wonderful. Thank you for dedicating to that.

[@eveningkid]

Thank you Rodrigo, really. Wow, I just have no words to answer to this, thank you. It's my pleasure to help with what I can. It means a lot to me that you take the time to share this with me (not sure I have seen you before :D). There's a lot more to come, always more to learn!

[@jacobcole1271]

Great content as always!! I was looking forward to this video and can't wait to see part two. Keep up the good work!

[@eveningkid]

It is so great to see you're still around Jacob! Very glad this was helpful. Thank you so much for supporting me since the very beginning :)

[@BADGRAPHIX]

Looks pretty involved. Appreciate the work put in.

[@davidgentilli7944]

Veryhelpful! I learned a ton from this video, thank you!

[@Quacky_Batak]

Wow! That was a lot of content and knowledge. I finally, for the first time saw the use of a Shared Value other than Primitives. Also I didn't know about the reaction hook. Clamp function is much appreciated. Would definitely watch a couple time 😉. Waiting for the 2nd part! Great video as usual!

[@eveningkid]

I was so concerned about making a video "that long", it sure was a lot in one video...! It was an interesting use case that really took advantage of different features, I'm glad you found it interesting too! "As usual", thank you for your support. Always good to have a quack quack from Apoorv :)

[@Quacky_Batak]

​@@eveningkid Haha yeah thanks!

[@mithleshyadav336]

I was afraid of animation, earlier. But since, I watched your videos I gained much confidence in implementing it. Thank for such a great help.

[@eveningkid]

Wow, this means a lot to me, really! I felt this way at some point too, you know. I hope the videos are simple enough to follow, that's my number on concern with these. Thank you for saying how you feel in the comments, it's very important for me :)

[@alokprakash2017]

and i am in that stage. Trying to get out of it.

[@MadeWithMatt]

Amazing stuff man! Really enjoying the content 🔥 What are you using to edit your videos and how do you get such clean animations? They're always so perfect

[@eveningkid]

Thank you Matt, it's really nice seeing you here!! I don't even edit my videos on a computer, but now on my iPad with Luma Fusion! Weird, isn't it :) But so far so good, I switched from Final Cut

[@MadeWithMatt]

@@eveningkid No way that's really cool!! I'll check it out! Keep making videos man they're awesome, learning a lot from you 🚀🙌 I'm excited to see your channel grow 😁

[@eveningkid]

Thank you man, really. We're in the same boat, best of luck to you too! This community really deserves great content, let's make it happen :)

[@khanhduy3364]

That sounds great

[@junangameplays3271]

Thank you so much! You are awesome! The best!!!

[@eveningkid]

I had to!! I remember you commented twice for drag and sort haha I really hope this helped you...or maybe this was too late? :)

[@junangameplays3271]

@@eveningkid It's not late. It was just for more knowledge for me and others who need this content someday. It's very hard to find. I'll use it on my works. Thanks so much again, hope u understand my english haha

[@eveningkid]

Of course I do Junan! :) Best of luck with your app, I hope you’ll do good!

[@fernandorojo6311]

Such a good video!

[@eveningkid]

Thank you Fernando, your support is really appreciated :)

[@diegobraganza2779]

Great Video, a lot of very useful, content and everything is very well explained! It works really good on ios but having some problems on android: I had to add a gestureHandlerRootView, still items move in a erratic way. Any idea how to solve it?? thank you!

[@all-in-all7862]

Thanku so much brother Awesome👏👏👍😊

[@eveningkid]

No way, you're still around! That's when you know, I care a lot about the comments! Thank you for suggesting this last time, and I hope this was helpful to you in some way (and hopefully not too late!) :)

[@towhidulislam2934]

Good job keep going

[@philong8268]

Thanks for video

[@eveningkid]

Thank you, I appreciate you :)

[@iamshadmirza]

This is crazy good

[@eveningkid]

It’s crazy cool you’re taking time to leave a comment man. This means a lot to me, thank you :)

[@NguyenPhuong-lu5sf]

Nice video, nice voice. Keep up bro!!!

[@eveningkid]

Thanks a lot :)

[@excalibur885]

so you can scroll only from the right side ? so how i can apply opposite way? scroll with. 80% and drag and sort with 20%

[@cryptoknight7256]

And now, let's figure out how to do the same with Flatlist! Teasing you. Great tutorial, man!

[@eveningkid]

I’ll pass, I already spent a lifetime working on this one haha! You know how to torture people don’t you! Thanks for the message Vincent :)

[@minotuki100]

@@eveningkid Salut ;) Is it a reason to not use a Flatlist instead of Scrollview? Maybe it could be some issues due to Flatlist optimizations or with "scrollTo" Reanimated 2 method?

[@minotuki100]

After some try, I maybe can answer to myself ^^ : one possible good reason to not use FlatList is about zIndex. Each FlatList item are wrapped in a parent Item. Because of that, the zIndex of absolute positionning items will not work. ScrollView seems to be a better way than FlatList when using position:absolute for each items.

[@eveningkid]

Mmh, I’m sure it’s doable, it must be all about making the right computations...but life is too short to do this in a video!

[@NelsonPRSousa]

This is SOOOOOOOOO cool! Any idea how we can add a floating button and drag it to add to the list? It would be legendary! Great work!

[@eveningkid]

Well my guess is that you could make the button movable with a pan gesture handler, and modify the positions by adding a new id to the object as if it existed in the list. If you drop it, you then can update the list of items with a state. That’s just on top of my mind, but I guess that would work! Either way, thank you so much for commenting Nelson. It means a lot to me!! :)

[@NelsonPRSousa]

@@eveningkid You deserve it, thank you!

[@harryd7602]

For anyone with issues on android. Try removing the animation for the card to move to the current position. e.g. worked for me. Not quite as smooth but good enough if (Platform.OS === "ios") { top.value = withTiming(positionY - CARD_HEIGHT, { duration: 16, }); } else { top.value = positionY - CARD_HEIGHT / 2; }

[@nguyenkhooi1598]

Hey evening kid, thanks for this tutorial. I'm testing this gist on expo web, but unfortunately the drag gesture doesn't work :( . Do you have any insight on this?

[@eveningkid]

I think the best way to know what's wrong (especially if this works on mobile but not on web), is to ask on Reanimated 2 repository. It will also help anyone else facing this issue :)

[@emperorrassem]

Is there any way to optimize the list? If the list is too large, its taking too much time to initially load the page.

[@jacoboaristizabal979]

what if you want to put the row swipeable as well?

[@ucheiam]

This is the exact problem I am having, I haven't figured it out

[@user-wv7lj1xc7c]

How to handle performance issues caused by using sharedValue animations with large data sets in React Native?

[@gonz4610]

my scoreboard: william candillon - 100 | Evening kid + 100

[@eveningkid]

...I won't get into these oppositions! I have my style, he has his. Now I am very happy you like my videos, truly!! There are so many ideas on my mind, if only I could have more time. Thank you so much for still being around, I remember your name gonz :)

[@vasylnahuliak]

If there is one thing hard to build with react native it must be the kanban board

[@randompointlessness2766]

Is it the same in reactJs ?

[@privat3stuff]

🙌🏻

[@eveningkid]

🤛

[@crispy_rw]

I am wondering why you stopped making animation videos.

[@user-vt6bo6ff6m]

why you guys use expo

[@GabrielCosta-de5eg]

sadly some things are deprecated

[@hanslercher3947]

Great video as always! I always enjoy the content you are publishing here on KZbin. I have a question regarding FlatLists, maybe you can help me: I want to create a feed for the start page of my app. The feed should be infinitely scrollable and as resource-efficient as possible. Of course, this can all be done with the FlatList component, but I don't know how to display different types of components in the FlatList. Here is an image with an example of how I mean different types of components: i.stack.imgur.com/iIpW5.png So the layout needs to be very flexible and I don't know how to do that with a FlatList. I have already thought about Conditional Rendering, but again I am missing a way to make it work properly. Have any of you ever solved such a problem? I would be grateful for any suggestion!

[@eveningkid]

Hey Hans, I'll give a try to your question (I hope I understood it right!). I think this question is very data-dependent: not sure how it looks like but if you are thinking of using FlatList, I assume you have a list of "posts" for your feed. If so, each post has a different type mentioned somewhere, correct? e.g. [{ type: 'article', metadata: ... }, { type: 'photos', ... }] Then you could have a component that "redirects" the data to the appropriate component that knows how to render a certain type of post. } /> function Post({ type, data }) { if (type === 'article') { return ; } if (type === 'photos') { return } } Now I'm starting to think you must have done this when you mentioned "conditional rendering"... But if you did, what did you mean by "missing a way to make it work properly"?

[@hanslercher3947]

@@eveningkid So first of all, thank you for your detailed response to this individual problem! I also thought that it could work that way, but was not sure if that was the right approach. So related to performance and so on. So I just wanted to ask a person who is a bit more experienced with React Native than me. But that has cleared up all my questions now, keep up the good work!

[@eveningkid]

I think you’re right, layout computation wise, this isn’t ideal. If it’s different each time, there’s not many ways of optimizing it I feel! No problems really, it’s always a pleasure to see someone taking the time to leave a comment you know. I care a lot about people, so this means a lot to me. Hope to see you around, best of luck with your app!