Skip to content

Latest commit

 

History

History
416 lines (286 loc) · 13.7 KB

gestures.md

File metadata and controls

416 lines (286 loc) · 13.7 KB
title
Gestures

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

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

Name Type Description
eventName string The name of the event.
object Observable The Observable instance that triggered the event.
type GestureTypes The type of the gesture
view Partial<View> The Partial<View> instance that triggered the event. This is the same ui component as return by object
ios UIGestureRecognizer Gets the underlying native iOS specific UIGestureRecognizer.
android android.view.GestureDetector Gets the underlying native android specific gesture detector

Tap gesture {#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 {#double-tap-gesture}

Action: Two taps on a component in quick succession.

Double tap event data

Name Type Description
getPointerCount() number Gets the number of pointers in the event.
getX() number Gets the x coordinate of the event inside the view that triggered the event.
getY() number Gets the y coordinate of the event inside the view that triggered the event.

Long press gesture {#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 {#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 {#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

Name Type Description
deltaX number Distance , in DIPs, moved in the x direction from previous position.
deltaY number Distance , in DIPs, moved in the x direction from previous position.
state GestureStateTypes Indicates the state of panning. See GestureStateTypes for available states.

Pinch gesture {#pinch-gesture}

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

Pinch gesture event data

Name Type Description
state number The state of the pinch gesture.
scale number
getFocusX() number
getFocusY() number

Possible usage: Zoom in or out of content.

Rotate gesture {#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 {#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

Name Type Description
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:

  <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

Name Type Description
android any The id of the pointer.
ios UITouch The UITouch object associated to the touch
getX() number Gets the X coordinate of the pointer inside the view that triggered the event.
getY() number Gets the Y coordinate of the pointer inside the view that triggered the event.