nativescript-docs/gestures.md

nav-title	title	description	position
Gestures in NativeScript	UI: Gestures	Learn what are the touch gestures that NativeScript supports and how to make use of them.	15

Overview

Gestures, such as tap, slide, and pinch, allow users to interact with your app by manipulating UI elements on the screen.

In NativeScript, View—the base class for all NativeScript UI elements—has an observe method that lets you subscribe to gestures recognized by the UI element.

As first parameter of the observe method you pass the type of gesture you are interested in. The second parameter is a function that is called each time the specified gesture is recognized. The function arguments contain additional information about the gesture, if applicable. Calling the observe method returns a GestureObserver object that you will need later to stop detecting gestures.

• observe( type Number, callback Function... ) GesturesObserver
  • type - Number
  • callback - Function(args GestureEventData)
  • return - GesturesObserver

The next sections introduce you to all the gestures recognized by NativeScript:

• Tap
• Double Tap
• Long Press
• Swipe
• Pan
• Pinch
• Rotation

To learn how to stop receiving information about gestures, go to Stop Detecting Gestures.

Tap

Triggers the default functionality for a given item.

Action: Briefly touch the screen

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.tap, function (args) {
    console.log("Tap");
});

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
    console.log("Tap");
});

Double Tap

Scales up the object with a predefined percentage, centered around the double-tapped region. Keeping repeating the gesture continues to scale up until the maximum scale is reached.

In nested views, the gesture scales up the smallest targetable view or returns it to its original scale.

Also used for text selection.

Action: Two taps in a quick succession

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.doubleTap, function (args) {
    console.log("Double Tap");
});

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.doubleTap, function (args: gestures.GestureEventData) {
    console.log("Double Tap");
});

Long Press

Enters data selection mode. Allows you to select one or more items in a view and act upon the data using a contextual action bar. Avoid using long press for displaying contextual menus.

Action: Press you finger against the screen for a few moments

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.longPress, function (args) {
    console.log("Long Press");
});

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.longPress, function (args: gestures.GestureEventData) {
    console.log("Long Press");
});

Swipe

Navigates between views in the same hierarchy. Swipes are quick and affect the screen even after the finger is lifted off the screen.

Action: Swiftly slide your finger across the screen

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.swipe, function (args) {
    console.log("Swipe Direction: " + args.direction);
});

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.swipe, function (args: gestures.SwipeGestureEventData) {
    console.log("Swipe Direction: " + args.direction);
});

Pan

Scrolls overflowing content. Pans are executed more slowly and allow for more precision and the screen stops responding as soon as the finger is lifted off it.

Action: Press your finger down and immediately start moving it around

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.pan, function (args) {
    console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});

label.observe(gestures.GestureTypes.pan, function (args: gestures.PanGestureEventData) {
    console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});

Pinch

Zooms into content or out of content.

Action 1: Touch using two of your fingers, then move them towards each other Action 2: Touch using two of your fingers, then move them away of each other

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.pinch, function (args) {
    console.log("Pinch Scale: " + args.scale);
});

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.pinch, function (args: gestures.PinchGestureEventData) {
    console.log("Pinch Scale: " + args.scale);
});

Rotation

Rotates content clockwise or counterclockwise.

Action: Touch using two of your fingers, then rotate them simultaneously left or right

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.rotation, function (args) {
    console.log("Rotation: " + args.rotation);
});

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.rotation, function (args: gestures.RotationGestureEventData) {
    console.log("Rotation: " + args.rotation);
});

Stop Detecting Gestures

To stop receiving information about gestures, simply call the disconnect method of the observer object that you created when observe method is called. The tricky part here is that the gesture observer is stored in a map object which key is the gesture type and value is an array of gesture observers. This structure assumes (and actually supports) more than one callback for a given gesture (indeed not the most common scenario). To access this structure view has a method getGestureObservers(gestureType) which returns an array of gesture observers for that gesture type.

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.tap, function (args) {
    console.log("Tap");
});
var tapObserver = label.getGestureObservers(gestures.GestureTypes.tap)[0];
tapObserver.disconnect();

var label = new labelModule.Label();
label.observe(gestures.GestureTypes.tap, function (args: gestures.GestureEventData) {
    console.log("Tap");
});
var tapObserver = label.getGestureObservers(gestures.GestureTypes.tap)[0];
tapObserver.disconnect();