Skip to main content

​
Overview

No complex animation logic required. Use your favorite classNames to trigger high-performance animations. Our translation layer ensures that your animations remain performant, responsive and 100% native.
Uniwind Pro integrates seamlessly with react-native-reanimated (v4.0.0+) to provide CSS-like animations and transitions using Tailwind classes. Instead of using the style prop with Reanimated, you can use className to animate your components.
Uniwind Pro requires Reanimated v4.0.0 or higher for animation support.

​
How It Works

When you use animate-* or transition-* classes, Uniwind automatically:
  1. Detects animation/transition properties in your className
  2. Sets isAnimated: true on the style result
  3. Swaps the native component for its Reanimated equivalent (e.g., View → Animated.View)
  4. Applies CSS animations via Reanimated’s CSS animation support
No manual setup required - just use the classes and Uniwind handles the rest.

​
Keyframe Animations

Built-in Tailwind keyframe animations work out of the box: 
import { View, Text, Pressable } from 'react-native'

// Spin animation (360° rotation loop)
<View className="size-32 bg-lime-500 rounded animate-spin" />

// Bounce animation (vertical bounce)
<View className="size-32 bg-lime-500 rounded animate-bounce" />

// Pulse animation (opacity fade in/out)
<View className="size-32 bg-lime-500 rounded animate-pulse" />

// Ping animation (scale + fade out)
<View className="size-32 bg-lime-500 rounded animate-ping" />

// Works on most components
<Pressable className="size-32 bg-base rounded-xl animate-spin" />

// iOS only (no Android support from Reanimated)
<Text className="text-default animate-spin">Spinning Text</Text>

​
Transitions

Animate property changes smoothly when className or state changes: 
import { View, Pressable } from 'react-native'

// Transition colors on press
<Pressable
  className="size-32 bg-base rounded-xl active:bg-primary transition-colors duration-500"
/>

// Transition opacity
<View
  className={`size-32 bg-sky-800 rounded transition-opacity duration-1000 ${
    isVisible ? 'opacity-100' : 'opacity-0'
  }`}
/>

// Transition transform
<View
  className={`size-32 bg-sky-800 rounded transition-transform duration-1000 ${
    isLeft ? '-translate-x-full' : 'translate-x-full'
  }`}
/>

// Transition all properties
<View
  className={`size-32 rounded transition-all duration-1000 border-8 ${
    state
      ? '-translate-x-full bg-lime-500 border-red-500 rounded-[64px]'
      : 'translate-x-full bg-red-500 border-lime-500 rounded-none'
  }`}
/>

​
Supported Animation Classes

​
Keyframe Animations

ClassDescription
animate-spin360° rotation loop
animate-bounceVertical bounce effect
animate-pulseOpacity fade in/out
animate-pingScale up + fade out

​
Transition Properties

ClassProperties Animated
transition-noneNo transition
transition-allAll properties
transition-colorsBackground, border, text colors
transition-opacityOpacity
transition-shadowBox shadow
transition-transformTransform (scale, rotate, translate)

​
Duration

ClassDuration
duration-7575ms
duration-100100ms
duration-150150ms
duration-200200ms
duration-300300ms
duration-500500ms
duration-700700ms
duration-10001000ms

​
Timing Functions

ClassEasing
ease-linearLinear
ease-inEase in
ease-outEase out
ease-in-outEase in-out

​
Delay

ClassDelay
delay-7575ms
delay-100100ms
delay-150150ms
delay-200200ms
delay-300300ms
delay-500500ms
delay-700700ms
delay-10001000ms

​
Using Reanimated Directly

You can also use Reanimated’s Animated.* components directly with Uniwind classes: 
import Animated, { FadeIn, FlipInXUp, LinearTransition } from 'react-native-reanimated'

// Entering/exiting animations
<Animated.Text
  entering={FadeIn.delay(500)}
  className="text-foreground text-lg"
>
  Fading in text
</Animated.Text>

// Animated FlatList with entering animations per item
<Animated.FlatList
  data={data}
  className="flex-none"
  contentContainerClassName="px-2"
  layout={LinearTransition}
  ItemSeparatorComponent={() => (
    <Animated.View className="h-px bg-border" />
  )}
  renderItem={({ item }) => (
    <Animated.Text
      entering={FlipInXUp}
      className="text-foreground py-2"
    >
      {item}
    </Animated.Text>
  )}
/>

​
Components Supporting Animations

These components automatically switch to Reanimated versions when animation classes are detected:
ComponentAnimated Version
ViewAnimated.View
TextAnimated.Text
ImageAnimated.Image
ImageBackgroundAnimated.ImageBackground
ScrollViewAnimated.ScrollView
FlatListAnimated.FlatList
TextInputAnimated.TextInput (iOS only)
PressableAnimated.View wrapper

​
Practical Examples

​
Animated Button

import { Pressable, Text } from 'react-native'

<Pressable
  className="px-6 py-3 bg-blue-500 rounded-lg active:scale-95 active:bg-blue-600 transition-all duration-150"
>
  <Text className="text-white font-semibold">Press Me</Text>
</Pressable>

​
Interactive Card

import { Pressable, Text } from 'react-native'

<Pressable
  className="p-4 bg-white rounded-xl active:scale-95 transition-transform duration-150"
>
  <Text className="text-gray-800">Interactive Card</Text>
</Pressable>

​
Disabled State with Transition

import { Pressable, Text } from 'react-native'

<Pressable
  disabled={isLoading}
  className="px-6 py-3 bg-blue-500 disabled:bg-gray-300 rounded-lg transition-colors duration-300"
>
  <Text className="text-white">Submit</Text>
</Pressable>

​
Loading Spinner

import { View } from 'react-native'

<View className="size-8 border-4 border-gray-200 border-t-blue-500 rounded-full animate-spin" />

Shadow Tree Updates

Learn how Uniwind Pro updates views without re-renders

Theme Transitions

Add smooth animated transitions when switching themes