Skip to main content
.onLongPressGesture(action: (state: GestureState) => void): Component
.onLongPressGesture(props: { minimumDuration?: number; maximumDistance?: number }, action: (state: GestureState) => void): Component
​
action
(state: GestureState) => void
required
A callback that receives the gesture state throughout the gesture lifecycle.
​
props
object
Configuration options for the long press gesture.

​
Support

​
Usage

​
Basic long press

const body = () => {
    const [pressed, setPressed] = useState(false)

    return Text(pressed ? "Long pressed!" : "Press and hold")
        .padding(16)
        .background(Color("gray").opacity(0.2))
        .cornerRadius(8)
        .onLongPressGesture((state) => {
            if (state.phase === "ended") {
                setPressed(true)
            }
        })
}

​
Custom duration

Require a 2-second press. 
Text("Hold for 2 seconds")
    .padding(16)
    .onLongPressGesture({ minimumDuration: 2 }, (state) => {
        if (state.phase === "ended") {
            console.log("Long press recognized")
        }
    })

​
Visual feedback during press

const body = () => {
    const [pressing, setPressing] = useState(false)

    return Circle()
        .frame({ width: 80, height: 80 })
        .foregroundStyle(pressing ? Color("red") : Color("blue"))
        .scaleEffect(pressing ? 0.9 : 1)
        .onLongPressGesture((state) => {
            setPressing(
                state.phase === "began" ||
                state.phase === "changed"
            )
        })
}

​
Notes

  • The gesture callback fires for every phase: "possible", "began", "changed", "ended", and "cancelled".
  • Use "began" and "changed" to show press-in-progress feedback, and "ended" to perform the action.
  • If the finger moves beyond maximumDistance, the gesture is cancelled.

​
See Also