Gestures

Users can interact with UI components using gestures. NativeScript supports the following gestures:

• tap
• doubleTap
• longPress
• swipe
• pan
• pinch
• rotation
• touch

All gesture events, except tap, have the following data in common:

Tap gesture ​

Action: Briefly touching a component.

Tap gesture event data ​

The tap gesture event only offers the eventName and object properties.

The TouchManager offers a convenient and easy-to-use API including animation abilities that you can apply to the tap gesture (individually or even globally across your entire app for any wired tap gesture/event).

Here are some example tap event bindings:

Double tap gesture ​

Action: Two taps on a component in quick succession.

Double tap event data ​

Long press gesture ​

Action: A component is pressed for a few moments.

Long press gesture event data ​

• state : The state of the pressing.

Swipe gesture ​

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

Possible usage: Navigate between components in the same hierarchy.

Swipe gesture event data ​

• direction : Direction of the swipe gesture.

Available directions:

• right = 1,
• left = 2,
• up = 4,
• down = 8,

Pan gesture ​

Action: A pan gesture occurs when a user presses down on a component and immediately starts moving it around. Pans are executed more slowly and allow for more precision. The event stops emitting as soon as the finger is lifted off it.

Pan gesture event data ​

Pinch gesture ​

Action: A user touches a component with two fingers, then moves them towards or away from each other.

Pinch gesture event data ​

Possible usage: Zoom in or out of content.

Rotate gesture ​

Action: A user touches a component with two fingers, then rotates them simultaneously left or right.

Rotate gesture event data ​

• rotation (type: number):

Touch gesture ​

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).

Touch gesture event data ​

Subscribing to Multiple Gestures ​

You can handle multiple gestures as follows:

<Button  text="TAP" class="button" longPress="{{ onLongPress }}" swipe="{{ onSwipe }}" tap="{{ onTap }}"  doubleTap="{{ onDoubleTap }}"/>

Gesture Manipulations ​

In some scenarios, you may want to disable user interaction or create more complex UI interactions where some gestures are passing through the parents of the actual interactive zone. NativeScript provides some specific properties for handling similar cases as follows:

• isUserInteractionEnabled - Gets or sets a boolean value indicating whether the user can interact with the view. Does not affect the appearance of the view. The default value is true.

• isEnabled - Gets or sets a boolean value indicating whether the view is enabled. Affects the appearance of the view. The default value is true.

GestureStateTypes ​

• cancelled = 0
• began = 1
• changed = 2
• ended = 3

The Pointer interface ​