Transition — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add transition

O instala el paquete completo e impórtalo

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

Depende de:core (theme + icons)

Uso

cuándo usarlo — Montar/desmontar un nodo con animación en el hilo nativo en vez de un corte seco. Modal, BottomSheet y Toast ya lo usan internamente.
visible — Entra en `true`, sale (desmonta, `onExited`) en `false`.
preset — Uno o un array — `['fade', 'slide-up']` combina opacidad y un slide. `pop` es un spring por defecto.
delay — Un índice por ítem escalona una lista — sin necesitar otra librería.
value — Le pasa el progreso (0→1) a un driver externo, p.ej. un PanResponder, en vez de un timing/spring.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

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

Código completo del demo

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

Además acepta testID, que se reenvía al nodo raíz. Existe para los tests end-to-end (Maestro maneja la app por el árbol de accesibilidad) y no cambia en nada cómo se ve ni cómo se comporta el componente.

Nombre	Tipo	Por defecto	Descripción
`children`	`React.ReactNode`	—	—
`visible?`	`boolean`	true	Entra cuando es true, sale (y desmonta) cuando es false.
`preset?`	`TransitionPreset \| TransitionPreset[]`	fade	Uno o más: 'fade scale' combina opacidad y escala.
`duration?`	`number`	tokens.duration.base	Duración del timing en ms.
`delay?`	`number`	0	ms antes de arrancar. Un delay por índice escalona una lista.
`distance?`	`number`	24	Píxeles que recorren los presets de slide.
`spring?`	`boolean`	—	Spring en vez de timing (implícito en 'pop').
`appear?`	`boolean`	true	Anima también el primer render. En false arranca ya presente.
`keepMounted?`	`boolean`	false	Deja el nodo montado al salir, solo lo esconde.
`value?`	`Animated.Value`	—	Progreso 0→1 manejado desde afuera. Con esto, Transition solo interpola: quien lo pasa decide cuándo y cómo avanza (un PanResponder, por ejemplo).
`onEntered?`	`() => void`	—	—
`onExited?`	`() => void`	—	—
`style?`	`StyleProp<ViewStyle>`	—	—