Wizard

A wizard presents a series of steps in prescribed order. That the user needs to complete in order to accomplish a goal (e.g. purchase a product)
(code example)

note

Use Wizard with nested Wizard.Step(s) to achieve the desired result.

Usage

Live Editor

<Wizard activeIndex={0} onActiveIndexChanged={() => console.log('changed')}>
  {_.map(items, item => (
   return renderItem(item, index);
  ))}
</Wizard>

Result

Loading...

API

activeConfig

The configuration of the active step (see Wizard.Step.propTypes) WizardStepProps

activeIndex

The active step's index number

containerStyle

Add or override style of the container ViewStyle

onActiveIndexChanged

Callback that is called when the active step is changed (i.e. a step was clicked on). The new activeIndex will be the input of the callback (index: number) => void

testID

The component test id string