Animate with Reanimated - Ripple Effect Animation in React Native with Reanimated 2

In this tutorial, we’ll learn how to create a Ripple Effect Animation in React Native. We'll use React Native 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/10-ripple-effect react-native-inkwell package source code: https://github.com/enzomanuelmangano/react-native-inkwell 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: - TapGestureHandler + useAnimatedGestureHandler - How does runOnJS work? - measure function from Reanimated Chapters: 00:00 Introduction 01:25 Setup 05:18 The TapGestureHandler 08:26 Why runOnJS? 10:38 Creating the circle overlay 14:14 Center the Ripple Circle 17:50 Scale animation 19:05 Find the right Circle Radius value 23:58 Final touches 26:16 onEnd vs onFinish