Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Building a Story List UI with Reanimated (React Native)
Play lesson

Animate with Reanimated - Building a Story List UI with Reanimated (React Native)

5.0 (1)
25 learners

What you'll learn

This course includes

  • 12 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere