Onboarding
A minimal swipeable welcome flow. Illustrations float and drift with a parallax, copy slides in behind them, the active dot stretches into a pill and the round next button grows into “Get started” on the last step — all tied to the swipe. Respects Reduce Motion.
Pro
9:41
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| steps Pages to show. illustration is a node or 'capture' | 'insights' | 'together'. | { title, body, illustration?, color? }[] | 3 product steps |
| onDone Pressed the final button. | () => void | — |
| onSkip Pressed Skip. | () => void | onDone |
| onIndexChange The visible step changed. | (index: number) => void | — |
| skipLabel Skip button text. | string | 'Skip' |
| nextLabel Accessibility label of the round next button. | string | 'Next' |
| doneLabel Button text on the last step. | string | 'Get started' |
| accent Active dot, primary button and built-in illustration colour. | string | theme accent |
| style Root style. | StyleProp<ViewStyle> | — |
Source
Did you like the content?