Summary
Keywords
Full Transcript
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: https://twitter.com/reactiive_ Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/09-swipe-to-delete What's a Shared Value? 🐢 Here's the answer: https://youtu.be/yz9E10Dq8Bg How to deal with the useAnimatedGestureHandler hook? Check this video: https://youtu.be/4HUreYYoE6U 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
