Documentation
Components
The mw.* component proxy — animated React Native components with className parsing.
Components
The mw proxy is the primary API for motionwind-react-native. It creates animated React Native components that parse animate-* classes from the className prop at runtime.
Basic usage
mw.View — Fade + SlideNative
9:41
How it works
When you write <mw.View className="...">:
- If motion classes found: renders
Animated.Viewwith Reanimated styles - If no motion classes: renders plain
View, passing className to NativeWind
This means you can use mw.* everywhere without a performance penalty.
Available components
| Component | RN Equivalent | Animated Version |
|---|---|---|
mw.View | View | Animated.View |
mw.Text | Text | Animated.Text |
mw.Image | Image | Animated.Image |
mw.ScrollView | ScrollView | Animated.ScrollView |
mw.Pressable | Pressable | Animated.Pressable |
mw.TouchableOpacity | TouchableOpacity | Animated.TouchableOpacity |
mw.TextInput | TextInput | Animated.TextInput |
mw.FlatList | FlatList | Animated.FlatList |
mw.SafeAreaView | SafeAreaView | Animated.SafeAreaView |
Pressable with tap animation
mw.Pressable — Tap to ScaleNative
9:41
Mixing animation and style props
Combine className (motionwind + NativeWind) with style (inline styles):
className + style MixedNative
9:41
Ref forwarding
All mw.* components forward refs:
const viewRef = useRef<View>(null);
<mw.View ref={viewRef} className="animate-enter:opacity-0" />Performance
- LRU cache (max 1000 entries) for parsed className results
- Components without motion classes render as plain RN components — zero overhead
- Repeated renders with the same className hit cache, skip re-parsing
Next steps
- Animations — Entrance, exit, and transition animations
- Gestures — Tap, hover, and focus interactions