Skip to content

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

@umarfarooq360

Description

@umarfarooq360

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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions