Documentation

Drag

Implement native drag directly in v2 and understand Motionwind's unsupported-capability diagnostic.

Drag on React Native

Motionwind v2 does not consume animate-drag-* classes on React Native. The parser returns unsupported-native-drag and an empty dragConfig, preventing a class from appearing to work while providing no recognizer.

Use React Native Gesture Handler and Reanimated directly for pan recognition, constraints, velocity, momentum, and snap-back behavior. You can still use Motionwind on the same component for supported mount or press states:

import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from "react-native-reanimated";

export function DraggableCard() {
  const x = useSharedValue(0);
  const y = useSharedValue(0);
  const pan = Gesture.Pan().onChange((event) => {
    x.value += event.changeX;
    y.value += event.changeY;
  });
  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: x.value }, { translateY: y.value }],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={style} />
    </GestureDetector>
  );
}

This direct path requires the root/setup prescribed by the installed Gesture Handler version. It is separate from Motionwind's tap handlers.