React Native Spotlight Tour - API Reference

React Native Spotlight Tour - API Reference / SpotlightTourProviderProps

Interface: SpotlightTourProviderProps

Defined in: package/src/lib/SpotlightTour.provider.tsx:31

Configuration object which accepts Floating Ui middleware, placement and sameScrollView configurations.

Extends

TooltipProps

Properties

arrow?

optional arrow: number | boolean | ArrowOptions

Defined in: package/src/lib/SpotlightTour.context.ts:155

Tooltip arrow options. It accepts 3 types of value:

boolean: When false, disable rendering the arrow. While true renders using the default values.
number: Use it to change the size of the arrow only.
object: Options to further customize the arrow style.

Default

Inherited from

TooltipProps.arrow

children

children: ReactNode | ChildFn<SpotlightTour>

Defined in: package/src/lib/SpotlightTour.provider.tsx:38

The children to render in the provider. It accepts either a React component, or a function that returns a React component. When the child is a function, the SpotlightTour context can be accessed from the first argument.

flip?

optional flip: boolean | FlipOptions

Defined in: package/src/lib/SpotlightTour.context.ts:161

Enables flipping the placement of the tooltip in order to keep it in view.

Default

true

Inherited from

TooltipProps.flip

motion?

optional motion: Motion

Defined in: package/src/lib/SpotlightTour.provider.tsx:45

Sets the default transition motion for all steps. You can override this value on each step too.

Default

bounce

nativeDriver?

optional nativeDriver: boolean | OSConfig<boolean>

Defined in: package/src/lib/SpotlightTour.provider.tsx:54

Define if the animations in the tour should use the native driver or not. A boolean can be used to apply the same value to both Android and iOS, or an object with android and ios keys can be used to define a value for each OS.

Default

false

offset?

optional offset: number

Defined in: package/src/lib/SpotlightTour.context.ts:167

Offset points between the tooltip and the spotlight.

Default

Inherited from

TooltipProps.offset

onBackdropPress?

optional onBackdropPress: BackdropPressBehavior

Defined in: package/src/lib/SpotlightTour.provider.tsx:66

Sets the default behavior of pressing the tour’s backdrop. You can use either one of the following values:

A callback function with the SpotlightTour options object in the first argument. This allows more granular control over the tour.
The continue literal string, which is a shortcut to move to the next step, and stop the tour on the last step.
the stop literal string, which is a shortcut to stop the tour.

NOTE: You can also override this behavior on each step configuration.

onPause()?

optional onPause: (values) => void

Defined in: package/src/lib/SpotlightTour.provider.tsx:72

Handler which gets executed when pause is invoked. It receives the TourState so you can access the step index where the tour paused.

Parameters

values

TourState

Returns

void

onResume()?

optional onResume: (values) => void

Defined in: package/src/lib/SpotlightTour.provider.tsx:78

Handler which gets executed when resume is invoked. It receives the ResumeParams so you can access the step index where the tour resumed.

Parameters

values

TourState

Returns

void

onStop()?

optional onStop: (values) => void

Defined in: package/src/lib/SpotlightTour.provider.tsx:86

Handler which gets executed when stop is invoked. It receives the TourState so you can access the current step index where the tour stopped and a bool value isLast indicating if the step where the tour stopped is the last one.