Pager Dots Animation 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://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