Using the Gesture Handler in React Native

Replacing the Gesture Responder System with the Gesture Handler.

Credit https://undraw.co/

React Native Gesture handler makes it easy for us to deal with gestures in react-native by providing an easy declarative API. I personally use this library every day and enjoy saving time and not worrying about the details of how it actually works.

Tip:Use Bit to share and reuse React components across different projects. Collaborate over shared components as a team to build apps faster together. Let Bit do the heavy lifting so you can easily publish, install and update your individual components without any overhead. Click here to learn more .

Example: React components shared on bit.dev

PanGestureHandler

PanGestureHandler is a container or wrapper we can use to wrap a component (EX: View `) to handle and track the gesture movements on/inside that element. It’s easy to use. It’s similar to PanResponde that comes out of the box with React Native.

In this tutorial, we’ll try out PanGestureHandler with a small example code. We’ll draw a circle and track gestures on that element.

Let’s start by importing PanGestureHandler from react-native-gesture-handler

The code will look something like this:

Now, Let’s continue by wrapping this component with PanGestureHandler to get the Gesture movements.

<PanGestureHandler>   <View style={[styles.circle]} /></PanGestureHandler>

PanGestureHandler has many props but for now, we only need to use OnGestureEvent props to pass the gesture event, a callback function.

It looks like code below :

If you try to move the gesture on the top of the circle you should see the onGestureEvent will be called and will pass the event info to the callback we set.

(You can use your favorite debugger to see the logs : I’m using chrome dev tools for that)

Cool :grinning:, on the console, we are getting the object below from the gesture event.

Basically, the data we get represents the position and location of the touch on the screen for example translateY translateX ` of the touch.

Based on this event we will try to do something fun with this data we get from the gesture event we are going to move the circle.

The code looks like below.

Alongside to PanGestureHandler we have also PinchGestureHandler it’s my favorite one it can be used to detect multiple touches on the screen at the same time or basically called the magicTap for example, when you use two fingers to scale a picture most of the apps have this feature that is mostly used to move the picture using the gesture movements well in the demo we have here we are using the same circle component you can use a picture as well.

Let have a look at the code.

We first import PinchGestureHandler and use it as a wrapper for the component we want to track the gesture or the pinc event on.

<PinchGestureHandler onGestureEvent={this.handleGesture} onHandlerStateChange={this._onGestureStateChange}><Animated.View style={[styles.circle,scaleStyle]} /></PinchGestureHandler>

It takes the same props as PanGestureHandler the only difference is the properties we get from this event are different. here are the properties we get from with PinchGestureHandler :point_down::

So we use these properties to perform some kind of visual feedback while the touch is moving on the screen in our case we pick the scale property and use it directly to scale the circle by adding scale element to the style in order to perform the scale transform on the circle.

let scaleTransformStyle = {
transform:[
{ perspective: 200 },
{
 scale :  this.scale
} ]
 }
<Animated.View style={[styles.circle,scaleTransformStyle]} />

And the result will be like this.

One of the other cool elements from react-native-gesture-handler is the Swipeable element it makes it easy for us to create a swipeable list with less code.

We are going to create a simple demo using Swipeable we will create a list of items with FlatList .

The list will look like below the example is just for the demonstration .

FlastList :

And we have here the ListItem that contain Swipeable component:

Swipeable take a bunch of props:

onSwipeableLeftOpen
onSwipeableRightOpen
renderLeftActions
renderRightActions

And here After we add Swipeable as a wrapper to every ListItem.

The full code of the demo above: