Native animations

Define an initial state and a mounted target:

<mw.View className="animate-initial:opacity-0 animate-initial:y-20 animate-enter:opacity-100 animate-enter:y-0 animate-duration-300">
  <mw.Text>Fades and slides into place</mw.Text>
</mw.View>

Supported native values include opacity, colors, dimensions, spacing, borders, typography, and transforms such as scale, translate, rotate, and skew. x and y are adapted to translateX and translateY; rotation and skew numbers are adapted to degree strings. Transition durations and delays become milliseconds for Reanimated.

Named variants work at runtime:

<mw.View className="animate-variant-hidden:opacity-0 animate-variant-visible:opacity-100 animate-from-hidden animate-to-visible animate-duration-200" />

Unsupported values are diagnostics

CSS filters, backdrop filters, clip paths, box shadows, perspective/Z transforms, and SVG path values have no generic React Native mapping. The parser returns an unsupported-native-property warning and keeps the original token available to the styling layer; it does not pretend the animation ran.

animate-inview:*, drag, and layout classes likewise return specific warnings. Exit states and viewport options remain present in parsed data for custom orchestration, but the mw.* component does not delay native unmount or track visibility for you.

Read Compatibility before sharing an animation preset between web and native.