Перейти к содержимому

Swipe to delete Animation in React Native with Reanimated 2

Reactiive

0:00 / 0:00

Swipe to delete Animation in React Native with Reanimated 2

50 884 просмотра · 5 лет назад
Reactiive
16,2 тыс. подписчиков
50 884 просмотра · 5 лет назад
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