Swipe to delete Animation in React Native with Reanimated 2

In this tutorial we’ll learn how to create a Dismiss Animation in React Native.
We'll use Reanimated and React Native Gesture Handler.

What's a Shared Value? 🐢

How to deal with the useAnimatedGestureHandler hook?

The main concepts we'll explore are:
- How to deal with more gesture handlers?
- How does runOnJS work?
- Dismiss with a PanGesture

Chapters:
00:00 Introduction
00:38 Setup
08:53 Setup the PanGestureHandler
13:31 The missing icon
17:00 Fix the onEnd callback
19:33 Icon opacity animation
21:18 Animate the item height
24:57 Handle onDismiss on the JS Thread
29:05 Fix the ScrollView & PanGestureHandler conflict

[mokshmodi]

Great tutorial but i was going over RNGH docs and isn’t t there a swipeable component doing exactly the same thing

[hongoSalvaje]

This deserve to be seen by way much more people

[ujjwalmanandhar]

Great insights about simultaneousHandler at the end 😊

[sejalkore]

We need more tutorials from reanimated 2 pleaseeee!! Thank you for the awesome content!

[borasumer]

That simultaneousHandlers was what I had been looking for. Great tutorial really, instant subscribed.

[ezequielgarcia]

thanks for this interesting tutorial, reanimated isn't easy but you make it look like it.

[andresribeiroo]

When I saw the notification I came asap 🔥

[davidheisnam]

Really good tutorial. Simple and straight to the point. Thank you!

[chamaldezilva]

Great content! Need swipe right to edit the item 💥

[jerrywebie]

good explanation, thanks for this tutorial!

[shashankgaur]

Thanks a lot for these awesome videos man. Really helps me a lot. I have just started with animations and you are making it so easy for me.

[bettadevindonesia]

Well done dude! Is a great video... there is no secret anymore...

[surajkmr]

You are fantastic sir. great fan of you.

[apidas]

you deserver more subscribers. I subbed already!

[krishnaprasadsingh]

I find this video very helpful
thank you

[remziogultum]

thank you for sharing your knowledge amazing tutorial

[kenh_]

Your video is very helpful, but how to fix the conflict between flatlist and pangesturehandler

[brianwachira]

Great tutorial!
I followed the tutorial to the end and the vertical scrollview is conflicting with the horizontal scroll-to-delete. I compared with other tutorials and they mention that you add this to your PanGestureHandler -> failOffsetY={[-5, 5]} activeOffsetX={[-5, 5]}

[truongngodang]

nice, can you tutorial make a bottom sheet modal like facebook? :)))

[ramielwan]

can you explain the difference between 'worklet'; and runjs