React Native Spotlight Tour - API Reference / SpotlightTourProviderProps

Interface: SpotlightTourProviderProps

Table of contents

Properties

Properties

children

• children: ReactNode | ChildFn<SpotlightTour>

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 funtion, the SpotlightTour context can be accessed from the first argument.

Defined in

package/src/lib/SpotlightTour.provider.tsx:36

floatingProps

• Optional floatingProps: FloatingProps

Specifies FloatingProps in order to configure Floating UI in all tour steps layout.

Default

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

Default

placement: "bottom"

Defined in

package/src/lib/SpotlightTour.provider.tsx:44

motion

• Optional motion: Motion

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

Default

bounce

Defined in

package/src/lib/SpotlightTour.provider.tsx:51

nativeDriver

• Optional nativeDriver: boolean | OSConfig<boolean>

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

Defined in

package/src/lib/SpotlightTour.provider.tsx:60

onBackdropPress

• Optional onBackdropPress: BackdropPressBehavior

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 franular 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.

Defined in

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

onStop

• Optional onStop: (values: StopParams) => void

Type declaration

▸ (values): void

Handler which gets executed when stop is invoked. It receives the StopParams 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.

Parameters
Name Type
values StopParams
Returns

void

Defined in

package/src/lib/SpotlightTour.provider.tsx:80

overlayColor

• Optional overlayColor: ColorValue

The color of the overlay of the tour.

Default

black

Defined in

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

overlayOpacity

• Optional overlayOpacity: number

The opacity applied to the overlay of the tour (between 0 to 1).

Default

0.45

Defined in

package/src/lib/SpotlightTour.provider.tsx:92

shape

• Optional shape: Shape

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

Default

circle

Defined in

package/src/lib/SpotlightTour.provider.tsx:99

spotPadding

• Optional spotPadding: number

Defines the padding of the spot shape based on the wrapped component, so a zero padding means the spot shape will fit exaclty around the wrapped component. The padding value is a number in points.

Default

16;

Defined in

package/src/lib/SpotlightTour.provider.tsx:107

steps

• steps: TourStep[]

An array of TourStep objects that define each step of the tour.

Defined in

package/src/lib/SpotlightTour.provider.tsx:111