Steps — componente React Native

Instalación

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

npx orn-ui add steps

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Steps } from 'orn-ui/steps';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Mostrar el avance dentro de una secuencia conocida. Solo muestra estado — el que navega es Wizard.
orientation — `horizontal` para tres o cuatro pasos cortos; `vertical` cuando las etiquetas son largas.
completedIndicator — Un check por defecto; `number` cuando la gente se refiere al paso por su número.
onStepPress — Hace tocable cada paso. Conviene conectarlo solo si volver atrás está realmente permitido.

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

Variantes

A checkout in progress — on the Payment step

<Steps steps={STEPS} current={1} />

completedIndicator="number" — the step count instead of a check

<Steps steps={STEPS} current={2} completedIndicator="number" />

orientation="vertical" — reads better with long descriptions

<Steps steps={STEPS} current={1} orientation="vertical" />

Before you start — nothing completed yet

<Steps steps={STEPS} current={0} />

All done — every step completed

<Steps steps={STEPS} current={3} />

Long labels — the row scrolls instead of breaking words

<Steps steps={LONG_STEPS} current={3} />

onStepPress — let people jump back and fix a step

<View style={{ gap: 16 }}>
  <Steps steps={STEPS} current={current} onStepPress={setCurrent} />
  <Button
    title="Advance"
    variant="outline"
    onPress={() => setCurrent((c) => Math.min(c + 1, STEPS.length))}
  />
</View>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'A checkout in progress — on the Payment step',
    content: <Steps steps={STEPS} current={1} />,
  },
  {
    label: 'completedIndicator="number" — the step count instead of a check',
    content: <Steps steps={STEPS} current={2} completedIndicator="number" />,
  },
  {
    label: 'orientation="vertical" — reads better with long descriptions',
    content: <Steps steps={STEPS} current={1} orientation="vertical" />,
  },
  {
    label: 'Before you start — nothing completed yet',
    content: <Steps steps={STEPS} current={0} />,
  },
  {
    label: 'All done — every step completed',
    content: <Steps steps={STEPS} current={3} />,
  },
  {
    // Cada paso tiene ancho mínimo: la fila scrollea antes que apretar las
    // columnas y dejar que RN parta las etiquetas a la mitad.
    label: 'Long labels — the row scrolls instead of breaking words',
    content: <Steps steps={LONG_STEPS} current={3} />,
  },
  {
    label: 'onStepPress — let people jump back and fix a step',
    content: (
      <View style={{ gap: 16 }}>
        <Steps steps={STEPS} current={current} onStepPress={setCurrent} />
        <Button
          title="Advance"
          variant="outline"
          onPress={() => setCurrent((c) => Math.min(c + 1, STEPS.length))}
        />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Nombre	Tipo	Por defecto	Descripción
`steps`	`StepItem[]`	—	—
`current`	`number`	—	Índice del paso actual (0-based). Los anteriores quedan como 'completed'.
`orientation?`	`'horizontal' \| 'vertical'`	horizontal	—
`completedIndicator?`	`'number' \| 'check'`	check	Qué muestra el círculo de un paso ya completado: un check, o su número.
`onStepPress?`	`(index: number) => void`	—	Si se pasa, cada paso es tocable y reporta su índice.
`style?`	`StyleProp<ViewStyle>`	—	—