stackbuilders / stackbuilders/react-native-spotlight-tour

Adding shape prop in SpotlightTourProvider causes app to crash when stop() is triggered

Open
#167 1 comment 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
520
Forks
39
PR merge metrics
No merged PRs in 30d

Description

When adding the shape prop to the SpotlightTourProvider, the app crashes unexpectedly when stop() method is triggered, and there is no console output or error message to help diagnose the issue.

Steps to Reproduce

  1. Wrap a component with SpotlightTourProvider.
    Pass a shape prop to the SpotlightTourProvider, for example:
const introTourSteps: TourStep[] = [
	{
		render: ({ stop }) => {
			return (
				<View>
					<Text>
						This is the first step of tour!
					</Text>
					<Button
						title='Stop!'
						onPress={stop}
					/>
				</View>
			);
		},
	},
]

return (
  <SpotlightTourProvider
    steps={introTourSteps}
    shape="rectangle"
  >
    {/* your component here that triggers start tour */}
  </SpotlightTourProvider>
)

2. Call the stop() method inside a tour step.
Expected Behavior: The tour ends.
Actual Behavior: The app crashes without logs when the shape prop is added to the SpotlightTourProvider.

Environment:
"react-native": "0.76.5",
"expo": "~52.0.20",
"react": "18.3.1",
"react-native-svg": "15.8.0"
Device/Simulator: iPhone 16 pro max
OS: iOS

Additional Information:
The issue only occurs when the shape prop is set in the SpotlightTourProvider. The value of the shape prop does not matter.

Work-around:
define shape prop inside introTourSteps instead like so:

	const introTourSteps: TourStep[] = [
		{
			shape: 'rectangle',
			render: ({ next }) => {
				return (
					<View style={styles.introTourView}>
						<Text style={styles.introTourText}>
							This is the first step of tour!
						</Text>
						<Button
							title='Stop!'
							onPress={stop}
						/>
					</View>
				);
			},
		},

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the SpotlightTourProvider entry point and reproduce the crash with the provider-level shape prop, then trigger stop() from a tour step. Compare that behavior with the documented per-step shape workaround; done means stopping the tour ends cleanly when any provider-level shape value is used on the stated iOS environment.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.