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
