Skip to content
GuidewayGuideway

TourProvider

TourProvider holds your tours, renders the spotlight overlay, and exposes the controller through context. Mount it once, near the root of your app, wrapping everything that needs a tour.

import { TourProvider } from 'guideway';


<TourProvider tours={tours} insets={insets}>
  <App />
</TourProvider>

Props

Section titled “Props”
Prop Type Default Description
tours TourDefinition[] [] Tours to register up front.
insets Insets { top: 0, right: 0, bottom: 0, left: 0 } Safe-area insets. Pass useSafeAreaInsets(). Required for correct Android positioning.
colorScheme 'light' | 'dark' | 'auto' 'light' Theme base. 'auto' follows the device.
theme ThemeOverride - Partial theme, deep-merged over the light/dark base.
defaultCutout Cutout { shape: 'rounded', padding: 8, radius: 12 } Default spotlight shape; a step’s cutout overrides it.
tooltipComponent TooltipComponent - Global custom tooltip. A step’s render takes precedence.
overlayTapBehavior 'next' | 'skip' | 'none' 'next' What tapping the dimmed scrim does.
allowTargetInteraction boolean false Let taps pass through the spotlight hole to the real element.
storage TourStorage - Storage adapter (AsyncStorage / MMKV) that enables showOnce tours.
storageKeyPrefix string 'guideway:seen:' Key prefix for the persisted “seen” flags.

Notes

Section titled “Notes”
  • The provider renders its overlay host in place (not a Modal), so it composes with your navigation.
  • The keyboard is dismissed automatically on every step change.
  • See Types for the shapes of TourDefinition, ThemeOverride, Cutout, and TourStorage.

Example

Section titled “Example”
<TourProvider
  tours={tours}
  insets={insets}
  colorScheme="auto"
  theme={{ accent: '#397fbc' }}
  overlayTapBehavior="skip"
  allowTargetInteraction
  storage={AsyncStorage}
>
  <App />
</TourProvider>