Transition — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add transition

Or install the whole package and import it

pnpm add orn-ui
import { Transition } from 'orn-ui/transition';

Depends on:core (theme + icons)

Usage

when to use — Mounting/unmounting a node with a native-thread animation instead of a hard cut. Modal, BottomSheet and Toast already use it internally.
visible — Mounts on `true`, exits (and unmounts, `onExited`) on `false`.
preset — One or an array — `['fade', 'slide-up']` combines opacity and a slide. `pop` is a spring by default.
delay — One index per item staggers a list — no need for a separate library.
value — Hands progress (0→1) to an outside driver, e.g. a PanResponder, instead of a timing/spring.

Demo clip not recorded yet — see MEDIA.md

Variants

fade (default)

<Toggle preset="fade" />

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

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

preset='pop' — spring

<Toggle preset="pop" />

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

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

delay per index — staggered list

<StaggeredList />

exit before unmount

<ExitBeforeUnmount />

Full demo source

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

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

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>`	—	—