rn-interactive-walkthrough API

Interfaces

ContentComponentProps

The props injected into every content component (like the example Tooltip).

A content component is a React component that receives ctx and step, plus any contentComponentProps the step configured. It is rendered above the mask by the WalkthroughProvider.

Properties

ctx

ctx: WalkthroughContextType

The walkthrough context.

step

step: WalkthroughStepType

The step currently being displayed.

---

LayoutAdjustments

Adjustments applied on top of a measured WalkthroughStepMask to tweak where the mask ends up, e.g. to add padding around the target or to clamp it to the screen. See useWalkthroughStep.

Properties

addHeight?

optional addHeight?: number

Adds to (or subtracts from) the mask's height.

addPadding?

optional addPadding?: number

Shorthand for adding padding on all sides of the mask.

addWidth?

optional addWidth?: number

Adds to (or subtracts from) the mask's width.

addX?

optional addX?: number

Adds to (or subtracts from) the mask's x.

addY?

optional addY?: number

Adds to (or subtracts from) the mask's y.

height?

optional height?: number

Overrides the mask's height entirely.

maxX?

optional maxX?: number

The maximum x the computed mask may have.

maxY?

optional maxY?: number

The maximum y the computed mask may have.

minX?

optional minX?: number

The minimum x the computed mask may have.

minY?

optional minY?: number

The minimum y the computed mask may have.

width?

optional width?: number

Overrides the mask's width entirely.

x?

optional x?: number

Overrides the mask's x entirely.

y?

optional y?: number

Overrides the mask's y entirely.

---

WalkthroughBackdropAnimations

The animations used for the backdrop and the mask between steps.

entering/exiting are the same props as ComponentLayoutProps entering/exiting; easing drives the mask morph between steps.

Properties

easing

easing: WalkthroughEasing

Easing curve for the mask transition between steps

entering

entering: EntryOrExitLayoutType | undefined

Enter/exits for the backdrop pressables

exiting

exiting: EntryOrExitLayoutType | undefined

Exits for the backdrop pressables

---

WalkthroughCallback

The payload of the step lifecycle callbacks, WalkthroughStepType.onStart and WalkthroughStepType.onFinish.

Properties

time

time: Date

The time at which the callback fired.

---

WalkthroughContextType

The context made available to every consumer through useWalkthrough, and passed to every content component as ContentComponentProps.ctx.

It exposes the current state of the walkthrough (current step, progress) and the actions to drive it (start, stop, next, previous...).

The walkthrough behaves like a small state machine:

• Inactive (no step is active): the only valid transition is start(), which begins the walkthrough. goTo, next and previous are no-ops.
• Active (a step is active): goTo, next and previous navigate within the walkthrough. start() is a no-op.
• stop() hides the overlay from either state.

Type Parameters

Type Parameter	Default type
P extends ContentComponentProps	ContentComponentProps

Properties

animationDuration

animationDuration: number

The base duration (in ms) used by the default animations. Defaults to 300.

animations

animations: WalkthroughLayoutAnimations

The merged animation configuration used by the displayer.

backdropColor

backdropColor: string

The color of the backdrop behind the mask, from WalkthroughOptions.backdropColor. Defaults to "#000000DA".

contentComponent?

optional contentComponent?: ComponentType<P>

The fallback content component used by steps that don't specify their own WalkthroughStepType.contentComponent. See WalkthroughOptions.contentComponent.

currentStep

currentStep: WalkthroughStepType<ContentComponentProps> | undefined

The step currently being displayed, or undefined when inactive.

currentStepNumber

currentStepNumber: number | undefined

The number of the current step, or undefined when inactive.

debug

debug: boolean

Whether debug logging is enabled, from WalkthroughOptions.debug. Defaults to false.

goTo

goTo: (number: number) => void

Jumps directly to the step with the given number.

Only works while active: when the walkthrough is not running, goTo is a no-op. It also does nothing if no registered step has that number.

Parameters

Parameter	Type
number	number

Returns

void

isActive

isActive: boolean

Whether the walkthrough is currently running (a step is active).

isFirstStep

isFirstStep: boolean

Whether the current step is the first one (number === 1). Always false when inactive.

isLastStep

isLastStep: boolean

Whether the current step is the last registered one (the highest number). Always false when inactive.

isReady

isReady: boolean

Whether a step with number === 1 is registered, so start() can run.

layoutAdjustments?

optional layoutAdjustments?: LayoutAdjustments

Adjusts the measured mask, e.g. to add padding.

maskAllowInteraction

maskAllowInteraction: boolean

Whether touches inside the mask should pass through to the target view. Defaults to false.

next

next: () => void

Advances to the next step. Stays put on the last step, and does nothing while inactive.

Returns

void

previous

previous: () => void

Goes back to the previous step. Stays put on the first step, and does nothing while inactive.

Returns

void

pulse

pulse: WalkthroughPulse

The merged pulse configuration used by the displayer.

registerStep

registerStep: (step: WalkthroughStepType) => void

Registers a step, replacing any previously registered step with the same WalkthroughStepType.identifier. This is the upsert used by useWalkthroughStep.

Parameters

Parameter	Type
step	WalkthroughStepType

Returns

void

start

start: (stepNumber?: number) => void

Starts the walkthrough from the first registered step.

If a stepNumber is given, the walkthrough starts on that step instead. It only works while inactive: once a step is active, start() is a no-op (use goTo to move around inside a running walkthrough). If no registered step matches the requested number (or no steps are registered at all), it does nothing and stays inactive.

Parameters

Parameter	Type
stepNumber?	number

Returns

void

steps

steps: WalkthroughStepType<ContentComponentProps>[]

All registered steps, sorted by WalkthroughStepType.number.

stop

stop: () => void

Stops the walkthrough and hides the overlay.

Returns

void

unregisterStep

unregisterStep: (identifier: string) => void

Removes the step identified by WalkthroughStepType.identifier, if it is registered. This is used by useWalkthroughStep on unmount so steps for views that are no longer mounted don't linger in the provider's list. Does nothing if no step matches.

Parameters

Parameter	Type
identifier	string

Returns

void

updateStep

updateStep: (identifier: string, step: Partial<P>) => void

Merges the given partial props into the step identified by WalkthroughStepType.identifier, if it is registered. Does nothing if no step matches.

Parameters

Parameter	Type
identifier	string
step	Partial<P>

Returns

void

useIsFocused

useIsFocused: () => boolean

A hook used to determine whether the current screen is focused. Can be overridden through WalkthroughOptions.useIsFocused. Defaults to a hook that always returns true.

Returns

boolean

---

WalkthroughLayoutAnimations

The full animation configuration for the walkthrough, with a section for the backdrop/mask and a section for the step content container.

Properties

backdrop

backdrop: WalkthroughBackdropAnimations

Animations for the backdrop/pressable

content

content: ComponentLayoutProps

Layout animations for the step content container

---

WalkthroughOptions

The props accepted by the WalkthroughProvider.

Most settings are a partial pick of WalkthroughContextType (so the provider and the context agree on their shape), plus the optional animations overrides.

Extends

• Partial<Pick<WalkthroughContextType<P>, "useIsFocused" | "contentComponent" | "animationDuration" | "backdropColor" | "layoutAdjustments" | "maskAllowInteraction" | "debug">>

Type Parameters

Type Parameter
P extends ContentComponentProps

Properties

animationDuration?

optional animationDuration?: number

The base duration (in ms) used by the default animations. Defaults to 300.

Inherited from

Partial.animationDuration

animations?

optional animations?: PartialWalkthroughLayoutAnimations

Overrides for the default animations.

If omitted, the defaults are a fade for the backdrop and content (sized by animationDuration) and an elastic easing for the mask morph.

backdropColor?

optional backdropColor?: string

The color of the backdrop behind the mask, from WalkthroughOptions.backdropColor. Defaults to "#000000DA".

Inherited from

Partial.backdropColor

contentComponent?

optional contentComponent?: ComponentType<P>

The fallback content component used by steps that don't specify their own WalkthroughStepType.contentComponent. See WalkthroughOptions.contentComponent.

Inherited from

Partial.contentComponent

debug?

optional debug?: boolean

Whether debug logging is enabled, from WalkthroughOptions.debug. Defaults to false.

Inherited from

Partial.debug

layoutAdjustments?

optional layoutAdjustments?: LayoutAdjustments

Adjusts the measured mask, e.g. to add padding.

Inherited from

Partial.layoutAdjustments

maskAllowInteraction?

optional maskAllowInteraction?: boolean

Whether touches inside the mask should pass through to the target view. Defaults to false.

Inherited from

Partial.maskAllowInteraction

pulse?

optional pulse?: Partial<WalkthroughPulse>

Overrides for the mask pulse animation.

If omitted, the pulse is disabled by default. When enabled, the defaults are delay 400, duration 400, scale 1.05, with a fast ease-out.

useIsFocused?

optional useIsFocused?: () => boolean

A hook used to determine whether the current screen is focused. Can be overridden through WalkthroughOptions.useIsFocused. Defaults to a hook that always returns true.

Returns

boolean

Inherited from

Partial.useIsFocused

---

WalkthroughPulse

The pulse animation of the mask, i.e. the idle "breathe" the highlighted cut-out does to draw the eye once a step is settled on screen.

When the current step is visible and no longer morphing into place, the mask repeatedly scales between its base size and scale to hint that the target is actionable. The whole behavior is configured through one object, see WalkthroughOptions.pulse.

Properties

delay

delay: number

How long (in ms) to wait after the step finished animating into place before the pulse starts. Defaults to 400.

duration

duration: number

The base duration (in ms) of a single beat, i.e. how long one bigger-to-smaller (or smaller-to-bigger) transition takes. Defaults to 400.

easing

easing: WalkthroughEasing

Easing curve applied to each beat. Defaults to a fast ease-out.

enabled

enabled: boolean

Whether the pulse is active. Set to true to enable it (it is false by default, so existing walks don't change behavior).

scale

scale: number

The peak scale of the pulse, relative to the mask's base size. Values greater than 1 grow the mask, lower than 1 shrink it. Defaults to 1.05. Set to 1 to disable (in addition to WalkthroughPulse.enabled).

---

WalkthroughStepMask

The rectangle of the highlighted target, in screen coordinates.

A step uses this to tell the WalkthroughProvider where its target view sits so the mask can be drawn around it. It is normally produced by the hook by measuring the view, but can be supplied by hand, see WalkthroughStepType.mask.

Properties

allowInteraction

allowInteraction: boolean

Whether touches inside the mask should pass through to the target view instead of being swallowed by the walkthrough overlay.

height

height: number

The height (in dp) of the target.

width

width: number

The width (in dp) of the target.

x

x: number

The x coordinate (in dp) of the target's top-left corner.

y

y: number

The y coordinate (in dp) of the target's top-left corner.

---

WalkthroughStepProps

The props accepted by the WalkthroughStep component.

Like UseWalkthroughStep, but the target view is measured automatically: the component wraps its children in a View and wires up its own onLayout, so callers never handle measuring. A style can still be forwarded to that wrapper to size/position the highlight target.

Extends

• UseWalkthroughStep<P>

Type Parameters

Type Parameter	Default type
P extends ContentComponentProps	ContentComponentProps

Properties

animationDuration?

optional animationDuration?: number

Overrides the mask transition duration (in ms) for this step.

The mask morphs between steps over the provider's animationDuration (default 300ms). This lets a single step use a different duration. Falls back to the provider's duration when omitted.

Inherited from

UseWalkthroughStep.animationDuration

children

children: ReactNode

The content to highlight. It is wrapped in a View that is measured automatically; the mask covers exactly this wrapper (minus any WalkthroughStepType.layoutAdjustments).

computedMask?

optional computedMask?: WalkthroughStepMask

The final mask used for rendering, after layoutAdjustments are applied. Falls back to mask when not set.

Inherited from

UseWalkthroughStep.computedMask

contentComponent?

optional contentComponent?: ComponentType<P>

The component rendered as overlay content for this step. Falls back to the provider-level WalkthroughOptions.contentComponent when omitted.

Inherited from

UseWalkthroughStep.contentComponent

contentComponentProps?

optional contentComponentProps?: Omit<P, keyof ContentComponentProps>

Extra props passed to this step's contentComponent (or the provider's fallback), on top of ContentComponentProps.ctx and ContentComponentProps.step.

Inherited from

UseWalkthroughStep.contentComponentProps

fullScreen?

optional fullScreen?: boolean

When true, the whole screen is treated as the mask: the backdrop covers everything and the content renders on top.

Inherited from

UseWalkthroughStep.fullScreen

identifier?

optional identifier?: string

A stable unique id for this step. Used to dedupe registration and as the React key for the content container in the displayer. Defaults to the string of number when omitted.

Inherited from

UseWalkthroughStep.identifier

layoutAdjustments?

optional layoutAdjustments?: LayoutAdjustments

Adjusts the measured mask. Merged with WalkthroughOptions.layoutAdjustments per key, with the step's values taking precedence.

Inherited from

UseWalkthroughStep.layoutAdjustments

layoutLock?

optional layoutLock?: boolean

Only allow the onLayout to get set once. This is useful on for example, scrollable containers where the position on the page can change when you scroll.

Inherited from

UseWalkthroughStep.layoutLock

maskAllowInteraction?

optional maskAllowInteraction?: boolean

Whether touches inside the mask should pass through to the target view. Equivalent to WalkthroughStepMask.allowInteraction

Defaults to the provider's WalkthroughOptions.maskAllowInteraction value, which defaults to false (the target is blocked while highlighted).

Inherited from

UseWalkthroughStep.maskAllowInteraction

measureMask?

optional measureMask?: () => void

Re-measures the target and re-registers the step with fresh coordinates. Provided automatically by useWalkthroughStep.

Returns

void

Inherited from

UseWalkthroughStep.measureMask

number

number: number

The order of this step in the walkthrough. Must be unique among the registered steps; the walkthrough advances by going up these numbers.

Inherited from

UseWalkthroughStep.number

onBackground?

optional onBackground?: () => void

Called when the app goes to the background while this step is active.

Returns

void

Inherited from

UseWalkthroughStep.onBackground

onFinish?

optional onFinish?: (props: WalkthroughCallback) => void

Called when the walkthrough moves past this step.

Parameters

Parameter	Type
props	WalkthroughCallback

Returns

void

Inherited from

UseWalkthroughStep.onFinish

onPressBackdrop?

optional onPressBackdrop?: OnPressWithContextType

Called when the user taps the backdrop (outside the mask).

Inherited from

UseWalkthroughStep.onPressBackdrop

onPressMask?

optional onPressMask?: OnPressWithContextType

Called when the user taps inside the mask.

Inherited from

UseWalkthroughStep.onPressMask

onStart?

optional onStart?: (props: WalkthroughCallback) => void

Called when this step becomes active.

Parameters

Parameter	Type
props	WalkthroughCallback

Returns

void

Inherited from

UseWalkthroughStep.onStart

pulse?

optional pulse?: Partial<WalkthroughPulse>

Per-step overrides for the mask pulse. Merged with the provider-level WalkthroughOptions.pulse per key, with the step's values taking precedence.

Inherited from

UseWalkthroughStep.pulse

style?

optional style?: StyleProp<ViewStyle>

Style applied to the wrapping View. Use this to size and position the highlight target (e.g. { width: 200 } for fixed-size content).

---

WalkthroughStepType

A single step of the walkthrough, as resolved and stored by the WalkthroughProvider.

This is the full shape of a registered step. Callers usually build one through useWalkthroughStep, which measures the target and fills in mask and measureMask automatically.

Type Parameters

Type Parameter	Default type
P extends ContentComponentProps	ContentComponentProps

Properties

animationDuration?

optional animationDuration?: number

Overrides the mask transition duration (in ms) for this step.

The mask morphs between steps over the provider's animationDuration (default 300ms). This lets a single step use a different duration. Falls back to the provider's duration when omitted.

computedMask?

optional computedMask?: WalkthroughStepMask

The final mask used for rendering, after layoutAdjustments are applied. Falls back to mask when not set.

contentComponent?

optional contentComponent?: ComponentType<P>

The component rendered as overlay content for this step. Falls back to the provider-level WalkthroughOptions.contentComponent when omitted.

contentComponentProps?

optional contentComponentProps?: Omit<P, keyof ContentComponentProps>

Extra props passed to this step's contentComponent (or the provider's fallback), on top of ContentComponentProps.ctx and ContentComponentProps.step.

fullScreen?

optional fullScreen?: boolean

When true, the whole screen is treated as the mask: the backdrop covers everything and the content renders on top.

identifier

identifier: string

A stable unique id for this step. Used to dedupe registration and as the React key for the content container in the displayer. Defaults to the string of number when omitted.

layoutAdjustments?

optional layoutAdjustments?: LayoutAdjustments

Adjusts the measured mask. Merged with WalkthroughOptions.layoutAdjustments per key, with the step's values taking precedence.

layoutLock?

optional layoutLock?: boolean

Only allow the onLayout to get set once. This is useful on for example, scrollable containers where the position on the page can change when you scroll.

mask

mask: WalkthroughStepMask

The rectangle of the highlighted target. Normally measured automatically by useWalkthroughStep.

measureMask

measureMask: () => void

Re-measures the target and re-registers the step with fresh coordinates. Provided automatically by useWalkthroughStep.

Returns

void

number

number: number

The order of this step in the walkthrough. Must be unique among the registered steps; the walkthrough advances by going up these numbers.

onBackground?

optional onBackground?: () => void

Called when the app goes to the background while this step is active.

Returns

void

onFinish?

optional onFinish?: (props: WalkthroughCallback) => void

Called when the walkthrough moves past this step.

Parameters

Parameter	Type
props	WalkthroughCallback

Returns

void

onPressBackdrop?

optional onPressBackdrop?: OnPressWithContextType

Called when the user taps the backdrop (outside the mask).

onPressMask?

optional onPressMask?: OnPressWithContextType

Called when the user taps inside the mask.

onStart?

optional onStart?: (props: WalkthroughCallback) => void

Called when this step becomes active.

Parameters

Parameter	Type
props	WalkthroughCallback

Returns

void

pulse?

optional pulse?: Partial<WalkthroughPulse>

Per-step overrides for the mask pulse. Merged with the provider-level WalkthroughOptions.pulse per key, with the step's values taking precedence.

Type Aliases

ComponentLayoutProps

ComponentLayoutProps = Pick<AnimatedProps<ViewProps>, "entering" | "exiting" | "layout">

The reanimated layout animation props used by the walkthrough displayer: entering, exiting and layout.

These come from react-native-reanimated's AnimatedProps<ViewProps>.

---

ContentPlacement

ContentPlacement = { onLayout: (event: LayoutChangeEvent) => void; ready: boolean; side: ContentPlacementSide; top: number; }

The result of useContentPlacement.

Properties

onLayout

onLayout: (event: LayoutChangeEvent) => void

Attach this to the content's onLayout so the hook can measure its real size before deciding where to place it.

Parameters

Parameter	Type
event	LayoutChangeEvent

Returns

void

ready

ready: boolean

false until the content has been measured and placed. Keep the content hidden (e.g. opacity: 0) until this flips to true so it never renders at its provisional position.

side

side: ContentPlacementSide

Whether the content landed above or below the mask.

top

top: number

The final distance from the top of the screen, inside the safe area.

---

ContentPlacementOptions

ContentPlacementOptions = { gap?: number; margin?: number; }

Options for useContentPlacement.

Properties

gap?

optional gap?: number

Minimum distance between the content and the mask. Defaults to 12.

margin?

optional margin?: number

Minimum distance between the content and the safe-area edges (top and bottom bars are excluded from the up/down decision). Defaults to 20.

---

ContentPlacementSide

ContentPlacementSide = "above" | "below"

Whether the content ended up above or below the mask.

---

OnPressWithContextType

OnPressWithContextType = (context?: WalkthroughContextType) => void

A press handler for the mask or the backdrop.

Receives the walkthrough WalkthroughContextType so it can drive the walkthrough (e.g. (ctx) => ctx.next()). See WalkthroughStepType.onPressMask and WalkthroughStepType.onPressBackdrop.

Parameters

Parameter	Type
context?	WalkthroughContextType

Returns

void

---

PartialWalkthroughLayoutAnimations

PartialWalkthroughLayoutAnimations = { backdrop?: Partial<WalkthroughBackdropAnimations>; content?: Partial<ComponentLayoutProps>; }

The animations prop accepts partial overrides of any subset.

Mirrors WalkthroughLayoutAnimations, but every section and every property is optional so callers can override just the pieces they care about. See WalkthroughOptions.animations.

Properties

backdrop?

optional backdrop?: Partial<WalkthroughBackdropAnimations>

Same as WalkthroughLayoutAnimations.backdrop, but partial.

content?

optional content?: Partial<ComponentLayoutProps>

Same as WalkthroughLayoutAnimations.content, but partial.

---

UseWalkthroughStep

UseWalkthroughStep<P> = Omit<UseWalkthroughStepStrict<P>, "identifier" | "measureMask"> & Partial<Pick<UseWalkthroughStepStrict<P>, "identifier" | "measureMask">>

The input of useWalkthroughStep.

Like UseWalkthroughStepStrict, but WalkthroughStepType.identifier and WalkthroughStepType.measureMask are optional: the identifier defaults to the string of the step's number, and the hook provides its own measureMask.

Type Parameters

Type Parameter
P extends ContentComponentProps

---

UseWalkthroughStepStrict

UseWalkthroughStepStrict<P> = Omit<WalkthroughStepType<P>, "mask"> & { maskAllowInteraction?: boolean; }

Same as WalkthroughStepType, but with WalkthroughStepType.mask replaced by maskAllowInteraction.

Because the hook measures the target itself, callers never provide a full WalkthroughStepMask; instead they only opt into interaction through maskAllowInteraction.

Type Declaration

Name	Type	Description
maskAllowInteraction?	boolean	Whether touches inside the mask should pass through to the target view. Equivalent to WalkthroughStepMask.allowInteraction Defaults to the provider's WalkthroughOptions.maskAllowInteraction value, which defaults to false (the target is blocked while highlighted).

Type Parameters

Type Parameter
P extends ContentComponentProps

---

WalkthroughEasing

WalkthroughEasing = EasingFunction | EasingFunctionFactory

Easing curve applied to the mask transition between steps.

---

WalkthroughMaskCoordinates

WalkthroughMaskCoordinates = Omit<WalkthroughStepMask, "allowInteraction">

Position of a mask in screen coordinates.

Same as WalkthroughStepMask but without WalkthroughStepMask.allowInteraction, as produced by the hook when it measures the target.

Functions

useContentPlacement()

useContentPlacement(mask: WalkthroughMaskCoordinates, options?: ContentPlacementOptions): ContentPlacement

Positions content (like a tooltip) relative to a mask while keeping it entirely inside the safe area.

The mask coordinates must be relative to the same frame as react-native-safe-area-context (e.g. as measured by useWalkthroughStep). The hook measures the content's real size via ContentPlacement.onLayout, then decides whether it fits below the mask or has to flip above it. Unsafe areas are excluded from that decision: a bottom bar or top bar is never counted as usable space, and the final ContentPlacement.top is clamped so the whole content stays within the safe frame. The up/down choice is only used for measuring; the placed position always respects the safe area.

Parameters

Parameter	Type	Description
mask	WalkthroughMaskCoordinates	The mask to position the content against.
options	ContentPlacementOptions	Gap and safe-area margin. See ContentPlacementOptions.

Returns

ContentPlacement

---

useWalkthrough()

useWalkthrough(): WalkthroughContextType<ContentComponentProps>

Returns the walkthrough context, see WalkthroughContextType.

Must be called within a WalkthroughProvider, otherwise it throws. Use it to read the current step and to drive the walkthrough from your own code (start, stop, next, previous, goTo).

Returns

WalkthroughContextType<ContentComponentProps>

---

useWalkthroughStep()

useWalkthroughStep<P>(__namedParameters: UseWalkthroughStep<P>): { isVisible: boolean; onLayout: (event: LayoutChangeEvent) => void; onMeasure: (x: number, y: number, width: number, height: number) => void; step: WalkthroughStepType<ContentComponentProps> | undefined; }

Registers a walkthrough step and tracks the mask of the view it should highlight.

Attach the returned onLayout to the target view: the hook measures it and registers a step whose WalkthroughStepType.mask matches the measured rectangle (adjusted by WalkthroughStepType.layoutAdjustments). When the step is active, its content component renders above the mask.

The step is re-registered (upserted by WalkthroughStepType.identifier) whenever its target moves, as long as WalkthroughStepType.layoutLock is not set.

Type Parameters

Type Parameter	Default type
P extends ContentComponentProps	ContentComponentProps

Parameters

Parameter	Type
__namedParameters	UseWalkthroughStep<P>

Returns

{ isVisible: boolean; onLayout: (event: LayoutChangeEvent) => void; onMeasure: (x: number, y: number, width: number, height: number) => void; step: WalkthroughStepType<ContentComponentProps> | undefined; }

Name	Type
isVisible	boolean
onLayout()	(event: LayoutChangeEvent) => void
onMeasure()	(x: number, y: number, width: number, height: number) => void
step	WalkthroughStepType<ContentComponentProps> | undefined

---

WalkthroughProvider()

WalkthroughProvider<P>(__namedParameters: PropsWithChildren<WalkthroughOptions<P>>): Element

Wraps your app and provides the walkthrough to all consumers through useWalkthrough.

Renders the overlay (backdrop, mask and step content) on top of its children, and exposes the shared state (current step, progress) plus the actions to drive the walkthrough. See WalkthroughOptions for the accepted props.

Type Parameters

Type Parameter
P extends ContentComponentProps

Parameters

Parameter	Type
__namedParameters	PropsWithChildren<WalkthroughOptions<P>>

Returns

Element

---

WalkthroughStep()

WalkthroughStep<P>(__namedParameters: WalkthroughStepProps<P>): Element

Registers a walkthrough step and measures its target automatically.

This is the component form of useWalkthroughStep. It accepts the same options, but instead of returning an onLayout for you to attach, it wraps its WalkthroughStepProps.children in a View and wires up the measurement itself. The mask covers exactly that wrapping view (adjusted by WalkthroughStepType.layoutAdjustments).

Prefer this when you want to highlight a subtree without manually hooking onLayout; use useWalkthroughStep when you need to attach the handler to an existing view or a full-screen step.

Type Parameters

Type Parameter	Default type
P extends ContentComponentProps	ContentComponentProps

Parameters

Parameter	Type
__namedParameters	WalkthroughStepProps<P>

Returns

Element