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"
      >