Edge to edge support

[alejandroacho]

📄 Description

When using the spotlight tour on Android with edge to edge enabled (which will be the standard since now on), the overlay does not cover the full screen on android devices. Maybe because of the new navbar API changes.

📸 Demo

Three-button navbar	Modern gesture navbar

Dependencies:

    "@react-navigation/elements": "^2.4.1",
    "@react-navigation/native": "^7.1.6",
    "expo": "53.0.11",
    "expo-blur": "~14.1.5",
    "expo-constants": "~17.1.5",
    "expo-font": "~13.3.1",
    "expo-haptics": "~14.1.4",
    "expo-image": "~2.3.0",
    "expo-linking": "~7.1.4",
    "expo-localization": "~16.1.5",
    "expo-navigation-bar": "~4.2.5",
    "expo-router": "~5.1.0",
    "expo-splash-screen": "~0.30.9",
    "expo-sqlite": "~15.2.12",
    "expo-status-bar": "~2.2.3",
    "expo-symbols": "~0.4.5",
    "expo-system-ui": "~5.0.8",
    "expo-web-browser": "~14.1.6",
    "nativewind": "^4.1.23",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-hook-form": "^7.56.2",
    "react-native": "0.79.3",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-keyboard-controller": "^1.17.1",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-spotlight-tour": "^3.0.1",
    "react-native-svg": "15.11.2",
    "react-native-toast-message": "^2.3.0",

❓ How to reproduce

I'm using the provider with the following props:

      <SpotlightTourProvider
        steps={getTourSteps()}
        overlayColor="gray"
        overlayOpacity={0.36}
        nativeDriver={true}
        motion="fade"
        shape="rectangle"
      >

[rollingtroost]

got same issue

[virajpsimformsolutions]

Same issue for me. Please fix this issue.

[gregoryalary]

Sam issue for me, I'll see if I can find the root cause!

[d-laskowski-trojmiasto]

In my case overlay properly covers entire screen but highlighted elements are misplaced like here:
https://i.imgur.com/lDwgpTa.png
The blue icon should be highlighted
I tried to apply a patch from this PR #197 but it doesn't solve the issue

[d-laskowski-trojmiasto]

I managed to fix my problem with this patch

diff --git a/node_modules/react-native-spotlight-tour/src/lib/components/tour-overlay/TourOverlay.component.tsx b/node_modules/react-native-spotlight-tour/src/lib/components/tour-overlay/TourOverlay.component.tsx
index 127c1d6..955d16f 100644
--- a/node_modules/react-native-spotlight-tour/src/lib/components/tour-overlay/TourOverlay.component.tsx
+++ b/node_modules/react-native-spotlight-tour/src/lib/components/tour-overlay/TourOverlay.component.tsx
@@ -49,6 +49,8 @@ import { RectShape } from "./shapes/RectShape.component";
 import type { Optional, ToOptional } from "../../../helpers/common";
 import type { ShapeProps } from "../../../helpers/shape";
 
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 export interface TourOverlayRef {
   hideTooltip: () => Promise<Animated.EndResult>;
 }
@@ -180,6 +182,8 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
     },
   }), [current, useNativeDriver]);
 
+  const insets = useSafeAreaInsets();
+
   return (
     <Modal
       animationType="fade"
@@ -202,7 +206,7 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
             <Mask id="mask" x={0} y={0} height="100%" width="100%">
               <Rect height={vh(100)} width={vw(100)} fill="#fff" />
               <ShapeMask
-                spot={spot}
+                spot={{...spot, y: spot.y + (Platform.OS === "android" ? insets.top : 0)}}
                 setReference={refs.setReference}
                 motion={stepMotion}
                 padding={shapeOptions.padding}

[ashutosh7i]

this solution above- #181 (comment)
with patch-package resolved the issue of overlay misalignment.

[boraprobauer]

One leg of this issue — the highlighted element misplaced symptom (spot shifted up by exactly the status bar inset under edge-to-edge) — turned out to have a distinct root cause from the overlay-coverage problem: a frame mismatch between measureInWindow (which subtracts the visible-frame top on Android) and the overlay Modal (which draws from the physical screen top under edge-to-edge enforcement). We posted the full analysis, measurements and an app-tested self-calibrating patch over in #203, in case it helps anyone landing here with that variant.