Wizard — React Native component

Installation

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

npx orn-ui add wizard

Or install the whole package and import it

pnpm add orn-ui
import { Wizard } from 'orn-ui/wizard';

Depends on:core (theme + icons)steps button transition

Usage

when to use — A multi-step flow with navigation. To only show progress, Steps is enough.
current / onStepChange — Optional: without them the Wizard keeps its own state, which covers most flows.
canGoNext — Per-step validation — the step declares whether it lets you move on.
allowStepNavigation — Lets people jump back to a completed step from the indicator.
scrollableContent — Off only if a step renders its own virtualized list.

Demo clip not recorded yet — see MEDIA.md

Variants

A simple 3-step flow — Wizard tracks the current step itself

<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} onFinish={() => {}} />
</View>

orientation="vertical" — the step list runs down the side

<View style={{ height: 380 }}>
  <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
</View>

completedIndicator="number" — count instead of a check

<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
</View>

A real signup — Next stays disabled until the step is valid

<View style={{ height: 340 }}>
  <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
</View>

Custom labels — rename Back / Next / Finish

<View style={{ height: 280 }}>
  <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
</View>

Full demo source

const variants: VariantDef[] = [
  {
    label: 'A simple 3-step flow — Wizard tracks the current step itself',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'orientation="vertical" — the step list runs down the side',
    content: (
      <View style={{ height: 380 }}>
        <Wizard steps={SIMPLE} orientation="vertical" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'completedIndicator="number" — count instead of a check',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} completedIndicator="number" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'A real signup — Next stays disabled until the step is valid',
    content: (
      <View style={{ height: 340 }}>
        <Wizard steps={validated} nextLabel="Continue" finishLabel="Create account" onFinish={() => {}} />
      </View>
    ),
  },
  {
    label: 'Custom labels — rename Back / Next / Finish',
    content: (
      <View style={{ height: 280 }}>
        <Wizard steps={SIMPLE} backLabel="Previous" nextLabel="Continue" finishLabel="Done" onFinish={() => {}} />
      </View>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Name	Type	Default	Description
`steps`	`WizardStep[]`	—	—
`current?`	`number`	—	Current step (controlled). If omitted, the Wizard keeps its own state.
`onStepChange?`	`(index: number) => void`	—	—
`onFinish?`	`() => void`	—	—
`orientation?`	`'horizontal' \| 'vertical'`	horizontal	—
`completedIndicator?`	`'number' \| 'check'`	check	—
`allowStepNavigation?`	`boolean`	true	Allows going back to an already completed step by tapping it in the indicator.
`backLabel?`	`string`	Back	—
`nextLabel?`	`string`	Next	—
`finishLabel?`	`string`	Finish	—
`scrollableContent?`	`boolean`	true	The step content scrolls when it does not fit. Set it to false only if a step renders its own virtualized list (nesting a VirtualizedList inside a ScrollView breaks virtualization).
`animated?`	`boolean`	true	The step content slides in following the navigation direction. Only opacity and transform, so the animation runs on the native thread.
`style?`	`StyleProp<ViewStyle>`	—	—