Skip to main content
.onTapGesture(action: (locationInView: Point) => void): Component
.onTapGesture(props: { count: number }, action: (locationInView: Point) => void): Component
​
action
(locationInView: Point) => void
required
A callback that receives the tap location as a Point ({ x, y }) in the component’s coordinate space.
​
props
object
Configuration options for the tap gesture.

​
Support

​
Usage

​
Single tap

Text("Tap me")
    .onTapGesture((location) => {
        console.log("Tapped at: " + location.x + ", " + location.y)
    })

​
Simple tap action (ignoring location)

const body = () => {
    const [count, setCount] = useState(0)

    return Text("Tapped " + count + " times")
        .padding(16)
        .background(Color("blue").opacity(0.1))
        .cornerRadius(8)
        .onTapGesture(() => setCount(count + 1))
}

​
Double tap

const body = () => {
    const [zoomed, setZoomed] = useState(false)

    return Image({ url: "photo.jpg" })
        .resizable()
        .scaledToFit()
        .scaleEffect(zoomed ? 2 : 1)
        .onTapGesture({ count: 2 }, () => setZoomed(!zoomed))
}

​
Combining single and double tap

const body = () => {
    const [label, setLabel] = useState("Tap or double tap")

    return Text(label)
        .padding(16)
        .onTapGesture({ count: 2 }, () => setLabel("Double tapped!"))
        .onTapGesture(() => setLabel("Single tapped!"))
}

​
Notes

  • The locationInView is in the tapped component’s local coordinate space, with { x: 0, y: 0 } at the top-leading corner.
  • When combining single and multi-tap gestures, apply the higher count gesture first. The system waits briefly to distinguish between single and multi-tap.
  • For interactive controls like buttons, prefer using Button directly. .onTapGesture() is best for adding tap handling to non-interactive components.

​
See Also