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 on and off methods that let you subscribe or unsubscribe to all events and gestures recognized by the UI element.

As the first parameter, you pass an on or off method and the type of gesture you want to track. 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.

  • on( type Number | name String | names Comma separated String, callback Function... **)

    • type - Number | name - String | names - Comma separated String
    • callback - Function(args GestureEventData)
  • off( type Number | name String | names Comma separated String, callback Function... **)

    • type - Number | name - String | names - Comma separated String
    • callback - Function(args GestureEventData)

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

Tap

Action: Briefly touch the screen.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.tap, function (args) {
    console.log("Tap");
});
import { GestureTypes, GestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.tap, function (args: GestureEventData) {
    console.log("Tap");
});

Double Tap

Action: Two taps in a quick succession.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.doubleTap, function (args) {
    console.log("Double Tap");
});
import { GestureTypes, GestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.doubleTap, function (args: GestureEventData) {
    console.log("Double Tap");
});

Possible implementation:

  • Scale up the object with a predefined percentage, centered around the double-tapped region. If a user keeps repeating the double tap gesture, continue to scale up until the maximum scale is reached.
  • Scale up the smallest targetable view or returns it to its original scale in nested views.
  • Select text.

Long Press

Action: Press your finger against the screen for a few moments.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.longPress, function (args) {
    console.log("Long Press");
});
import { GestureTypes, GestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.longPress, function (args: GestureEventData) {
    console.log("Long Press");
});

Possible implementation: Select one or more items in a view and act upon the data using a contextual action bar. Enter data selection mode. Avoid using long press for displaying contextual menus.

Swipe

Action: Swiftly slide your finger across the screen. Swipes are quick and affect the screen even after the finger is lifted off the screen.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.swipe, function (args) {
    console.log("Swipe Direction: " + args.direction);
});
import { GestureTypes, SwipeGestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.swipe, function (args: SwipeGestureEventData) {
    console.log("Swipe Direction: " + args.direction);
});

Possible implementation: Navigate between views in the same hierarchy.

Pan

Action: Press your finger down and immediately start moving it around. Pans are executed more slowly and allow for more precision and the screen stops responding as soon as the finger is lifted off it.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.pan, function (args) {
    console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});
import { GestureTypes, PanGestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
label.on(GestureTypes.pan, function (args: PanGestureEventData) {
    console.log("Pan deltaX:" + args.deltaX + "; deltaY:" + args.deltaY + ";");
});

Pinch

Action: Touch the screen using two of your fingers, then move them towards each other or away from each other.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.pinch, function (args) {
    console.log("Pinch Scale: " + args.scale);
});
import { GestureTypes, PinchGestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.pinch, function (args: PinchGestureEventData) {
    console.log("Pinch Scale: " + args.scale);
});

Possible implementation: Zoom into content or out of content.

Rotation

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

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.rotation, function (args) {
    console.log("Rotation: " + args.rotation);
});
import { GestureTypes, RotationGestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.rotation, function (args: RotationGestureEventData) {
    console.log("Rotation: " + args.rotation);
});

Touch

Action: A finger action was performed.

This is a general purpose gesture that is triggered whenever a pointer (usually a finger) has performed a touch action (up, down, move or cancel). TouchGestureEventData provides information about all the pointers currently on the screen and their position inside the view that triggered the event.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(gestures.GestureTypes.touch, function (args) {
    console.log("Touch: x: " + args.getX() + " y: " + args.getY());
});
import { GestureTypes, TouchGestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on(GestureTypes.touch, function (args: TouchGestureEventData) {
    console.log("Touch: x: " + args.getX() + " y: " + args.getY());
});

Subscribing to Multiple Gestures and Events

Since the release of NativeScript 1.3, when subscribing you can use gestures names, comma separated gestures names and/or even mix with events.

var gestures = require("ui/gestures");
var labelModule = require("ui/label");
var label = new labelModule.Label();
label.on("loaded, tap, doubleTap, longPress", function (args) {
    console.log("Event: " + args.eventName + ", sender: " + args.object);
});
import { GestureEventData } from "ui/gestures";
import labelModule = require("ui/label");
var label = new labelModule.Label();
label.on("loaded, tap, doubleTap, longPress", function (args: GestureEventData) {
    console.log("Event: " + args.eventName + ", sender: " + args.object);
});

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.