Let’s Get Moving: An Introduction to React Native Animations — Part 3

If you want to start completely from scratch, here’s a link to Part 1 where we used LayoutAnimation to animate the repositioning of a single element on screen.

In Part 2 we discussed the Animated API, interpolating values, and looping animations.

How about we wrap things up?

The last thing we’re going to cover in this series is animating an element on the screen based on a user’s gesture input. You may not think of this as an “animation” immediately, but the element isn’t just going to move itself.

To do this we’re going to put to use what React Native calls a PanResponder. We will use one of these to allow us to drag Jake around the screen.

First, let’s create a new Animated.Value to hold the position of Jake and update it with the user’s gesture. Since we will want to move Jake along both the X and Y axes, we will create an Animated.ValueXY in our constructor, instead of just an Animated.Value. We don’t need to pass it any default, since we don’t need to make any assumptions about the starting value or interpolate it like we did with the rotation value in the last article.

this._gestureValue = new Animated.ValueXY();

Next, we need to create our instance of a PanResponder. We import PanResponder from 'react-native', and create it in right below our new _gestureValue. It takes a number of configuration options. This is straight out of the React Native documents:

A lot of these are unnecessary for what we’re going to be doing here, but we’ll just leave them for reference. The main ones we’re interested in here are onPanResponderMove and onPanResponderRelease.

onPanResponderMove gets called as whatever the element it is bound to gets interacted with. We can see that pretty quickly by adding some logging to it:

To bind our panResponder to an element we spread its panHandlers into it. In this case we will do that into the Animated.Image that represents our Jake like so:

Boot up your app with Remote JS Debugging turned on, then click inside the image of Jake and drag around.

So we can see that onPanResponderMove gets called a lot, and the gestureState that it gives us is an object with some movement data. gestureState contains the following data:

  • stateID - ID of the gestureState- persisted as long as there at least one touch on screen
  • moveX - the latest screen coordinates of the recently-moved touch
  • moveY - the latest screen coordinates of the recently-moved touch
  • x0 - the screen coordinates of the responder grant
  • y0 - the screen coordinates of the responder grant
  • dx - accumulated distance of the gesture since the touch started
  • dy - accumulated distance of the gesture since the touch started
  • vx - current velocity of the gesture
  • vy - current velocity of the gesture
  • numberActiveTouches - Number of touches currently on screen

Honestly, some of these I’ve never used, and in fact, most of the time dx and dy give me all that I need. I believe numberActiveTouches essentially refers to how many fingers are interacting with the object, so that is probably how you get things like pinch/zoom gestures working.

Let’s get rid of the logging, and take the dx /dy values and use them to update the X and Y values of our _gestureValue using setValue.

Then, simply apply that value to the transform rule on our Animated.Image, remembering that transform takes an array of objects each containing a single transform rule.

Refresh, and now you can drag our good good Jake around!

There is one clear issue here, right? Similar to the problem we had with our rotation starting back at 0, Jake jumps back to his origin at the beginning of each new gesture. We can fix this with some simple math. We just need to save the distance traveled at the end of each gesture and apply it to the beginning of each subsequent gesture.

To do this we create an object in our constructor to hold the offset: this._gestureOffset = { x: 0, y: 0 };

and then add it to the setValue method inside of onPanResponderMove:

Then at the end of each gesture we just update the offset. This will happen inside onPanResponderRelease:

And we’re done! You should have a nice, consistently draggable Jake! Give yourself a round of applause, you’re now… well you’re not an expert in React Native Animations, but you at least got your feet wet, and that’s sometimes the hardest part.

You can find the final code here.

I hope this has been helpful for you. Let me know if you have any questions or any suggestions on other topics to cover. Thanks!

Shane is a software engineer, home-brewer, bread baker, and writer living in Richmond, VA. Currently writing code @ RTSLabs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store