Skip to main content
.onDragGesture(action: (state: DragGestureState) => void): Component;
.onDragGesture(props: { minimumDistance?: number }, action: (state: DragGestureState) => void): Component;

​
Parameters

​
action
(state: DragGestureState) => void
The action to perform during the drag gesture. Receives the current drag state.
​
props
{ minimumDistance?: number }
Gesture configuration.

​
Support

​
Usage

​
Basic drag

Rectangle()
    .fill(Color("blue"))
    .onDragGesture((state) => {
        console.log("Dragging:", state.translation)
    })

​
Drag with minimum distance

Circle()
    .fill(Color("red"))
    .onDragGesture({ minimumDistance: 10 }, (state) => {
        console.log("Drag started")
    })

​
Handle drag end

Text("Drag me")
    .onDragGesture((state) => {
        if (state.isEnded) {
            console.log("Drag ended")
        }
    })