Complete React Native Animations Course
Go from beginner to mastery of React Native animations. We'll walk you through each step from animating a simple box, understanding interpolation, all the way up to building a shared element photo grid! Get it at https://reactnativeanimations.com
PanResponder is typically going to be used to control animations that cause various drag events to happen, or additionally to trigger animations to completion and terminate on a release.
There are 3 main functions that we'll use for our animations.
The first is
This is typically going to be used as our setup. We may need to use setOffset in the case of dragging, but your use cases may vary for what you need to setup.
The second is
This is going to be called whenever a user moves their finger. In many cases it'll be for dragging with a single finger, however the event (first argument) will provide an array of all of the touch events that are currently happening. There could be more than 1! Typically you'd use Animated.event here, but if you need more complex logic (doing different animations based on number of touches currently happening), then this may be much more complex.
Either way the gist is that it's typically going to be used to track a constant touch while a user is moving their finger.
The third and final
This is typically where the analysis of the animation value and business logic might live. In the case of Tinder, on release we want to analyze the final position of the card we were dragging.
If it reaches a certain threshold then we may want to trigger an Animated.decay to continue the card throw, or if it doesn't reach our threshold we may want to reset the card position by animating it back to the middle. This may use a Animated.timing or Animated.spring to reset it back to `x:0, y:0. Also commonly with drag animations flattenOffset will be called.
There are a few other cases for
onPanResponderRelease that deal with stopping animations that may have been triggerd in
onPanResponderGrant or also deciding on what to do based upon values of other animations that you may be listening on using addListener.
There is another less common one that likely will not happen in lesser complex applications but it is
onPanResponderTerminate. Similar to a release but as it is described in the documentaiton
"Another component has become the responder, so this gesture should be cancelled".
A gesture may still be happening however it is not currently being handled by our
PanResponder. Depending on your application you may just want to trigger the same stuff that happens on an
onPanResponderRelease or at least the parts that deal with reseting the animation if that happens to be applicable.