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 Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Recommended tutorials before this one: - Exploring Interpolate: https://youtu.be/8_hvNoZJsc8 - Advanced Onboarding: https://youtu.be/OT-73hpwxXQ Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/24-story-list 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