-
Notifications
You must be signed in to change notification settings - Fork 39
Description
Environment:
react-native-spotlight-tour version: 4.0.0
React Native: 0.81.5
Expo: ~54.0.0
Platform: Android (affected), iOS (works correctly as measureInWindow handles status bar automatically on iOS)
Problem:
On Android, the measureInWindow() method returns a y-coordinate that does not include the status bar height. As a result, the spotlight (highlight) appears shifted upward — either overlapping the status bar or positioned incorrectly above the target element.
Expected behavior:
The spotlight should start correctly below the status bar, aligned properly with the wrapped element's position on screen.
Actual behavior:
The y value from measureInWindow() is measured from the very top of the screen (including status bar area), so no offset is applied → spotlight is offset by the status bar height (usually ~24–48px depending on device).
Workaround / Suggested Fix:
In src/lib/components/attach-step/AttachStep.component.tsx, inside the measureInWindow callback, add a platform-specific adjustment for Android:
tsx
ref.current?.measureInWindow((x, y, width, height) => {
const statusBarHeight = StatusBar.currentHeight || 0;
const adjustedY = Platform.OS === "android" ? y + statusBarHeight : y;
changeSpot({ height, width, x, y: adjustedY });
});
This simple offset fixes the positioning perfectly. I applied it using patch-package and it works reliably in my Expo project.
Steps to Reproduce:
Create an Expo project and install react-native-spotlight-tour@4.0.0.
Wrap a component near the top of the screen (e.g., a header or button) with ....
Start the tour on an Android emulator or physical device.
Observe that the spotlight is positioned too high (overlapping or above the status bar / wrong alignment).
Screenshots (optional — add if you have them):
Before fix: [upload screenshot showing wrong spotlight position]
After fix: [upload screenshot showing correct position]
Additional context:
This issue is Android-specific because iOS's measureInWindow() already accounts for the status bar / safe area.
No impact on iOS or web.
Using patch-package is a good temporary workaround, but a native fix in the library would be ideal for all users.
Thanks for maintaining this great library — looking forward to a potential fix in a future release!
Feel free to add any extra details (like device model, Android version, or screenshots) before submitting.
If no similar issue exists (from my knowledge, there isn't one yet), this will be helpful for the maintainers. If you open it, share the issue link here — I'd love to see it!