Intro to Gestures in React Native

In this tutorial we’ll be learning to add gesture handling to a React Native app via PanResponder. In a previous tutorial I walked through building a basic JavaScript based navigator for React Native which will serve as the basis of this tutorial.

Getting Started

We’ll be using create-react-native-app to build our app. To get started run the following from your terminal:

create-react-native-app rn-js-navigator
cd rn-js-navigator

Replace App.js with

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.

PanResponder Setup

First we need to import PanResponder from React Native.

We’ll then go ahead and initialize a new pan responder on our component.

Navigator.js

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.

Navigator.js

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

The final Navigator.js is

You can find a running example on Snack.

I hope you found this example fun and valuable! If you’re interested in learning more about React Native checkout my free basics of React Native course! Or, if you’re further along, checkout my Production Ready React Native course!