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.
My React Native animations course: https://reanimate.dev
Shared 100+ Animations on Demos: https://reactiive.io/demos
Twitter: / reactiive_
Source code: https://github.com/enzomanuelmangano/...
What's a Shared Value? 🐢
Here's the answer: • Introduction to React Native Reanimated 2
How to deal with the useAnimatedGestureHandler hook?
Check this video: • The basics of PanGestureHandler with React...
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