Help prepare for 2025 → Answer 8 simple questions on our Fall Survey
Open Survey

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

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

NameTypeDescription
eventNamestringThe name of the event.
objectObservableThe Observable instance that triggered the event.
typeGestureTypesThe type of the gesture
viewPartial<View>The Partial<View> instance that triggered the event. This is the same ui component as return by object
iosUIGestureRecognizer Gets the underlying native iOS specific UIGestureRecognizer.
androidandroid.view.GestureDetectorGets the underlying native android specific gesture detector

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 ​

NameTypeDescription
getPointerCount()numberGets the number of pointers in the event.
getX()numberGets the x coordinate of the event inside the view that triggered the event.
getY()numberGets the y coordinate of the event inside the view that triggered the event.

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 ​

NameTypeDescription
deltaXnumberDistance , in DIPs, moved in the x direction from previous position.
deltaYnumberDistance , in DIPs, moved in the x direction from previous position.
stateGestureStateTypesIndicates the state of panning. See GestureStateTypes for available states.

Pinch gesture ​

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

Pinch gesture event data ​

NameTypeDescription
statenumberThe state of the pinch gesture.
scalenumber
getFocusX()number
getFocusY()number

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 ​

NameTypeDescription
action'up' | 'move' | 'down' | 'cancel'Gets action of the touch
getActivePointers()Array<Pointer>Gets the pointers that triggered the event.
Note: In Android there is aways only one active pointer.
[Pointer] is an object representing a finger (or other object) that is touching the screen.
getAllPointers()Array<Pointer>Gets all pointers.
getAX()number
getAY()number

Subscribing to Multiple Gestures ​

You can handle multiple gestures as follows:

xml
<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 ​

NameTypeDescription
androidanyThe id of the pointer.
iosUITouchThe UITouch object associated to the touch
getX()numberGets the X coordinate of the pointer inside the view that triggered the event.
getY()numberGets the Y coordinate of the pointer inside the view that triggered the event.
Next
Navigation