Animate with Reanimated - The basics of PanGestureHandler with React Native Reanimated 2

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