Star

Documentation

Hooks

useMotionwind and useInView hooks for custom animation control.

Hooks

For cases where the mw.* component proxy isn't flexible enough, motionwind-react-native exports hooks that give you direct control.

useMotionwind

Parses a motionwind className string and returns Reanimated animated styles, gesture handlers, and animation controls.

useMotionwind HookNative
9:41

Return value

const {
  animatedStyle,  // Pass to Animated.View's style prop
  handlers,       // Gesture handlers (onPressIn, etc.)
  parsed,         // Raw parsed result
  animateTo,      // Animate to a target state
  resetToBase,    // Reset to "enter" state
} = useMotionwind(className);

Manual animation control

Use animateTo and resetToBase for custom logic:

Manual Control — ToggleNative
9:41

useInView

Detects when a component enters the viewport area.

Signature

function useInView(config: ViewportConfig): {
  isInView: boolean;
  onLayout: (event: LayoutChangeEvent) => void;
  viewRef: React.RefObject<any>;
};

Configuration

const { isInView, onLayout } = useInView({
  once: true,      // Only trigger once
  amount: 0.5,     // 50% must be visible
  margin: 50,      // 50px offset
});

parseMotionClasses

The raw parser function — useful for debugging or custom integrations.

Parser OutputNative
9:41

clearParserCache

The parser uses an LRU cache (max 1000 entries):

import { clearParserCache } from "motionwind-react-native";
clearParserCache();

Next steps