Animated Blur Cards with React Native (Skia)

Опубликовано: 20 Май 2026
на канале: Reactiive

10,384

253

Building custom lists is always fun. In this tutorial, we'll discover how to achieve a Story List UI animation by using just React Native Reanimated.

My React Native course: https://reanimate.dev
Shared 100+ Animations on Demos: https://reactiive.io/demos
Twitter:   / reactiive_

Recommended tutorials before this one:
Custom Animated Loader with Skia:    • Animated Loader with React Native (Skia)
Exploring Interpolate:    • Animated Stacked Cards - Exploring the int...

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

Chapters:
00:00 Introduction
00:46 The background RadialGradient
05:38 Here's the plan
06:55 Handling the initial state
09:35 The 3D state (end state)
15:58 The Blur effect
20:55 Fixing the Cards z-index
22:12 The animation (Finally)
26:24 Final touches