In this lesson we'll look at the PanResponder API in React Native and create a draggable view.  PanResponder is a high level wrapper around Gesture Responder System providing us with new and simpler object called gestureState to track the state of pan gestures.

https://app.egghead.io/api/v1/lessons/react-react-native-panresponder-basics/subtitles

React Native: PanResponder Basics

[00:00] Hey guys. In this video, we're going to talk about PanResponder, which is an API available from ReactNative that allows us to respond to panning gestures.

[00:09] Now, it's actually a wrapper around the lower level API called "GestureResponderSystem," and this being the higher level API, it's actually much easier to get started with.

[00:18] Our application here simply returns a view with a ref of Box and a style of StyleBox. That style positions a slightly transparent blue box in the upper left corner since it is positioned absolutely, and we haven't actually set a topper, left on that.

[00:35] To get started here, in our component will mount method, we're going to go ahead and create This.PanResponder. That's going to be equal to PanResponder.Create.

[00:45] Now, that's a function, takes in the object. Here, we're going to map a handful of the handlers available in PanResponder to some local handlers. These are actually called "PanHandlers." The first one that we're going to take a look at is OnStartShouldSet PanResponder.

[01:02] Now, this is really a very simple one that just says we should, in fact, respond to a pan gesture. We're just going to in-line our function here, and we are going to return a value of true.

[01:11] Next one we're going to look at is OnPanResponderGrant. We're going to create a local method for that called "HandleGrant."

[01:17] Now, HandleGrant is essentially our first entrance into responding to the gestures. Our touch has started, and we need to go ahead and let the user know that something is happening on the screen.

[01:33] We're going to say This.Ref.Box. In this application, we are actually going to be using setNativeProps, and I'll cover that in just a second, but all we are going to be doing is setting our background color to green.

[01:45] Now, the reason we're using setNativeProps rather than managing this in state is, when you are animating your UI, in ReactNative, using setNativeProps allows us to turn it over to the native interaction manager, which is going to deal with frequent renderings, much better than we can do that in JavaScript.

[02:05] This is just a performance measure. It's not required, but you will certainly get better performance out of setNativeProps than you will trying to manage this in-state, and re-rendering the view over, and over, and over again. To get these handlers into our view, we're simply going to use rest operator and pass in This.PanResponder.PanHandlers.

[02:21] Go ahead and save that, and try it out. When we click on it, we're getting our green, but we certainly can't drag our box around, and we also haven't ended the gesture. To deal with that, the first thing we're going to do is set up OnPanResponder moves.

[02:39] This'll be This.HandleMove. Go ahead and create that. Now, all of the handlers in PanRespond are taking the exact same signature, which is event and then gesture state. Since we're not going to be using state to manage the positioning, we're going to go ahead and create a couple of variables here in our companion mount.

[02:57] We're going to have a PreviousLeft, set that to zero, and we're going to have a This.PreviousTop. Also, set that to zero. Then, we're going to have This.BoxStyle, this will be a style object for our component. We'll say, "Left is equal to This.PreviousLeft and Top is equal to This.PreviousTop."

[03:22] Now in our handle move, we're going to say This.Style.Box.Left is equal to This.PreviousLeft, our GestureState DX value. Now, GestureState comes with a handful of properties. DX happens to be the distance that our gesture has accumulated on the X axis since the last time it reported it to us.

[03:46] I'm going to go ahead and copy that for our top value. This will be BoxStyle.Top. Previous top, and here we'll be doing DY. We're going to create one more method here called This.UpdatePosition. We're going to split this out, because we also want to use it in our component DidMount, here, we'll call that, we have that positioning once our component is mounted.

[04:13] We'll go ahead and create that method here. Now, what we're going to do is state This.Refs.Box, again, setNativeProps. We don't need the object, we are just going to pass in This.BoxStyle.

[04:28] Go ahead and save that, and then we can click, and we can actually drag. Now, one thing we haven't done is handle the end of our gestures, now, when I tries to grab it again, it jumps all the way back up there to the zero position.

[04:42] We need to handle how to release our gesture. For that, we are going to use OnPanResponderRelease. This will be This.Handle, we'll just call it end. We'll come down here and create that method. This will be HandleEnd, same signature as the move.

[05:03] First thing we are going to do is set our background back to it's original state, again, using setNativeProps, back to blue.

[05:10] Now, we're going to make sure that we keep track of our current state by bringing in the DX position, and adding it to our PreviousLeft. We'll do the same for Top, with our DY position.

[05:25] Then save that, now when we click, we get our green, and we can drag it around. We let go, we get back to our blue, and when we pick it back up, it's right where we left it.

React Native: PanResponder Basics

Share this video with your friends