Animate with Reanimated The basics of PanGestureHandler with React Native Reanimated 2
The basics of PanGestureHandler with React Native Reanimated 2 Transcript and Lesson Notes
In this tutorial, we’ll learn the basics of the PanGestureHandler component (from react-native-gesture-handler package). We will also play around with some animations thanks to Reanimated 2. To enhance the learning exper
Quick Summary
In this tutorial, we’ll learn the basics of the PanGestureHandler component (from react-native-gesture-handler package). We will also play around with some animations thanks to Reanimated 2. To enhance the learning exper
Key Takeaways
- Review the core idea: In this tutorial, we’ll learn the basics of the PanGestureHandler component (from react-native-gesture-handler package). We will also play around with some animations thanks to Reanimated 2. To enhance the learning exper
- Understand how pangesturehandler fits into The basics of PanGestureHandler with React Native Reanimated 2.
- Understand how pan gesture fits into The basics of PanGestureHandler with React Native Reanimated 2.
- Understand how react native fits into The basics of PanGestureHandler with React Native Reanimated 2.
- Understand how reanimated fits into The basics of PanGestureHandler with React Native Reanimated 2.
Key Concepts
Full Transcript
In this tutorial, we’ll learn the basics of the PanGestureHandler component (from react-native-gesture-handler package). We will also play around with some animations thanks to Reanimated 2. To enhance the learning experience I based this tutorial on building a nice animation with a square and a circle. My React Native animations course: https://reanimate.dev Shared 100+ Animations on Demos: https://reactiive.io/demos Twitter: https://twitter.com/reactiive_ Written article: https://reactiive.io/articles/pan-gesture-handler Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/01-pan-gesture-handler-basics The main concepts we'll explore are: - PanGestureHandler - Shared Values - useAnimatedGestureHandler hook - withSpring Introduction to Reanimated 2: https://youtu.be/yz9E10Dq8Bg If you like this tutorial, don't forget to subscribe to the channel :) Chapters: 00:00 Introduction 00:44 Setup workspace 02:33 Let's define our PanGestureHandler 07:00 How to deal with "Context"? 11:07 Dealing with Spring animation 12:34 The magical circle
Lesson FAQs
What is The basics of PanGestureHandler with React Native Reanimated 2 about?
In this tutorial, we’ll learn the basics of the PanGestureHandler component (from react-native-gesture-handler package). We will also play around with some animations thanks to Reanimated 2. To enhance the learning exper
What key concepts are covered in this lesson?
The lesson covers pangesturehandler, pan gesture, react native, reanimated, react native gesture handler.
What should I learn before The basics of PanGestureHandler with 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: pangesturehandler, pan gesture, react native, reanimated.
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.
