Steps — React Native component

Installation

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

npx orn-ui add steps

Or install the whole package and import it

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

Depends on:core (theme + icons)

Usage

when to use — Showing progress through a known sequence. It only displays state — Wizard is the one that navigates.
orientation — `horizontal` for three or four short steps; `vertical` when the labels are long.
completedIndicator — A check by default; `number` when the step number is what people refer to.
onStepPress — Makes each step tappable. Only wire it if going back is actually allowed.

Demo clip not recorded yet — see MEDIA.md

Variants

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>

Full demo source

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

Name	Type	Default	Description
`steps`	`StepItem[]`	—	—
`current`	`number`	—	Index of the current step (0-based). Earlier ones are marked 'completed'.
`orientation?`	`'horizontal' \| 'vertical'`	horizontal	—
`completedIndicator?`	`'number' \| 'check'`	check	What the circle of a completed step shows: a check, or its number.
`onStepPress?`	`(index: number) => void`	—	If passed, every step becomes tappable and reports its index.
`style?`	`StyleProp<ViewStyle>`	—	—