Create a Draggable Card with React Native Pan Responder, and Animated.decay
In this lesson we'll create a PanResponder to allow us to drag a card around the screen. We'll use Animated.event to automatically set the values of our Animated.Value and when the card is released we'll use Animated.decay to decelerate it to a stop.
[00:00] We'll start by importing Animated and PanResponder from React Native. Next, we'll create a componentWillMount lifecycle method, then type this._panResponder is equal to the PanResponder that we create.
[00:14] This PanResponder will then give us panHandlers, which we can then spread this._panResponder.panHandlers onto the view that we want to attach touch events to. Now we'll go create our animated value by typing this._animatedValue = new Animated.ValueXY.
[00:35] Next, we'll replace our onPanResponderMove with Animated.event, which is a function that takes an array. Animated will then traverse all of the arguments and assign those arguments to our animated values that we pass in. We'll ignore the first event.
[00:54] We'll map the delta x, the change in the X location, to this._animatedValue.x and the delta y to this._animatedValue.y. Next we'll switch our view from a regular view to an animated view. Then we'll create const Animated.style, which is an object.
[01:19] We'll say transform: this._animatedValue.getTranslateTransform, which is a helper function to return our TranslateTransform. Then we'll attach that to our animated view. Now, when we refresh our emulator, we can drag the square around the screen.
[01:47] However, if I drop it and then try to drag it again, the animated value will be set to the delta of the new touch, which will cause the square to jump. Because we're dealing with the delta of the drag, we need to attach a listener by saying this._animatedValue.addListener, which is a function that takes a function.
[02:08] The first argument is value. Then we'll assign it to this._value=value. We'll set up our default at this._value = {x: 0y: 0In our PanResponderGrant, we'll say this._animatedValue.setOffset({x: this._value.x, y: this._value.y}).
[02:38] Additionally, we'll set this._animatedValue.setValue({x: 0y: 0to clear out our animation. Now when we refresh our emulator, we can drag the square across the screen, drop it, and then pick it up, and drag it again.
[02:57] In our onPanResponderRelease, which is when we release our touch, we'll say this._animatedValue.flattenOffset, which will flatten our offset delta into our animated value to prepare us for another drag.
[03:15] Then we'll use Animated.decay, which is a function that takes this._animatedValue and a configuration object. It takes a deceleration, which we'll say is 0997. Then we'll give it the velocity of our final touch, which is an object that takes an X direction which it can get from gestureState.vx and our y from gestureState.vy.
[03:43] Now, we'll call start on our animation. If we refresh our emulator, we can drag our square across the screen. Then we release it. It will decay its acceleration in the direction that we released it.