Animated Bar Chart with React Native (Reanimated)
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: / reactiive_
Animate with Reanimated Playlist: • Introduction to React Native Reanimated 2
How to properly handle the scrollOffset?
I explained that in detail in the Pager Dots Tutorial: • Pager Dots Animation with React Native (Re...
Source code: https://github.com/enzomanuelmangano/...
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