React Native

motionwind for React Native lets you animate mobile apps using the same animate-* class syntax you already know from the web — powered by react-native-reanimated for 60fps native animations.

Why motionwind on React Native?

• Same API — Write animate-hover:scale-110 on web and animate-tap:scale-95 on mobile. One mental model, two platforms.
• Reanimated under the hood — Animations run on the UI thread, not JavaScript. Zero dropped frames.
• NativeWind compatible — Non-animation Tailwind classes pass through to NativeWind automatically.
• Runtime parsing — No build-time Babel step needed. The mw.* component proxy parses classes at runtime with an LRU cache.

How it works

import { mw } from "motionwind-react-native";

<mw.Pressable className="animate-tap:scale-95 animate-duration-150 bg-blue-500 p-4 rounded-xl">
  <mw.Text className="text-white font-bold">Press me</mw.Text>
</mw.Pressable>

The mw.Pressable component:

1. Parses the className string, separating animate-* tokens from regular classes
2. Creates Reanimated shared values for each animated property (scale)
3. Maps gestures to RN handlers (animate-tap: → onPressIn / onPressOut)
4. Passes remaining classes (bg-blue-500 p-4 rounded-xl) to NativeWind via className

Web vs. Native differences

Next steps

• Installation — Set up your project
• Components — Learn about mw.* components
• Animations — Entrance, exit, and state animations
• Gestures — Tap, hover, and focus interactions
• Hooks — useMotionwind and useInView for custom control