import { CoachmarkTour } from '@abyss/mobile';Basic Usage
The CoachmarkTour system consists of two main components: CoachmarkTour (the provider) and CoachmarkTour.Step (wrapper for target elements). The tour displays Coachmarks in sequence to guide users through your interface.
Important: The children prop in CoachmarkTour.Step is different from Coachmark's children prop. In CoachmarkTour.Step, the children prop contains the target element to highlight, while the coachmark content should be passed via the description prop. This is unlike Coachmark where the children prop contains the coachmark content itself.
Tour Navigation
This example demonstrates navigation controls, multiple steps, position control, and different coachmark types. Users can skip the tour at any time using the close button, and callbacks are provided for navigation events.
Step Ordering
Steps are displayed in the order of their stepId regardless of their DOM order, giving you full control over the tour flow.
CoachmarkTour Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| dismissible | boolean | true | Whether coachmarks can be dismissed with close button |
| initialStep | number | 1 | The step to start the tour from |
| isStarted | boolean | false | Controls whether the tour is active |
| onComplete | function | - | Callback fired when tour is completed |
| onNext | function | - | Callback fired when user clicks Next button |
| onPrevious | function | - | Callback fired when user clicks Previous button |
| onSkip | function | - | Callback fired when tour is skipped via close button |
| position | 'above' | 'below' | - | Default position for all coachmarks (can be overridden per step). Options: above, below |
| type | 'dark' | 'light' | 'light-border' | light-border | Visual variant applied to all coachmarks in the tour. Options: dark, light, light-border |
CoachmarkTour.Step Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactElement | - | The target element to highlight during this step (not the coachmark content) |
| description | string | ReactNode | - | Content displayed in the coachmark body |
| heading | string | - | Title displayed in the coachmark |
| position | 'above' | 'below' | - | Preferred position for this step coachmark. Options: above, below |
| stepId | number | - | Unique identifier that determines the order of steps in the tour |
| wrapperStyle | ViewStyle | - | Style object applied to the wrapper around the target element |
CoachmarkTour Classes
| Class Name | Description |
|---|---|
| abyss-coachmark-tour-element-wrapper | Wrapper element around the target component |
| abyss-coachmark-tour-root | Root container for the tour |