Reanimated Animations

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. This includes CSS keyframe animations, property transitions, and Reanimated’s entering, exiting, and layout transition animations — all driven by class names.

Uniwind Pro requires Reanimated v4.0.0 or higher for animation support.

How It Works

When you use animation-related classes, Uniwind automatically:

Detects animation/transition properties in your className (animate-*, transition-*, or uw-* classes)
Swaps the native component for its Reanimated equivalent (e.g., View → Animated.View)
For animate-* and transition-* classes — applies CSS animations via Reanimated’s CSS animation support
For uw-entering-*, uw-exiting-*, and uw-layout-* classes — builds the corresponding Reanimated animation objects and passes them as entering, exiting, and layout props

No manual setup required - just use the classes and Uniwind handles the rest.

Keyframe Animations

Tailwind Built-in

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>

Class	Description
`animate-spin`	360° rotation loop
`animate-bounce`	Vertical bounce effect
`animate-pulse`	Opacity fade in/out
`animate-ping`	Scale up + fade out

Custom Animations

Uniwind ships additional keyframe animations beyond what Tailwind provides. These are looping animations useful for drawing attention to elements or adding visual polish:

import { View } from 'react-native'

// Gentle floating effect
<View className="size-20 bg-primary rounded-xl animate-float" />

// Heartbeat pulse
<View className="size-20 bg-red-500 rounded-full animate-heartbeat" />

// Wiggle side to side
<View className="size-20 bg-amber-500 rounded-xl animate-wiggle" />

// Elastic rubber band stretch
<View className="size-20 bg-violet-500 rounded-xl animate-rubber-band" />

Class	Description
`animate-wiggle`	Rotational wiggle
`animate-shake`	Horizontal shake
`animate-flash`	Opacity flash on/off
`animate-rubber-band`	Elastic scale stretch
`animate-swing`	Pendulum swing
`animate-tada`	Scale + rotate attention seeker
`animate-heartbeat`	Double-pulse heartbeat
`animate-jello`	Rotational jello wobble
`animate-float`	Gentle vertical float
`animate-breathe`	Subtle breathing scale
`animate-tilt`	Alternating tilt rotation
`animate-glitch`	Rapid horizontal jitter

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'
  }`}
/>

Transition Classes

Class	Properties Animated
`transition-none`	No transition
`transition-all`	All properties
`transition-colors`	Background, border, text colors
`transition-opacity`	Opacity
`transition-shadow`	Box shadow
`transition-transform`	Transform (scale, rotate, translate)

Duration

Class	Duration
`duration-75`	75ms
`duration-100`	100ms
`duration-150`	150ms
`duration-200`	200ms
`duration-300`	300ms
`duration-500`	500ms
`duration-700`	700ms
`duration-1000`	1000ms

Timing Functions

Class	Easing
`ease-linear`	Linear
`ease-in`	Ease in
`ease-out`	Ease out
`ease-in-out`	Ease in-out

Delay

Class	Delay
`delay-75`	75ms
`delay-100`	100ms
`delay-150`	150ms
`delay-200`	200ms
`delay-300`	300ms
`delay-500`	500ms
`delay-700`	700ms
`delay-1000`	1000ms

Entering & Exiting Animations

Reanimated’s entering and exiting animations let you animate components as they mount and unmount. Uniwind lets you drive these entirely through class names — no imports from react-native-reanimated needed.

No Reanimated imports required. Just add uw-entering-* and uw-exiting-* classes to your className and Uniwind builds the animation objects for you.

Use uw-entering-* to animate a component when it appears, and uw-exiting-* when it disappears:

import { useState } from 'react'
import { Button, View } from 'react-native'

const [visible, setVisible] = useState(true)

// Bounce in, bounce out
{visible && (
  <View className="size-20 bg-primary rounded-xl uw-entering-bounce-in uw-exiting-bounce-out" />
)}
<Button title={visible ? 'Hide' : 'Show'} onPress={() => setVisible(v => !v)} />

// Slide in from left, slide out to right
{visible && (
  <View className="size-20 bg-primary rounded-xl uw-entering-slide-in-left uw-exiting-slide-out-right" />
)}

// Zoom in, zoom out
{visible && (
  <View className="size-20 bg-primary rounded-xl uw-entering-zoom-in uw-exiting-zoom-out" />
)}

// Fade in slowly (1000ms)
{visible && (
  <View className="size-20 bg-primary rounded-xl uw-entering-fade-in uw-entering-duration-1000 uw-exiting-fade-out uw-exiting-duration-1000" />
)}

User-provided entering and exiting props take priority over class names. This means you can use uw-* classes as defaults and override them with props when needed.

Entering Presets

Fade

Class	Animation
`uw-entering-fade-in`	Fade in
`uw-entering-fade-in-right`	Fade in from the right
`uw-entering-fade-in-left`	Fade in from the left
`uw-entering-fade-in-up`	Fade in from below
`uw-entering-fade-in-down`	Fade in from above

Slide

Class	Animation
`uw-entering-slide-in-right`	Slide in from the right
`uw-entering-slide-in-left`	Slide in from the left
`uw-entering-slide-in-up`	Slide in from below
`uw-entering-slide-in-down`	Slide in from above

Zoom

Class	Animation
`uw-entering-zoom-in`	Zoom in from center
`uw-entering-zoom-in-rotate`	Zoom in with rotation
`uw-entering-zoom-in-left`	Zoom in from the left
`uw-entering-zoom-in-right`	Zoom in from the right
`uw-entering-zoom-in-up`	Zoom in from below
`uw-entering-zoom-in-down`	Zoom in from above
`uw-entering-zoom-in-easy-up`	Smooth zoom in from below
`uw-entering-zoom-in-easy-down`	Smooth zoom in from above

Bounce

Class	Animation
`uw-entering-bounce-in`	Bounce in from center
`uw-entering-bounce-in-down`	Bounce in from above
`uw-entering-bounce-in-up`	Bounce in from below
`uw-entering-bounce-in-left`	Bounce in from the left
`uw-entering-bounce-in-right`	Bounce in from the right

Flip

Class	Animation
`uw-entering-flip-in-x-up`	Flip in on X axis from top
`uw-entering-flip-in-x-down`	Flip in on X axis from bottom
`uw-entering-flip-in-y-left`	Flip in on Y axis from left
`uw-entering-flip-in-y-right`	Flip in on Y axis from right
`uw-entering-flip-in-easy-x`	Simple flip in on X axis
`uw-entering-flip-in-easy-y`	Simple flip in on Y axis

Stretch

Class	Animation
`uw-entering-stretch-in-x`	Stretch in horizontally
`uw-entering-stretch-in-y`	Stretch in vertically

Rotate

Class	Animation
`uw-entering-rotate-in-down-left`	Rotate in from bottom-left
`uw-entering-rotate-in-down-right`	Rotate in from bottom-right
`uw-entering-rotate-in-up-left`	Rotate in from top-left
`uw-entering-rotate-in-up-right`	Rotate in from top-right

Other

Class	Animation
`uw-entering-roll-in-left`	Roll in from the left
`uw-entering-roll-in-right`	Roll in from the right
`uw-entering-pinwheel-in`	Pinwheel spin in
`uw-entering-light-speed-in-right`	Light speed in from right
`uw-entering-light-speed-in-left`	Light speed in from left

Exiting Presets

Fade

Class	Animation
`uw-exiting-fade-out`	Fade out
`uw-exiting-fade-out-right`	Fade out to the right
`uw-exiting-fade-out-left`	Fade out to the left
`uw-exiting-fade-out-up`	Fade out upward
`uw-exiting-fade-out-down`	Fade out downward

Slide

Class	Animation
`uw-exiting-slide-out-right`	Slide out to the right
`uw-exiting-slide-out-left`	Slide out to the left
`uw-exiting-slide-out-up`	Slide out upward
`uw-exiting-slide-out-down`	Slide out downward

Zoom

Class	Animation
`uw-exiting-zoom-out`	Zoom out to center
`uw-exiting-zoom-out-rotate`	Zoom out with rotation
`uw-exiting-zoom-out-left`	Zoom out to the left
`uw-exiting-zoom-out-right`	Zoom out to the right
`uw-exiting-zoom-out-up`	Zoom out upward
`uw-exiting-zoom-out-down`	Zoom out downward
`uw-exiting-zoom-out-easy-up`	Smooth zoom out upward
`uw-exiting-zoom-out-easy-down`	Smooth zoom out downward

Bounce

Class	Animation
`uw-exiting-bounce-out`	Bounce out from center
`uw-exiting-bounce-out-down`	Bounce out downward
`uw-exiting-bounce-out-up`	Bounce out upward
`uw-exiting-bounce-out-left`	Bounce out to the left
`uw-exiting-bounce-out-right`	Bounce out to the right

Flip

Class	Animation
`uw-exiting-flip-out-x-up`	Flip out on X axis upward
`uw-exiting-flip-out-x-down`	Flip out on X axis downward
`uw-exiting-flip-out-y-left`	Flip out on Y axis to left
`uw-exiting-flip-out-y-right`	Flip out on Y axis to right
`uw-exiting-flip-out-easy-x`	Simple flip out on X axis
`uw-exiting-flip-out-easy-y`	Simple flip out on Y axis

Stretch

Class	Animation
`uw-exiting-stretch-out-x`	Stretch out horizontally
`uw-exiting-stretch-out-y`	Stretch out vertically

Rotate

Class	Animation
`uw-exiting-rotate-out-down-left`	Rotate out to bottom-left
`uw-exiting-rotate-out-down-right`	Rotate out to bottom-right
`uw-exiting-rotate-out-up-left`	Rotate out to top-left
`uw-exiting-rotate-out-up-right`	Rotate out to top-right

Other

Class	Animation
`uw-exiting-roll-out-left`	Roll out to the left
`uw-exiting-roll-out-right`	Roll out to the right
`uw-exiting-pinwheel-out`	Pinwheel spin out
`uw-exiting-light-speed-out-right`	Light speed out to right
`uw-exiting-light-speed-out-left`	Light speed out to left

Layout Transitions

Layout transitions animate the position and size changes of a component when its siblings are added or removed. They keep list reordering and grid changes looking smooth. Use uw-layout-* classes to apply them:

import { useState } from 'react'
import { Button, Pressable, Text, View } from 'react-native'

const [items, setItems] = useState([
  { id: 0, color: 'bg-red-400' },
  { id: 1, color: 'bg-blue-400' },
  { id: 2, color: 'bg-green-400' },
])

// Each item fades in/out and siblings animate to fill the gap
<View className="w-full gap-2">
  {items.map(item => (
    <View
      key={item.id}
      className={`w-full h-14 ${item.color} rounded-xl items-center justify-center uw-entering-fade-in uw-exiting-fade-out uw-layout-linear-transition`}
    >
      <Text className="text-white font-semibold">Item {item.id}</Text>
    </View>
  ))}
</View>
<Button title="Add item" onPress={addItem} />

You can combine layout transitions with entering and exiting animations on the same component. When an item is removed, it plays the exiting animation while its siblings smoothly reposition via the layout transition.

Layout Transition Presets

Class	Description
`uw-layout-linear-transition`	Smooth linear repositioning
`uw-layout-fading-transition`	Fade during repositioning
`uw-layout-jumping-transition`	Bouncy jump to new position
`uw-layout-curved-transition`	Curved path repositioning
`uw-layout-sequenced-transition`	Sequenced repositioning
`uw-layout-entry-exit-transition`	Combined entry/exit during layout

Grid Example

Layout transitions work well for grid layouts where items shift position:

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

<View className="w-full flex-row flex-wrap gap-2">
  {gridItems.map(item => (
    <Pressable
      key={item.id}
      className={`h-20 w-[30%] ${item.color} rounded-xl items-center justify-center uw-entering-zoom-in uw-exiting-zoom-out uw-layout-jumping-transition`}
      onPress={() => removeItem(item.id)}
    >
      <Text className="text-white font-bold text-lg">{item.id}</Text>
    </Pressable>
  ))}
</View>

Animation Configuration

You can fine-tune entering, exiting, and layout animations with modifier classes. These control duration, delay, easing, and spring physics — all from your className. The pattern is uw-{type}-{modifier} where {type} is entering, exiting, or layout.

Duration

Controls how long the animation takes. Accepts preset values or arbitrary integers.

Class	Duration
`uw-{type}-duration-75`	75ms
`uw-{type}-duration-100`	100ms
`uw-{type}-duration-150`	150ms
`uw-{type}-duration-200`	200ms
`uw-{type}-duration-300`	300ms
`uw-{type}-duration-500`	500ms
`uw-{type}-duration-700`	700ms
`uw-{type}-duration-1000`	1000ms
`uw-{type}-duration-{value}`	Arbitrary value in ms

// Slow fade in (1000ms), fast fade out (150ms)
<View className="uw-entering-fade-in uw-entering-duration-1000 uw-exiting-fade-out uw-exiting-duration-150" />

// Arbitrary duration
<View className="uw-entering-zoom-in uw-entering-duration-2000" />

Delay

Adds a delay before the animation starts.

Class	Delay
`uw-{type}-delay-75`	75ms
`uw-{type}-delay-100`	100ms
`uw-{type}-delay-150`	150ms
`uw-{type}-delay-200`	200ms
`uw-{type}-delay-300`	300ms
`uw-{type}-delay-500`	500ms
`uw-{type}-delay-700`	700ms
`uw-{type}-delay-1000`	1000ms
`uw-{type}-delay-{value}`	Arbitrary value in ms

// Fade in after 500ms delay
<View className="uw-entering-fade-in uw-entering-delay-500" />

Easing

Sets the timing function for the animation.

Class	Easing
`uw-{type}-ease-linear`	Linear
`uw-{type}-ease-in`	Ease in (accelerating)
`uw-{type}-ease-out`	Ease out (decelerating)
`uw-{type}-ease-in-out`	Ease in-out (both)
`uw-{type}-ease-bounce`	Bounce easing

// Bounce in with bounce easing
<View className="uw-entering-bounce-in uw-entering-ease-bounce uw-exiting-bounce-out" />

Spring Physics

For spring-based animations, enable springify and optionally configure damping, stiffness, and mass. These accept arbitrary numeric values.

Class	Description
`uw-{type}-springify`	Enable spring physics
`uw-{type}-damping-{value}`	Spring damping (lower = more oscillation)
`uw-{type}-stiffness-{value}`	Spring stiffness (higher = snappier)
`uw-{type}-mass-{value}`	Spring mass (higher = slower)

// Spring-based zoom in with low damping for a bouncy effect
<View className="uw-entering-zoom-in uw-entering-springify uw-entering-damping-10 uw-exiting-zoom-out" />

// Stiff spring with high stiffness
<View className="uw-entering-slide-in-left uw-entering-springify uw-entering-stiffness-200 uw-entering-damping-15" />

Replace {type} with entering, exiting, or layout depending on which animation phase you want to configure. Each phase is configured independently, so you can have a slow entering animation and a fast exiting animation on the same component.

Using Reanimated Directly

If you need more control than class names provide, you can use Reanimated’s Animated.* components directly with Uniwind classes. The entering, exiting, and layout props accept Reanimated animation objects as usual:

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>
  )}
/>

You can also mix both approaches. Pass an entering or exiting prop directly to override the class-name-driven animation:

import { FadeIn } from 'react-native-reanimated'
import { View } from 'react-native'

// uw-entering-bounce-in is overridden by the entering prop
<View
  entering={FadeIn.duration(800)}
  className="size-20 bg-primary rounded-xl uw-entering-bounce-in uw-exiting-bounce-out"
/>

Components Supporting Animations

These components automatically switch to Reanimated versions when animate-*, transition-*, or uw-* animation classes are detected:

Component	Animated Version
`View`	`Animated.View`
`Text`	`Animated.Text`
`Image`	`Animated.Image`
`ImageBackground`	`Animated.ImageBackground`
`ScrollView`	`Animated.ScrollView`
`FlatList`	`Animated.FlatList`
`TextInput`	`Animated.TextInput`
`Pressable`	`Animated.Pressable`

All of these components accept entering, exiting, and layout props when animation classes are present. You can also pass these props directly without any uw-* classes — the component will be upgraded to its Reanimated version automatically.

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" />

Animated List with Reordering

import { useState } from 'react'
import { Button, Text, View } from 'react-native'

const COLORS = ['bg-red-400', 'bg-blue-400', 'bg-green-400', 'bg-yellow-400', 'bg-purple-400']
let nextId = 0

export default function AnimatedList() {
  const [items, setItems] = useState([
    { id: nextId++, color: COLORS[0] },
    { id: nextId++, color: COLORS[1] },
    { id: nextId++, color: COLORS[2] },
  ])

  const addItem = () => {
    const color = COLORS[nextId % COLORS.length]
    setItems(prev => [...prev, { id: nextId++, color }])
  }

  const removeItem = (id: number) => {
    setItems(prev => prev.filter(item => item.id !== id))
  }

  return (
    <View className="flex-1 p-4 gap-2">
      {items.map(item => (
        <View
          key={item.id}
          className={`w-full h-14 ${item.color} rounded-xl flex-row items-center px-4 justify-between uw-entering-fade-in uw-exiting-fade-out uw-layout-linear-transition`}
        >
          <Text className="text-white font-semibold">Item {item.id}</Text>
          <Button title="Remove" onPress={() => removeItem(item.id)} />
        </View>
      ))}
      <Button title="Add item" onPress={addItem} />
    </View>
  )
}

Shadow Tree Updates

Learn how Uniwind Pro updates views without re-renders

Theme Transitions

Add smooth animated transitions when switching themes

Releases

Features

Licensing

Reanimated Animations

Overview

How It Works

Keyframe Animations

Tailwind Built-in

Custom Animations

Transitions

Transition Classes

Duration

Timing Functions

Delay

Entering & Exiting Animations

Entering Presets

Exiting Presets

Layout Transitions

Layout Transition Presets

Grid Example

Animation Configuration

Duration

Delay

Easing

Spring Physics

Using Reanimated Directly

Components Supporting Animations

Practical Examples

Animated Button

Interactive Card

Disabled State with Transition

Loading Spinner

Animated List with Reordering

Shadow Tree Updates

Theme Transitions

​Overview

​How It Works

​Keyframe Animations

​Tailwind Built-in

​Custom Animations

​Transitions

​Transition Classes

​Duration

​Timing Functions

​Delay

​Entering & Exiting Animations

​Entering Presets

​Exiting Presets

​Layout Transitions

​Layout Transition Presets

​Grid Example

​Animation Configuration

​Duration

​Delay

​Easing

​Spring Physics

​Using Reanimated Directly

​Components Supporting Animations

​Practical Examples

​Animated Button

​Interactive Card

​Disabled State with Transition

​Loading Spinner

​Animated List with Reordering

​Related

Shadow Tree Updates

Theme Transitions

Overview

How It Works

Keyframe Animations

Tailwind Built-in

Custom Animations

Transitions

Transition Classes

Duration

Timing Functions

Delay

Entering & Exiting Animations

Entering Presets

Exiting Presets

Layout Transitions

Layout Transition Presets

Grid Example

Animation Configuration

Duration

Delay

Easing

Spring Physics

Using Reanimated Directly

Components Supporting Animations

Practical Examples

Animated Button

Interactive Card

Disabled State with Transition

Loading Spinner

Animated List with Reordering

Related