# Transition

> Atom — orn-ui

> ⚠️ Requires <UIProvider>: This component (like every orn-ui component) must render inside a <UIProvider> ancestor, or it throws at runtime. See https://orn-ui-docs.vercel.app/getting-started.md

> Runs on Expo SDK 54, 55, 56 and 57, and on bare React Native >=0.81 with react >=19.1. No native modules — works in Expo Go, no prebuild.

## Installation

Install just this component (copies the source into your project, no npm dependency)
```bash
npx orn-ui add transition
```

Or install the whole package and import it
```tsx
pnpm add orn-ui
import { Transition } from 'orn-ui/transition';
```

Depends on: core (theme + icons)

## Variants

### fade (default)

```tsx
<Toggle preset="fade" />
```

### preset={['fade', 'slide-up']}

```tsx
<Toggle preset={['fade', 'slide-up']} distance={32} />
```

### preset='pop' — spring

```tsx
<Toggle preset="pop" />
```

### preset={['fade', 'slide-right']}

```tsx
<Toggle preset={['fade', 'slide-right']} distance={48} />
```

### delay per index — staggered list

```tsx
<StaggeredList />
```

### exit before unmount

```tsx
<ExitBeforeUnmount />
```

## Full demo source

```tsx
const variants: VariantDef[] = [
  { label: 'fade (default)', content: <Toggle preset="fade" /> },
  { label: "preset={['fade', 'slide-up']}", content: <Toggle preset={['fade', 'slide-up']} distance={32} /> },
  { label: "preset='pop' — spring", content: <Toggle preset="pop" /> },
  { label: "preset={['fade', 'slide-right']}", content: <Toggle preset={['fade', 'slide-right']} distance={48} /> },
  { label: 'delay per index — staggered list', content: <StaggeredList /> },
  { label: 'exit before unmount', content: <ExitBeforeUnmount /> },
];
return <VariantList variants={variants} />;
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `children` | `React.ReactNode` | — | — |
| `visible?` | `boolean` | true | Mounts on true, exits (and unmounts) on false. |
| `preset?` | `TransitionPreset \| TransitionPreset[]` | fade | One or several: `['fade', 'scale']` combines opacity and scale. |
| `duration?` | `number` | tokens.duration.base | ms of the timing animation. |
| `delay?` | `number` | 0 | ms before starting. One delay per index staggers a list. |
| `distance?` | `number` | 24 | Pixels the slide presets travel. |
| `spring?` | `boolean` | — | Spring instead of timing (implicit in 'pop'). |
| `appear?` | `boolean` | true | Also animates the first render. On false it starts already present. |
| `keepMounted?` | `boolean` | false | Keeps the node mounted on exit, only hides it. |
| `value?` | `Animated.Value` | — | Progress 0→1 driven from outside. With this, Transition only interpolates: whoever passes it decides when and how it advances (a PanResponder, for example). |
| `onEntered?` | `() => void` | — | — |
| `onExited?` | `() => void` | — | — |
| `style?` | `StyleProp<ViewStyle>` | — | — |