Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Animated Bar Chart with React Native (Reanimated)
Play lesson

Animate with Reanimated - Animated Bar Chart with React Native (Reanimated)

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

Have you ever felt the need to keep track of the pages you view on an Onboarding? Here it comes in handy to know how to make a custom pager from scratch. In this tutorial, we'll do exactly that by using Reanimated. My React Native course: https://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Animate with Reanimated Playlist: https://www.youtube.com/watch?v=yz9E10Dq8Bg&list=PLjHsmVtnAr9TWoMAh-3QMiP7bPUqPFuFZ How to properly handle the scrollOffset? I explained that in detail in the Pager Dots Tutorial: https://youtu.be/04K3wPK2yC8 Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/26-animated-bar-chart Chapters: 00:00 Introduction 01:33 Understanding the data 04:30 Weekly Bar Chart UI 11:43 Add the ScrollView 20:44 Bind the scroll offset to the active week index 25:22 Animate the Bar Chart 29:45 Adding the week letters 24:12 Animate the background colors 27:25 Final 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