React Native: Create a Swipe Panel

[00:00] Hi, guys. In this video, we're going to talk about creating something practical using PanResponder as well as layout animation. In a previous video, we created this demonstration. It allows us to drag a view all around our application. So, what we're going to create here is a slide out menu that slides out from the left when we pan right.

[00:19] The first thing we're going to do is implement another pan handler called OnMoveShouldSetPanResponder. We're going to map that to something called This.Handle, start. We're actually going to map our OnStartShouldSetPanResponder to the same method.

[00:37] We go ahead and create that, here. And here, we want to make sure that our DX from our gesture state is greater than our DY. This just means that we've got a generally horizontal swiping. When you're dealing with touch, people aren't necessarily going to swipe perfectly to the left are perfectly to the right, but this would be an indicator that it's predominantly to the left or the right.

[01:04] We're also going to say that our DX value is greater than 10. We're going to return that, and now when we try to swipe up and down, it doesn't respond. If we try to swipe right, it works, and we've handed it over to HandleMove. To keep our user from dragging an up-and-down everywhere that we had previous top or top value, we're just going to strip it out, save that.

[01:38] When we drag, we can only drag left or right. We're also going to remove the green background. For this particular application, we're actually going to dealing with the entire view parts, width and heights. I'm bringing in dimensions as well as assigning a window to Dimensions.GetWindow.

[01:56] I'm going to have a couple of variables here. First one's going to be menu width, this'll be the width of our menu that slides out from the side. I'm going to say that's Window.Width, and we'll just make that half of the window width. We're going to have another value here called ForceMin, and this is going to be a value that represents, once we've dragged to this point, we're going to go ahead and fully open in or fully close it.

[02:22] We'll just make that half of our menu width. Let's make it a third. I'm going to go ahead and drop in some style here. We're going to have a view style that's the full width and height of the view, and the side value that's got a position of absolute, a background color of a dark gray, and then a width equal to menu width.

[02:46] Here, in our box, we're going to go ahead and set this up to be Styles.ViewStyle. We're going to go ahead and wrap this in another view, and we're going to drop in a text element just so we can see what we've got here. Then for our side menu, we're going to have another view. It's going to have a style of Styles.ViewStyle, as well as Styles.Side.

[03:12] We'll drop another bit of text in there. So now, our box has become this large, white panel, and if we slide, we can see that the side venue is actually just behind it. We're going to go ahead and kill the blue background as well. So, we need to deal with the fact that we can still just drag this guy wherever we want.

[03:33] We're going to go ahead and set up an initial state on our component with a value of open set to false. Then here, we need to deal with a few things. The first one's going to be whether or not we are panning to the right, since we don't want to be able to pan to the right if it's already open.

[03:51] We'll set up a variable called panning right, and that's going to be equal to GestureState.DX is greater than 10. If we're panning right and our state of open is true, we're just going to return right here since we don't want anything to happen. Likewise, if we're not panning right, we're panning left, and it's not open, we're also going to return.

[04:20] If you try that out, you can see that once we get to the fully open menu, our entire view does not drag any further. Right now we can't close it, so we need to do with that as well. So here, after we've set our left value, we're going to use another math absolute on our GestureStates.DX.

[04:37] We're going to say if that's greater than ForceMin, which we created above and grab our open value from our state, set it to whatever the opposite of that is going to be, go ahead and set our state of Open to that new value. Then our This.BoxStyle.Left is going to be equal to, if open is true, menu width, otherwise zero.

[05:04] We're going to save that and try it out. You can see, once we get to about 33 percent, our menu snaps open. One thing we're not dealing with is the end, so we can get really weird states if I just end right here. So to deal with that, we're actually going to use the exact same code we used in HandleMove, and we're going to set this to This.State.Open.

[05:28] We're going to call our This.Update position, and then we're going to set our previous left to our current box style's left value. Now, you can see if we drag right to about a third of the width of our side menu, it snaps open. if we continue dragging right, nothing is happening. If we drag left to about a third, it snaps shut.

[05:56] All this snapping open and snapping shut is not super pretty. What we're going to do to solve that is bring in layout animation, and right here in our update position, we are going to say LayoutAnimation.ConfigureNext. We're going to set that to the preset of ease in, ease out.

[06:16] Now, when we drag it out we get a little bit of an animation there. It's much smoother than it was a moment ago. If we get to a third, it goes ahead and swipes fully open. As we close, when we get to a third, it swipes fully closed, and it's a nice, smooth animation.

[06:31] We've essentially created our swipe out from the left panel. This panel actually has a lot of re-use. I'm going to go ahead and jump to another version here. This is using the exact same code that we just used, with a handful of modifications, we can create a little swipe to delete action here on a bunch of items.