import { CoachmarkTour } from '@uhg-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.
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
| Name | Type | Default | Description |
|---|---|---|---|
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | The component children | |
dismissible | boolean | undefined | true | Whether coachmarks can be dismissed |
initialStep | number | undefined | 1 | Initial step when tour starts |
isStarted | boolean | undefined | false | Start the coachmark tour |
onComplete | (() => void) | undefined | Callback fired when tour is completed | |
onNext | ((nextStepId: number) => void) | undefined | Called after the tour advances to the next step. The new step ID is provided for tracking purposes (e.g. persisting resume position). | |
onPrevious | ((previousStep: number) => void) | undefined | Callback fired when previous button is pressed | |
onSkip | (() => void) | undefined | Callback fired when tour is skipped via close button press | |
position | "above" | "below" | undefined | Default coachmark position (can be overridden per step) | |
type | "light" | "dark" | "light-border" | undefined | light-border | coachmark variant |
CoachmarkTour.Step Props
| Name | Type | Required | Description |
|---|---|---|---|
children | ReactElement<any, string | JSXElementConstructor<any>> | The component to highlight | |
description | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | Coachmark description content | |
heading | string | undefined | Coachmark heading text | |
position | "above" | "below" | undefined | Override auto-calculated position | |
stepId | number | Unique step identifier | |
wrapperStyle | StyleObject<"View"> | undefined | style object passed into coachmark target element's wrapper View |
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 |