See it run
Five steps in the example app: the dim, the hole around each target, the scroll to one below the fold, the card flipping above, and the highlight at the end.
Three pieces
A provider that holds the tour, targets that mark the elements, and steps that reference those targets by id.
import { Cicerone } from '@salve-software/react-native-cicerone';
<Cicerone.Provider steps={STEPS} autoStart={shouldRun}>
<Cicerone.Target id="viewfinder">
<Viewfinder />
</Cicerone.Target>
</Cicerone.Provider>;
- Cicerone.Provider
Holds the tour, measures each step, and draws the overlay above its children.
- Cicerone.Target
Marks an element. The step with the same id measures it when its turn comes.
- steps
Copy, padding and radius for each step. Everything else has a default.
- autoStart
The gate. Flip it to true when you decide the tour should run.
No native code
Pure TypeScript. Nothing of ours to link or rebuild.
New Architecture ready
Measures with measureInWindow, not the deprecated findNodeHandle.
Handles scrolling
A target below the fold gets scrolled into view, then measured once the scroll settles.
Use our card or yours
The built in card works out of the box, and renderCard swaps it without losing the spotlight.
Placement follows the target
The card takes the side with room, and the arrow slides when clamping pulls them apart.
Works when nested
The overlay uses its own box, so a provider inside a sheet still lands on target.