Intro to Gestures in React Native
In this tutorial we’ll be learning to add gesture handling to a React Native app via
We’ll be using
create-react-native-app to build our app. To get started run the following from your terminal:
and then create a new file,
Navigator.js, with the following contents
We can now setup the gestures. The only gesture we’re going to have is, when you’ve got multiple screens in the stack, you can swipe back to the previous one.
First we need to import
PanResponder from React Native.
We’ll then go ahead and initialize a new pan responder on our component.
Let’s walk through what each of these functions does before we start defining them.
onMoveShouldSetPanResponder: This determines whether our pan responder should actuallly do anything. For this example we want the pan responder to be enabled on all but the first screen and only when the gesture started in the left most 25% of the screen.
onPanResponderMove: When the pan responder is enabled and the move is detected, what should happen? This one gets called a lot.
onPanResponderTerminationRequest: If something else wants to take over gestures, should it be allowed to?
onPanResponderRelease: When the gesture is released/completed, what should happen? For us, if the gesture took up more than 50% of the screen we'll complete it, otherwise we'll keep the user on the current screen.
onPanResponderTerminate: When the gesture is terminated (meaning another component became the responder) what should we do? We'll reset to the current screen.
Finally, we need to actually apply the pan handlers to our container component.
Now to start the implementation.
First we check if we’re on the first screen by analyzing
this.state.stack, which represents the currently active screens. We then check where the gesture first started by looking at
evt.nativeEvent.pageX and see if it's within the left most 25% of the screen.
We then check whether or not we should actually start responding to the gesture! We should only respond if we’re on screen 2+ and if the gesture started in the left quarter of the screen.
Now, once the pan responder has been enabled we’ll update
this._animatedValue, which drives our offset, to be whatever the value that is provided.
gestureState.moveX is going to be wherever the user's finger is on the x axis.
You can actually go ahead and test it now. It’s working but when you let go/stop the gesture the screen just sticks there.
To fix that we need to implement
onPanResponderRelease. In this function we're going to check if wherever the user released the screen was in the right 50% of the screen. If it was then we'll call the
this.handlePop function to finish the animation and pop the screen off the stack.
If the screen wasn’t in the right most 50% then we’ll reset the screen offset to 0.
And when the pan responder is taken over we’ll reset the screen to a 0 offset.
All of this leaves us with the following
You can find a running example on Snack.