Ripple Effect Animation in React Native with Reanimated 2

Опубликовано: 22 Апрель 2026
на канале: Reactiive

20,083

392

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:   / reactiive_

Source code: https://github.com/enzomanuelmangano/...

react-native-inkwell package source code: https://github.com/enzomanuelmangano/...

What's a Shared Value? 🐢
Here's the answer:    • Introduction to React Native Reanimated 2

How to deal with the useAnimatedGestureHandler hook?
Check this video:    • The basics of PanGestureHandler with React...

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