NativeScript Angular

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

Action: Briefly touch the screen.

Tap in HTML

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

Tap in TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./tap.component.html"
})
export class TapExampleComponent {
    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.

Double Tap in HTML

<GridLayout class="bg-primary p-15 m-15" width="200" height="200" (doubleTap)="onDoubleTap($event)">
    <Image class="img-rounded" src="res://icon" stretch="none"></Image>
</GridLayout>

Double Tap in TypeScript

import { Component } from "@angular/core";
import { GestureEventData } from "tns-core-modules/ui/gestures";
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";

@Component({
    moduleId: module.id,
    templateUrl: "./double-tap.component.html"
})
export class DoubleTapExampleComponent {
    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.

Touch in HTML

<GridLayout (touch)="onTouch($event)" 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>
<Label [text]="'Box touched at Y: ' + coordY" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>

Touch in TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./touch.component.html"
})
export class TouchExampleComponent {
    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.

Swipe in HTML

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

Swipe in TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./swipe.component.html"
})
export class SwipeExampleComponent {
    public direction: number;

    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.

Long press in HTML

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

Long Press in TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./long-press.component.html"
})
export class LongPressExampleComponent {
    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.

Pan in HTML

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

Pan in TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./pan.component.html"
})
export class PanExampleComponent {
    public deltaX: number;
    public deltaY: number;
    public state: number;

    onPan(args: 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.

Pinch in HTML

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

Pinch in TypeScript

import { PinchGestureEventData } from "tns-core-modules/ui/gestures";
@Component({
    moduleId: module.id,
    templateUrl: "./pinch.component.html"
})
export class PinchExampleComponent {
    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.

Rotation in HTML

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

Rotation in TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./rotation.component.html"
})
export class RotationExampleComponent {

    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