Building a Story List UI with Reanimated (React Native)
Reactiive
0:00 / 0:00
Building a Story List UI with Reanimated (React Native)
12 335 просмотров · 2 года назад
Reactiive
16,2 тыс. подписчиков
12 335 просмотров · 2 года назад
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: / reactiive_
Recommended tutorials before this one:
Exploring Interpolate: • Animated Stacked Cards - Exploring the int...
Advanced Onboarding: • React Native Advanced Onboarding (Reanimat...
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