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://www.reanimate.dev
Learn more about React Native: https://www.reactiive.io
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Source code: https://github.com/enzomanuelmangano/...
The main concepts we'll explore are:
PanGestureHandler
useAnimatedGestureHandler hook
withDecay
We have already used the useAnimatedGestureHandler hook in the following tutorials:
PinchGestureHandler: • The basics of PinchGestureHandler wit...
PanGestureHandler: • The basics of PanGestureHandler with ...
Reanimated docs: https://docs.swmansion.com/react-nati...
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