Animate on DoubleTap like Instagram (React Native Reanimated 2)
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://www.reanimate.dev
Source code: https://github.com/enzomanuelmangano/...
My Patreon Account: / reactiive 🤓
To be honest this video is inspired from 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-nati...
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/li...
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-nati...
Gesture Handler docs: https://docs.swmansion.com/react-nati...
Chapters:
00:00 Introduction
01:12 Setup the workspace
04:17 The DoubleTap Gesture
08:40 Instagram Heart Animation
17:23 Turtles Fading Animation