-
Notifications
You must be signed in to change notification settings - Fork 39
Open
Description
When using react-native-spotlight-tour v4.0.0 with Expo SDK 54 and the New Architecture (Fabric) enabled, the tour overlay (grey backdrop) displays correctly, but the spotlight cutout and tooltip (TourBox) are completely invisible.
The render function IS being called (confirmed via console logs), but the tooltip component is not visible on screen.
Environment
- react-native-spotlight-tour: 4.0.0
- Expo SDK: 54
- React Native: 0.79.x (via Expo 54)
- react-native-screens: ~4.16.0
- New Architecture (Fabric): Enabled (
"newArchEnabled": truein app.json) - Platform: iOS (iPhone, tested on simulator and device)
- Navigation: expo-router ~6.0.21 (built on React Navigation)
Steps to Reproduce
- Create an Expo 54 app with New Architecture enabled
- Install
react-native-spotlight-tour@^4.0.0 - Wrap app with
SpotlightTourProviderat root level - Define tour steps using
TourBoxin render function - Add
AttachStepcomponents to elements - Call
start()to begin tour
Expected Behavior
- Grey overlay should appear ✓
- Spotlight cutout should highlight the AttachStep element ✗
- TourBox tooltip should appear near the highlighted element ✗
Actual Behavior
- Grey overlay appears correctly
- No spotlight cutout visible
- No tooltip visible
- Render function IS called (confirmed via console.log inside render)
- Tour status shows
"running"with correctcurrentstep index
Debugging Findings
When attempting to use React Native's Element Inspector to inspect the grey overlay, we get this error:
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels