Animate with Reanimated - ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2)

In this tutorial, we’ll learn how to recreate the scroll behavior with just a PanGestureHandler component (from react-native-gesture-handler package). Of course, we'll take advantage of some hooks provided by Reanimated 2. My React Native animations course: https://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/06-scroll-behavior-with-pan-gesture The main concepts we'll explore are: - PanGestureHandler - useAnimatedGestureHandler hook - withDecay We have already used the useAnimatedGestureHandler hook in the following tutorials: - PinchGestureHandler: https://youtu.be/R7vyLItMQJw - PanGestureHandler: https://youtu.be/4HUreYYoE6U Reanimated docs: https://docs.swmansion.com/react-native-reanimated If you like this tutorial, don't forget to subscribe to the channel :) Chapters: 00:00 Introduction 01:01 Setup workspace 05:22 The PanGestureHandler setup 13:02 Manage previous position with Context 15:15 withDecay 16:55 Handling the list bounds 23:00 The Text 24:09 The cancelAnimation tip