React Native Spotlight Tour - API Reference

React Native Spotlight Tour - API Reference / TourStep

Interface: TourStep

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

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

Extends

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

20

Inherited from

TooltipProps.arrow

before()?

optional before: () => void | Promise<void>

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

Hook called right before the step starts. Useful to run effects or animations required fo the step to show correctly. If a promise is returned, the promise will be awaited before starting the step.

Returns

void | Promise<void>

Default

undefined

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.context.ts:197

Specifies the transition motion for the step. You can set the default motion globally on the SpotlightTourProvider props too.

Default

bounce

offset?

optional offset: number

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

Offset points between the tooltip and the spotlight.

Default

4

Inherited from

TooltipProps.offset

onBackdropPress?

optional onBackdropPress: BackdropPressBehavior

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

Overrides the behavior of pressing the tour’s backdrop for this specific step. 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 define a default behavior on the SpotlightTourProvider props.

placement?

optional placement: Placement

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

The placement of the tooltip relative to the spotlight.

Default

"bottom"

Inherited from

TooltipProps.placement

render()

render: (props) => ReactElement

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

A function or React function component to render the tooltip of the step. It receives the RenderProps so you can access the context of the tour within the tooltip.

Parameters

props

RenderProps

Returns

ReactElement

shape?

optional shape: Shape | ShapeOptions

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

Configures the spotlight shape for the step. You can set the default shape globally on the SpotlightTourProvider props too.

Default

circle

shift?

optional shift: boolean | ShiftOptions

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

Enables shifting the tooltip in order to keep it in view.

Default

{ padding: 8 }

Inherited from

TooltipProps.shift