Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Animate on DoubleTap like Instagram (React Native Reanimated 2)
Play lesson

Animate with Reanimated - Animate on DoubleTap like Instagram (React Native 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 handle together the DoubleTap and the SingleTap gesture when is it needed. Since the series is about Reanimated 2 we will play a lot with animations by reproducing the "Instragram Like Action". My React Native animations course: https://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ To be honest this video is inspired by the docs of the TapGestureHandler (at the very bottom of the page you can see how to implement a DoubleTap gesture with two different TapGestureHandlers) - https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh/ The main concepts we'll explore are: - TapGestureHandler - waitFor property - withTiming, withSpring and withDelay Images: - Background Image: https://unsplash.com/photos/60GsdOMRFGc - Heart Icon: https://www.flaticon.com/free-icon/like_535234?term=heart&k=1622279977050 By default the Heart Icon will be black, you can edit the color icon only if you are subscribed to FlatIcon (it is free of course). Otherwise, you can download the Heart Icon from the GitHub repo. Reanimated docs: https://docs.swmansion.com/react-native-reanimated/docs Gesture Handler docs: https://docs.swmansion.com/react-native-gesture-handler/docs Chapters: 00:00 Introduction 01:12 Setup the workspace 04:17 The DoubleTap Gesture 08:40 Instagram Heart Animation 17:23 Turtles Fading Animation

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