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://www.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
Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/25-pager-dots
Chapters:
00:00 Introduction
01:29 Adding the ScrollView
04:30 Dots UI
12:19 Parametrize the container width
14:45 Dots animation
17:10 Access the scroll offset
20:20 Get the active index
24:12 Animate the background colors
27:25 Final touches
