As we have learnt in the previous lecture,
gesture-based user interaction is a very natural thing on mobile devices.
We have seen that the PanResponder provides us with an easy way of adding
gesture recognition in our React Native application.
So in this exercise,
we will add in gesture support using the PanResponder.
Going to our project,
let's open the dish detail component.
Into the dish detail component from React Native,
I'm going to import also the alert and the PanResponder.
Then, going down into our code,
we're going to be adding in the support
for the gesture recognition using the PanResponder.
So going into the render dish,
let me add in a function called
recognizeDrag which will receive
a parameter and then recognize that the user has performed a drag gesture,
a right to left swipe gesture.
Now, how do we recognize that?
I'll come to that in a minute.
We'll also add in a function called panResponder
by creating the panResponder in
PanResponde.create within which we will
supply the various callbacks for the panResponder.
There are two callbacks that I'm going to implement here.
Let me discuss the details now.
So in here, they'll say onStartShouldSetPanResponder.
So, that's the first callback function
that I'm going to implement onStartShouldSetPanResponder.
This function will be called at the time when the,
or the user's gesture begins on the screen.
So, at this point what I will do is to set up a function which will
return true to indicate that this PanResponder is going
to respond to that pan gesture here.
So, we will return true to indicate that this
will pick up the pan gesture and start responding to it
and this callback receives
the interaction event and the gestureState as the two parameters.
The gestureState contains information that we can use to recognize various aspects
about the actual pan gesture that the user does
on the screen and we'll look at the details of that in a minute.
Second callback that I'm going to implement is onPanResponderEnd.
So this one will be invoked when the user
lifts their finger off the screen after performing the gesture.
So, at this point also we will receive the gestureState as
the parameter along with the event for this function.
So inside this function, what are we going to do?
Now, we need to recognize that the gesture
was done and also recognize what kind of gesture it is.
So here, based upon the gestureState,
I will be able to guess what kind of gesture the user has just perform.
So, this is where I will use the recognizeDrag function.
Then to this recognizeDrag function,
I will pass in the gestureState as the parameter here.
So, when this is passed in as the parameter,
then we're going to respond to
that and then here we will return a true at the completion of the panResponderEnd here.
Now, what this function will do is to
recognize the specific gesture that we are interested in.
So here, we're going to pass in the gestureState as the parameter here.
Now from the gestureState we can extract those properties that are of interest.
So, the gestureState object itself contains similar properties from which I am going to
extract out the four properties that I'm going to use to recognize the gesture.
So, we'll take and moveX,
moveY, dx and dy.
So, what do these four correspond to?
MoveX is the latest screen coordinates of
the recently moved touch gesture and
similarly moveY is the screen coordinates of the recently moved touch,
the X and Y coordinates of that point.
Now, the dx is the accumulated distance of
the gesture since the touch started along the X direction.
So, if you touch the screen at one point and then you
drag your screen across to create the gesture and then lift the screen.
The distance that your touch gesture drags along the screen is given by dx and dy.
Dx along the X axis and dy along the Y axis.
Now, in this case,
I am going to recognize only the right to left gesture on the screen.
So, to recognize the right to left gesture on the screen,
what I will do is to just look at the dx value.
If the dx value is less than minus 200 meaning
that it has accumulated a distance of 200 but in the right to left direction,
so in the negative direction.
So, the way the distances are measured is
the coordinates always are measured with 00 at the top-left corner.
So a distance traveled in the negative direction will have a negative value here.
So if dx is less than 200,
then I will return a true
to indicate that indeed this was a right to left pan gesture that the user did.
Now, along the Y direction,
we don't really care.
We are only interested if the user has done
sufficient distance of the gesture on the screen along the X direction.
Otherwise, you will return a false.
So, this is a simple way of recognizing one gesture,
the right to left gesture on the screen here.
So, when this gesture is recognized,
when we call this function,
recognized gesture and pass in the gestureState.
This will return a true if this is a swipe left gesture that the user has done.
If that is the case then we're going to interpret
that gesture to mean that the user wants to
add this particular dish to his or her list of favorite dishes.
So, that's where we will generate an alert,
so I'm going to reuse the alert there.
Then for the alert,
we will add in a title as Add to
Favorites and then the second parameter
is the message that the alert box displays will say,
"Are you sure you wish to add.