Animate with Reanimated ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2)
ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2) Transcript and Lesson Notes
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
Quick Summary
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
Key Takeaways
- Review the core idea: 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
- Understand how react native fits into ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2).
- Understand how reanimated fits into ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2).
- Understand how animations fits into ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2).
- Understand how react native animations fits into ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2).
Key Concepts
Full Transcript
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
Lesson FAQs
What is ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2) about?
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
What key concepts are covered in this lesson?
The lesson covers react native, reanimated, animations, react native animations, app development.
What should I learn before ScrollView from scratch with PanGestureHandler in React Native (Reanimated 2)?
Review the previous lessons in Animate with Reanimated, then use the transcript and key concepts on this page to fill any gaps.
How can I practice after this lesson?
Practice by applying the main concepts: react native, reanimated, animations, react native animations.
Does this lesson include a transcript?
Yes. The full transcript is visible on this page in indexable HTML sections.
Is this lesson free?
Yes. CourseHive lessons and courses are available to learn online for free.
Continue Learning
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
