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}