Gestures

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.

List of supported gestures in NativeScript:

Tap
Double Tap
Long Press
Swipe
Pan
Pinch
Rotation
Touch

Tap

Action: Briefly touch the screen.

XML
JavaScript
TypeScript

<GridLayout tap="onTap" class="bg-primary p-15 m-15" width="200" height="200">
</GridLayout>

function onTap(args) {
    console.log("Tap!");
    console.log(`Object that triggered the event: ${args.object}`);
    console.log(`View that triggered the event: ${args.view}`);
    console.log(`Event name: ${args.eventName}`);
}
exports.onTap = onTap;

import { GestureEventData } from "tns-core-modules/ui/gestures";

export function onTap(args: GestureEventData) {
    console.log("Tap!");
        console.log("Object that triggered the event: " + args.object);
        console.log("View that triggered the event: " + args.view);
        console.log("Event name: " + args.eventName);
}

Improve this document

Demo Source

Double Tap

Action: Two taps in a quick succession.

JavaScript
TypeScript

function onDoubleTap(args) {
    console.log(`Object that triggered the event: ${args.object}`);
    console.log(`View that triggered the event: ${args.view}`);
    console.log(`Event name: ${args.eventName}`);
}
exports.onDoubleTap = onDoubleTap;

import { GestureEventData } from "tns-core-modules/ui/gestures";

export function onDoubleTap(args: GestureEventData) {
    console.log("Object that triggered the event: " + args.object);
    console.log("View that triggered the event: " + args.view);
    console.log("Event name: " + args.eventName);
}

Improve this document

Demo Source

Touch

Action: A finger action was performed.

XML
JavaScript
TypeScript

<GridLayout touch="onTouch" class="bg-primary p-15 m-15" width="200" height="200" ></GridLayout>
<Label text="{{'Box touched at X: ' + coordX}}" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"/>
<Label text="{{'Box touched at Y: ' + coordY}}" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"/>

function onTouch(args) {
    console.log(`Object that triggered the event: ${args.object}`);
    console.log(`View that triggered the event: ${args.view}`);
    console.log(`Event name: ${args.eventName}`);
    console.log(`Touch action (up, down, cancel or move) ${args.action}`);
    console.log(`Touch point: [ ${args.getX()} ,  ${args.getY()} ]`);
    console.log(`activePointers: ${args.getActivePointers().length}`);
}
exports.onTouch = onTouch;

import {
    TouchGestureEventData
} from "tns-core-modules/ui/gestures";

export function onTouch(args: TouchGestureEventData) {
    console.log("Object that triggered the event: " + args.object);
    console.log("View that triggered the event: " + args.view);
    console.log("Event name: " + args.eventName);
    console.log("Touch action (up, down, cancel or move)" + args.action);
    console.log("Touch point: [" + args.getX() + ", " + args.getY() + "]");
    console.log("activePointers: " + args.getActivePointers().length);
}

Improve this document

Demo Source

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.

XML
JavaScript
TypeScript

<GridLayout swipe="onSwipe" class="bg-primary p-15 m-15" width="200" height="200"></GridLayout>

function onSwipe(args) {
    console.log("Swipe!");
    console.log(`Object that triggered the event: ${args.object}`);
    console.log(`View that triggered the event: ${args.view}`);
    console.log(`Event name: ${args.eventName}`);
    console.log(`Swipe Direction: ${args.direction}`);
}
exports.onSwipe = onSwipe;

import { SwipeGestureEventData } from "tns-core-modules/ui/gestures";

export function onSwipe(args: SwipeGestureEventData) {
    console.log("Swipe!");
    console.log("Object that triggered the event: " + args.object);
    console.log("View that triggered the event: " + args.view);
    console.log("Event name: " + args.eventName);
    console.log("Swipe Direction: " + args.direction);
}

Improve this document

Demo Source

Long Press

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

XML
JavaScript
TypeScript

<GridLayout class="bg-primary p-15 m-15" width="200" height="200" longPress="onLongPress">
</GridLayout>

function onLongPress(args) {
    console.log(`Object that triggered the event: ${args.object}`);
    console.log(`View that triggered the event: ${args.view}`);
    console.log(`Event name: ${args.eventName}`);
}
exports.onLongPress = onLongPress;

import { GestureEventData } from "tns-core-modules/ui/gestures";

export function onLongPress(args: GestureEventData) {
    console.log("Object that triggered the event: " + args.object);
    console.log("View that triggered the event: " + args.view);
    console.log("Event name: " + args.eventName);
}

Improve this document

Demo Source

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.

XML
JavaScript
TypeScript

<GridLayout pan="onPan" class="bg-primary p-15 m-15" width="200" height="200" ></GridLayout>

function onPan(args) {
    // args is of type PanGestureEventData
    console.log(`Object that triggered the event: ${args.object}`);
    console.log(`View that triggered the event: ${args.view}`);
    console.log(`Event name: ${args.eventName}`);
    console.log(`Pan delta: [ ${args.deltaX}, ${args.deltaY} ] state: ${args.state}`);

}
exports.onPan = onPan;

import { PanGestureEventData } from "tns-core-modules/ui/gestures";

export function onPan(args: PanGestureEventData) {
    // args is of type PanGestureEventData
    console.log("Object that triggered the event: " + args.object);
    console.log("View that triggered the event: " + args.view);
    console.log("Event name: " + args.eventName);
    console.log("Pan delta: [" + args.deltaX + ", " + args.deltaY + "] state: " + args.state);

}

Improve this document

Demo Source

Pinch

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

XML
JavaScript
TypeScript

<GridLayout pinch="onPinch" class="bg-primary p-15 m-15" width="200" height="200"></GridLayout>

function onPinch(args) {
    console.log(`Object that triggered the event: ${args.object}`);
    console.log(`View that triggered the event: ${args.view}`);
    console.log(`Event name: ${args.eventName}`);
    console.log(`Pinch scale: ${args.scale} state: ${args.state}`);
}
exports.onPinch = onPinch;

import { PinchGestureEventData } from "tns-core-modules/ui/gestures";

export function onPinch(args: PinchGestureEventData) {
    console.log("Object that triggered the event: " + args.object);
    console.log("View that triggered the event: " + args.view);
    console.log("Event name: " + args.eventName);
    console.log("Pinch scale: " + args.scale + " state: " + args.state);
}

Improve this document

Demo Source

Rotation

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

XML
JavaScript
TypeScript

<GridLayout rotation="onRotation" class="bg-primary p-15 m-15" width="200" height="200"></GridLayout>

function onRotation(args) {
    console.log(`Object that triggered the event: ${args.object}`);
        console.log(`View that triggered the event: ${args.view}`);
        console.log(`Event name: ${args.eventName}`);
        console.log(`Rotate angle: ${args.rotation} state: ${args.state}`);
}
exports.onRotation = onRotation;

import { RotationGestureEventData } from "tns-core-modules/ui/gestures";

export function onRotation(args: RotationGestureEventData) {
    console.log("Object that triggered the event: " + args.object);
        console.log("View that triggered the event: " + args.view);
        console.log("Event name: " + args.eventName);
        console.log("Rotate angle: " + args.rotation + " state: " + args.state);
}

Improve this document

Demo Source

Events

Each interactive view in NativeScript can access the gesture events it will raise on user interaction.

Name	Description
`tap`	Emitted when the view is tapped.
`doubleTap`	Emitted when the view is double tapped.
`touch`	Emitted when the view is touched. Returns action state from `TouchGestureEventData`
`longPress`	Emitted when the view is tapped and hold. Returns `state`.
`pan`	Emitted when the view is paned. Rewturns `deltaX` and `deltaY` coordinates as numbers.
`pinch`	Emitted when the view is pinched. Returns `scale`
`swipe`	Emitted when the view is swiped left/right. Returns `direction` as `SwipeDirection`

API References

Name	Type	API Reference Link
`tns-core-modules/ui/gestures`	`Module`	https://docs.nativescript.org/api-reference/modules/_ui_gestures_
`GestureTypes`	`enum`	https://docs.nativescript.org/api-reference/enums/_ui_gestures_.gesturetypes
`GestureStateTypes`	`enum`	https://docs.nativescript.org/api-reference/modules/_ui_gestures_
`SwipeDirection`	`enum`	https://docs.nativescript.org/api-reference/modules/_ui_gestures_
`GestureEventData`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.gestureeventdata
`GestureEventDataWithState`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.gestureeventdatawithstate
`PanGestureEventData`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.pangestureeventdata
`PinchGestureEventData`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.pinchgestureeventdata
`RotationGestureEventData`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.rotationgestureeventdata
`SwipeGestureEventData`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.swipegestureeventdata
`TouchGestureEventData`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.touchgestureeventdata
`Pointer`	`interface`	https://docs.nativescript.org/api-reference/interfaces/_ui_gestures_.pointer

Native Component

Android	iOS
android.widget.Button	UIButton

NativeScript Core