> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Reanimated Animations

> Use Tailwind classNames to trigger high-performance native animations

## Overview

<Tip>
  **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.
</Tip>

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.

<Info>
  Uniwind Pro requires **Reanimated v4.0.0 or higher** for animation support.
</Info>

## How It Works

When you use animation-related classes, Uniwind automatically:

1. Detects animation/transition properties in your `className` (`animate-*`, `transition-*`, or `uw-*` classes)
2. Swaps the native component for its Reanimated equivalent (e.g., `View` → `Animated.View`)
3. For `animate-*` and `transition-*` classes — applies CSS animations via Reanimated's CSS animation support
4. 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:

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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.

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

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

```tsx theme={null}
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

<AccordionGroup>
  <Accordion title="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     |
  </Accordion>

  <Accordion title="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     |
  </Accordion>

  <Accordion title="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 |
  </Accordion>

  <Accordion title="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 |
  </Accordion>

  <Accordion title="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      |
  </Accordion>

  <Accordion title="Stretch">
    | Class                      | Animation               |
    | -------------------------- | ----------------------- |
    | `uw-entering-stretch-in-x` | Stretch in horizontally |
    | `uw-entering-stretch-in-y` | Stretch in vertically   |
  </Accordion>

  <Accordion title="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    |
  </Accordion>

  <Accordion title="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  |
  </Accordion>
</AccordionGroup>

### Exiting Presets

<AccordionGroup>
  <Accordion title="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     |
  </Accordion>

  <Accordion title="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     |
  </Accordion>

  <Accordion title="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 |
  </Accordion>

  <Accordion title="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 |
  </Accordion>

  <Accordion title="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   |
  </Accordion>

  <Accordion title="Stretch">
    | Class                      | Animation                |
    | -------------------------- | ------------------------ |
    | `uw-exiting-stretch-out-x` | Stretch out horizontally |
    | `uw-exiting-stretch-out-y` | Stretch out vertically   |
  </Accordion>

  <Accordion title="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    |
  </Accordion>

  <Accordion title="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  |
  </Accordion>
</AccordionGroup>

## 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:

```tsx theme={null}
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:

```tsx theme={null}
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 |

```tsx theme={null}
// 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 |

```tsx theme={null}
// 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           |

```tsx theme={null}
// 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)             |

```tsx theme={null}
// 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" />
```

<Info>
  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.
</Info>

## 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:

```tsx theme={null}
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:

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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>
  )
}
```

## Related

<CardGroup cols={2}>
  <Card title="Shadow Tree Updates" icon="bolt" href="/pro/shadow-tree-updates">
    Learn how Uniwind Pro updates views without re-renders
  </Card>

  <Card title="Theme Transitions" icon="wand-magic-sparkles" href="/pro/theme-transitions">
    Add smooth animated transitions when switching themes
  </Card>
</CardGroup>