Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Swipe to delete Animation in React Native with Reanimated 2
Play lesson

Animate with Reanimated - Swipe to delete Animation in React Native with Reanimated 2

5.0 (1)
25 learners

What you'll learn

This course includes

  • 12 hours of video
  • Certificate of completion
  • Access on mobile and TV

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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere