Exercise (Video): Gestures Part 1

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

11 ratings

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

11 ratings

Course 3 of 4 in the Specialization Full-Stack Web Development with React

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

From the lesson

React Native Alerts, Animations, Gestures, and Persist Redux Store

In this module we look at enhancing the user experience through the use of animations and support for gesture-based interaction. We also look at persisting the redux state, and alerting the users

Exercise (Video): Gestures Part 115:44

Exercise (Video): Gestures Part 28:59

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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.

We're going to customize this message by saying

dish.name, to your favorites.

We're going to be asking this question in the alert box here.

From your knowledge of alert box,

you know that the third parameter is the set of buttons that are going to

be displayed in there and the last one is the cancelable.

Inside here, we're going to be specifying

the two buttons that we are going to be displaying there.

The cancel and the okay button.

The first one says, text, Cancel, onPress.

We can simply do a console log just to

indicate to the user that we did recognize that you canceled the operation.

We'll indicate style as

canceled and the second button

that I'm going to add in is an okay button.

When this okay button is pressed,

we will add this to our favorites.

Now to add this to our favorites we already have such a thing here.

I'm just going to go into this icon that we already had before.

I'm just going to copy this from there

because this is exactly how we add to our favorites.

Copy that and then I'm going to paste it into place here.

So, props favorite, if it is then do console.log already.

Favorite, otherwise, you'll see props.onPress.

That's the way we set up the alert button and then the cancelable is false here.

This is how we are responding to the pan gesture on the screen,

the right to left swipe gesture on the screen.

How do we add this into our response?

Going into our application,

we'll add this into a view.

A particular view should be designated as the one that will take

these pan handlers that we have just defined here.

This creates a set of pan handlers.

All these pan handlers, well,

the term pan handler brings its own connotations.

Well, anyway in this case the pan handler means that it's not

begging but it is actually responding to your pan gesture.

We're going to come in here and then add these pan handlers to this animatable view that

we have for the card in our render dish.

To this animatable view,

I'm going to add in the pan handlers by

saying,...panResponder.panHandlers.

All the handler functions

that we have implemented callback functions that we have

implemented will be added in to this view.

Now, on this view,

any gesture that you do,

the panhandlers are supposed to handle that gesture.

With this, let's save the changes and then go and take a look at

how this gesture works in our application.

Going to our application,

let's now see how the pan gesture works.

We'll go to menu and to a specific dish.

So, when the dish is rendered,

let's now do a pan gesture.

When I do the pan gesture,

you can see that the alert will pop up on the screen and then if I click on the cancel,

then the item will not be added into my list of favorites.

But on the other hand, if I do the gesture,

you had to be careful that the gesture starts and ends within this card.

If it goes out to the boundary then it will not recognize that.

We'll see, "Are you sure you want to add this to your favorite?"

We'll say, "Okay," and then you will immediately notice

that the item gets added into your list of favorites.

Let's try that on one more dish.

On this dish again,

let me do a pan gesture and you can see that the pan gesture is recognized

and then I can click on okay and you see that the dish gets added.

Now, the only that's left to right pan gesture is recognized.

If I do a right to left pan gesture, so as you can see,

if I do any other direction,

that gesture is not recognized.

Only that left to right gesture will be recognized here

because we are looking specifically to see if dx is less than 200.

Even if you do a short gesture like that,

it doesn't get recognized.

You need to do with a gesture sufficient distance,

200 pixels in this case before it can be recognized as a valid gesture.

A short touch here like that will not make any difference in invoking.

That's the reason why I gave that value of 204 for that.

The gesture should really mean

a long enough gesture to indicate that is what you're trying to do.

At that point, we pop up the alert box

to allow the user to add the dish to the favorites.

This we have seen how easy it is to add

a simple gesture recognition to our React Native application using the pan responder.

This is a good time for you to do a git commit with the message gestures Part 1.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play