Gestures#

Gesture modifiers allow you to add interactivity to views using common gestures like taps, long presses, and drags. These gestures behave similarly to their counterparts in SwiftUI and are fully supported in views like <VStack> and <HStack>.

onTapGesture#

Adds an action to perform when a tap gesture is recognized.

Type#

1onTapGesture?: (() => void) | {
2  count: number
3  perform: () => void
4}

Behavior#

• Basic usage:

  1<VStack onTapGesture={() => console.log('Tapped')} />

• With specified number of taps:

  1<HStack
  2  onTapGesture={{
  3    count: 2,
  4    perform: () => console.log('Double tapped')
  5  }}
  6/>

Defaults#

• count: 1 — the gesture is triggered by a single tap.

onLongPressGesture#

Adds an action to perform when a long press gesture is recognized.

Type#

1onLongPressGesture?: (() => void) | {
2  minDuration?: number
3  maxDuration?: number
4  perform: () => void
5  onPressingChanged?: (state: boolean) => void
6}

Behavior#

• Simple long press:

  1<VStack onLongPressGesture={() => console.log('Long pressed')} />

• With customization:

  1<HStack
  2  onLongPressGesture={{
  3    minDuration: 800,
  4    maxDuration: 3000,
  5    perform: () => console.log('Long press recognized'),
  6    onPressingChanged: isPressing =>
  7      console.log(isPressing ? 'Pressing...' : 'Released')
  8  }}
  9/>

Defaults#

• minDuration: 500 milliseconds
• maxDuration: 10000 milliseconds

onDragGesture#

Adds drag interaction to a view, with callbacks for changes and completion.

Type#

1onDragGesture?: {
2  minDistance?: number
3  coordinateSpace?: 'local' | 'global'
4  onChanged?: (details: DragGestureDetails) => void
5  onEnded?: (details: DragGestureDetails) => void
6}

Behavior#

• Basic usage:

  1<VStack
  2  onDragGesture={{
  3    onChanged: details =>
  4      console.log('Dragging at', details.location),
  5    onEnded: details =>
  6      console.log('Ended drag with velocity', details.velocity)
  7  }}
  8/>

• With options:

  1<HStack
  2  onDragGesture={{
  3    minDistance: 5,
  4    coordinateSpace: 'global',
  5    onChanged: details => {
  6      console.log('Current location:', details.location)
  7      console.log('Translation:', details.translation)
  8    },
  9    onEnded: details => {
  10      console.log('Predicted end:', details.predictedEndLocation)
  11    }
  12  }}
  13/>

Defaults#

• minDistance: 10 points
• coordinateSpace: 'local'

DragGestureDetails#

The object passed to onChanged and onEnded callbacks for onDragGesture.

1type DragGestureDetails = {
2  time: number
3  location: Point
4  startLocation: Point
5  translation: Size
6  velocity: Size
7  predictedEndLocation: Point
8  predictedEndTranslation: Size
9}

Fields#

• time: Timestamp (ms) of the current drag event.
• location: Current pointer location.
• startLocation: Starting point of the drag.
• translation: { x, y } offset from the start location.
• velocity: Estimated speed of the drag in points per second.
• predictedEndLocation: Projected final location if dragging stops now.
• predictedEndTranslation: Projected total translation based on current velocity.