Building a Story List UI with Reanimated (React Native)
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://www.reanimate.dev
Support me on Patreon: / reactiive
Twitter: / reactiive_
Recommended tutorials before this one:
Exploring Interpolate: • Animated Stacked Cards - Exploring th...
Advanced Onboarding: • React Native Advanced Onboarding (Rea...
Source code: https://github.com/enzomanuelmangano/...
Chapters:
00:00 Introduction
01:35 Our lovely boilerplate
03:00 Here's the plan
04:30 Setup the list (First Step)
10:25 Using an absolute positioning
14:10 Access the scroll offset
20:55 Customize the scroll behavior
23:36 Animating the active item
29:27 Scaling and translating the 2nd and 3rd item
33:26 Centering the List
35:40 Fix Scrolling to the end
37:57 Final but important touches