stackbuilders / stackbuilders/react-native-spotlight-tour

Tooltip not rendering on iOS with Expo 54 + New Architecture (Fabric) - overlay shows but TourBox/tooltip invisible

Open
#202 0 comments 0 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 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": true in app.json)
  • Platform: iOS (iPhone, tested on simulator and device)
  • Navigation: expo-router ~6.0.21 (built on React Navigation)

Steps to Reproduce

  1. Create an Expo 54 app with New Architecture enabled
  2. Install react-native-spotlight-tour@^4.0.0
  3. Wrap app with SpotlightTourProvider at root level
  4. Define tour steps using TourBox in render function
  5. Add AttachStep components to elements
  6. 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 correct current step index

Debugging Findings

When attempting to use React Native's Element Inspector to inspect the grey overlay, we get this error:

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 with SpotlightTourProvider, TourBox, AttachStep, and the iOS rendering path under Expo 54's Fabric architecture. Reproduce the issue using the listed steps and inspect why the overlay renders while the spotlight cutout and tooltip do not; done means both are visible with the tour running on iOS.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.