Documentation
Drag
Draggable elements with axis locking, elasticity, and snap-back.
Drag
motionwind-react-native supports drag gestures through animate-drag-* classes.
Enable drag
Draggable ElementsNative
9:41
Snap back to origin
<mw.View className="animate-drag-both animate-drag-snap bg-indigo-500 w-20 h-20 rounded-xl" />After the user releases, the element springs back to its original position.
Elasticity
Control resistance when dragged beyond constraints:
// 50% elasticity
<mw.View className="animate-drag-both animate-drag-elastic-50" />
// No elasticity (hard stop)
<mw.View className="animate-drag-both animate-drag-elastic-0" />
// Full rubber band
<mw.View className="animate-drag-both animate-drag-elastic-100" />Drag constraints
Limit how far the element can be dragged:
Constrained DragNative
9:41
| Class | Direction |
|---|---|
animate-drag-constraint-t-{n} | Max drag up |
animate-drag-constraint-b-{n} | Max drag down |
animate-drag-constraint-l-{n} | Max drag left |
animate-drag-constraint-r-{n} | Max drag right |
Disable momentum
<mw.View className="animate-drag-both animate-drag-no-momentum" />Combining drag with entrance
Entrance + DragNative
9:41
Next steps
- Hooks — Build custom drag interactions with
useMotionwind - API Reference — Complete type definitions