React Native Spotlight Tour - API Reference / TourStep

Interface: TourStep

Table of contents

Properties

Properties

before

• Optional before: () => void | Promise<void>

Type declaration

▸ (): void | Promise<void>

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

Defined in

package/src/lib/SpotlightTour.context.ts:112

floatingProps

• Optional floatingProps: FloatingProps

Specifies FloatingProps in order to configure Floating UI in a specific tour step layout.

Default

middlewares: [flip(), offset(4), shift()]

Default

placement: "bottom"

Defined in

package/src/lib/SpotlightTour.context.ts:120

motion

• Optional motion: Motion

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

Default

bounce

Defined in

package/src/lib/SpotlightTour.context.ts:127

onBackdropPress

• Optional onBackdropPress: BackdropPressBehavior

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.

Defined in

package/src/lib/SpotlightTour.context.ts:140

render

• render: (props: RenderProps) => ReactElement<any, string | JSXElementConstructor<any>>

Type declaration

▸ (props): ReactElement<any, string | JSXElementConstructor<any>>

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
Name Type
props RenderProps
Returns

ReactElement<any, string | JSXElementConstructor<any>>

Defined in

package/src/lib/SpotlightTour.context.ts:146

shape

• Optional shape: Shape

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

Default

circle

Defined in

package/src/lib/SpotlightTour.context.ts:153