Tap Gesture

The Tap gesture detects a deliberate tap on a component, in a manner that's more restrictive than onPress. Tap imposes the following additional restrictions with respect to the initial down and final pointer up events:

  1. They must occur within a short distance, to rule out drag-like gestures.
  2. They must describe a vector of little or no velocity, to rule out swipe-like gestures.

Properties

Property Type Default Description

type

"Tap"

REQUIRED

Describes the type of gesture

onTap

Array of commands

[ ]

Commands to run when a tap occurs

onTap

Commands to run when a Tap event is detected. This event can occur after the pointer has been released. These commands are executed after the onCancel event handler has executed.

The event generated has the following form.

"event": {
  "source": {
    "type": COMPONENT_TYPE, // The type of the component
    "handler": "Tap",
    ...                     // Component source properties
  },
  "component": {
    "x": Number,       // X-position of the up event in the component (dp)
    "y": Number,       // Y-position of the up event in the component (dp)
    "width": Number,   // Width of the component in dp
    "height": Number,  // Height of the component in dp
  },
  "inBounds": Boolean  // True if the pointer is within the components transformed bounds
}

The inBounds calculation for the pointer position doesn't consider overlapping components.

Refer to Event source for a description of event.source properties.

The onTap handler executes in normal mode in the component data-binding context.

Event sequence for the Tap gesture

A Tap gesture triggers the following event handlers:

  1. onDown
  2. onUp (optional)
  3. onCancel (when a tap has been detected)
  4. onTap (when the pointer is released)

The maximum velocity and maximum travel that qualify a touch as a Tap are defined by the runtime operating system.

Tap gesture example

The following example demonstrates the Tap gesture. Each touchable component handler runs a command that displays the ID of the component and the name of the handler that ran. When you do a short press and release that meets the criteria for Tap, the onTap handler runs. To see the difference between Tap and a normal press, press the TouchWrapper, move a short distance and release. This scenario runs onPress instead.

Was this page helpful?

Last updated: Feb 29, 2024