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: www.reanimate.dev
Learn more about React Native: www.reactiive.io
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Source code: 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 PinchGes...
- PanGestureHandler: • The basics of PanGestu...
Reanimated docs: 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
Негізгі бет ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2)
Пікірлер: 47