Join Samer Buna for an in-depth discussion in this video Preparing the PanHandlers, part of React Native Essential Training.
- [Instructor] The first thing we need to do to implement the swiping of the deal images feature is the make the active image index part of the component state, because we want to change the image index and have the image changes. So let's do that first. I'll name it imageIndex, and this starts from zero, and in here, instead of hard coding the first element here, we'll read the image from this.state.imageIndex.
Let me format everything. So this should not really change anything except now we have the ability of changing the image index and that will change the image. In fact, we can test that from the developer tool. So I'll look for the detail view, go in here, change the image index to one, and see the image changes. The next thing we can do is to define the PanResponder. So from React Native, we'll import PanResponder. We'll also Animated, because we know we need to use Animated as well.
So we have PanResponder and Animated. And we'll create a PanResponder object. I'm going to name it imagePanResponder. This is a PanResponder.create call, and it receives a configuration object. So we'll place this imagePanResponder on the component instance itself. This is just a preparation step. We still have to pass the handlers to the image itself, but let's include these handlers that we are interested in.
The first one is the onStartShouldSetPanResponder. So we'll include that in here. This is a function, and I just want to make it return true and make this PanResponder active. We also need the onPanResponderMove. The onPanResponderMove is a function that receives the event, and the gesture state. And for now, let's just console log moving, just like that. We also need the onPanResponderRelease.
That's also a function that receives the event and the gesture state. And let's console log released. Very good. So this PanResponder is now usable. I'll go ahead and pass it to our image in here. What we need to pass is this.imagePanResponder.panHandlers, and this is an object that has all the panHandlers. So we're going to spread this object into this image component.
So here's what's going to happen. I'm going to try and swipe this image. Now we did not do any animation yet, so nothing is going to change on the screen, but we will see the console log lines when I move my cursor on this image and when I release my cursor from that image. So check it out. Moving, moving, moving, released. And it will also work on the other direction. Moving, moving, moving, released. So while the user's finger is moving, we get this onPanResponderMove, and this actually gives us the dx in this particular case that is super important.
So let's check that out. Now, when I touch and move my finger to the left, I get the measurement in pixels, as you can see, and it's in the negative when we go left. It will be in the positive when we go right, just like that. So we're ready to start animating this image as we detect a swipe left or right gesture. We'll do that in the next video.
- Hello React Native on iOS and Android
- Styling React Native components
- Platform APIs
- Building a simple game app and a data-driven app
- Using the Fetch API
- Creating an animation loop
- Testing on Android
- Changing an app logo and a splash screen
- Using TestFlight with internal testers