stackbuilders / stackbuilders/react-native-spotlight-tour
Adding shape prop in SpotlightTourProvider causes app to crash when stop() is triggered
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
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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