fix: set for edge to edge

Author: GabrielaAndocilla

.gitignore

@@ -24,3 +24,4 @@ local.properties
 
 # Packages
 *.tgz
+.DS_Store

README.md

@@ -32,6 +32,10 @@ for the following:
 - [React Native](https://reactnative.dev/) >= 0.50.0
 - [react-native-svg](https://github.com/react-native-svg/react-native-svg) >= 12.1.0
 
+## ✨ Edge-to-Edge Support
+
+This library supports edge-to-edge display, including Android 15's enforced edge-to-edge mode. The tour overlay automatically covers the full screen including system bars. When using edge-to-edge layouts, you may need to adjust spotlight positioning using the `coordinateAdjustment` prop or individual `offset` props on `AttachStep` components. See the [example app](example/) for a working edge-to-edge implementation.
+
 ## Install
 
 With `npm`:

example/android/app/src/main/java/com/spotlightexample/MainActivity.kt

@@ -1,12 +1,39 @@
 package com.spotlightexample
 
+import android.os.Build
+import android.os.Bundle
+import android.view.View
+import android.view.WindowInsetsController
+
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
 import com.facebook.react.defaults.DefaultReactActivityDelegate
 
 class MainActivity : ReactActivity() {
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(null)
+
+        val window = window
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            // Edge-to-edge for Android 11+
+            window.setDecorFitsSystemWindows(false)
+            val controller = window.insetsController
+            controller?.systemBarsBehavior =
+                WindowInsetsController.BEHAVIOR_SHOW_BARS_BY_SWIPE
+        } else {
+            // Edge-to-edge for older versions
+            @Suppress("DEPRECATION")
+            window.decorView.systemUiVisibility = (
+                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
+                        or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
+                        or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
+            )
+        }
+    }
+
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.

example/package.json

@@ -26,6 +26,7 @@
     "react-dom": "19.1.0",
     "react-is": "19.1.0",
     "react-native": "0.80.0",
+    "react-native-safe-area-context": "^5.6.1",
     "react-native-spotlight-tour": "workspace:^",
     "react-native-svg": "^15.12.0",
     "react-native-svg-web": "^1.0.9",

example/src/App.tsx

@@ -1,8 +1,10 @@
 import dedent from "dedent";
 import { type ReactElement, useCallback, useMemo } from "react";
-import { Alert, Animated, Button, Dimensions, SafeAreaView, Text, useAnimatedValue } from "react-native";
+import { Alert, Animated, Button, Dimensions, Platform, StatusBar, Text, View, useAnimatedValue } from "react-native";
 import {
   AttachStep,
+  type RenderProps,
+  type SpotlightTour,
   SpotlightTourProvider,
   TourBox,
   type TourState,
@@ -40,7 +42,7 @@ export function App(): ReactElement {
   }, []);
 
   const tourSteps = useMemo((): TourStep[] => [{
-    render: ({ next, pause }) => (
+    render: ({ next, pause }: RenderProps) => (
       <SpotDescriptionView>
         <DescriptionText>
           <BoldText>{"Tour: Intro section\n"}</BoldText>
@@ -59,7 +61,7 @@ export function App(): ReactElement {
     render: DocsTooltip,
   }, {
     arrow: true,
-    render: props => (
+    render: (props: RenderProps) => (
       <TourBox
         title="Tour: Customization"
         backText="Previous"
@@ -86,13 +88,13 @@ export function App(): ReactElement {
         Animated.spring(gap, {
           bounciness: 100,
           speed: 1,
-          toValue: Dimensions.get("screen").height * 0.25,
+          toValue: Dimensions.get("screen").height * 0.35,
           useNativeDriver: true,
         })
           .start(() => resolve());
       });
     },
-    render: ({ previous, stop }) => (
+    render: ({ previous, stop }: RenderProps) => (
       <SpotDescriptionView>
         <DescriptionText>
           <BoldText>{"Tour: Try it!\n"}</BoldText>
@@ -115,7 +117,12 @@ export function App(): ReactElement {
   }], []);
 
   return (
-    <SafeAreaView>
+    <View style={{
+      flex: 1,
+      paddingTop: Platform.OS === "android" ? StatusBar.currentHeight || 0 : 0,
+    }}
+    >
+      <StatusBar translucent={true} backgroundColor="transparent" barStyle="dark-content" />
       <SpotlightTourProvider
         steps={tourSteps}
         overlayColor="gray"
@@ -127,15 +134,16 @@ export function App(): ReactElement {
         motion="bounce"
         shape="circle"
         arrow={{ color: "#B0C4DE" }}
+        coordinateAdjustment={{ y: 50 }}
       >
-        {({ resume, start, status }) => (
+        {({ resume, start, status }: SpotlightTour) => (
           <>
-            {status !== "paused" && <Button title="Start" onPress={start} />}
+            {status !== "paused" && <View style={{ marginTop: 10 }}><Button title="Start" onPress={start} /></View>}
             {status === "paused" && <Button title="Resume" onPress={resume} />}
 
             <SectionContainerView>
-              <AttachStep index={1}>
-                <TitleText>{"Introduction"}</TitleText>
+              <AttachStep index={0}>
+                <TitleText>{"Introduction."}</TitleText>
               </AttachStep>
               <DescriptionText>
                 {dedent`
@@ -146,7 +154,7 @@ export function App(): ReactElement {
             </SectionContainerView>
 
             <SectionContainerView>
-              <AttachStep index={0}>
+              <AttachStep index={1}>
                 <TitleText>{"Documentation"}</TitleText>
               </AttachStep>
               <DescriptionText>
@@ -176,6 +184,6 @@ export function App(): ReactElement {
           </>
         )}
       </SpotlightTourProvider>
-    </SafeAreaView>
+    </View>
   );
 }

example/src/DocsTooltip.tsx

@@ -1,14 +1,14 @@
 import dedent from "dedent";
 import { Button } from "react-native";
-import { useSpotlightTour } from "react-native-spotlight-tour";
+import { type SpotlightTour, useSpotlightTour } from "react-native-spotlight-tour";
 
 import { BoldText, ButtonsGroupView, DescriptionText, SpotDescriptionView } from "./App.styles";
 
 import type { ReactElement } from "react";
 
 export function DocsTooltip(): ReactElement {
   // You can also use the hook instead of the props here!
-  const { next, previous } = useSpotlightTour();
+  const { next, previous }: SpotlightTour = useSpotlightTour();
 
   return (
     <SpotDescriptionView>

package/src/lib/SpotlightTour.context.ts

@@ -153,6 +153,11 @@ export interface TooltipProps {
    * @default 20
    */
   arrow?: ArrowOptions | boolean | number;
+  /**
+   * Global coordinate adjustment for all spotlight calculations.
+   * Useful for edge-to-edge layouts or custom status bar configurations.
+   */
+  coordinateAdjustment?: CoordinateAdjustment;
   /**
    * Enables flipping the placement of the tooltip in order to keep it in view.
    *
@@ -271,6 +276,10 @@ export interface SpotlightTourCtx extends SpotlightTour {
    * @param spot the spot layout
    */
   changeSpot: (spot: LayoutRectangle) => void;
+  /**
+   * Global coordinate adjustment for all spotlight calculations.
+   */
+  coordinateAdjustment?: CoordinateAdjustment;
   /**
    * The spotlight layout.
    */
@@ -290,6 +299,7 @@ export const ZERO_SPOT: LayoutRectangle = {
 
 export const SpotlightTourContext = createContext<SpotlightTourCtx>({
   changeSpot: () => undefined,
+  coordinateAdjustment: undefined,
   goTo: () => undefined,
   next: () => undefined,
   pause: () => undefined,
@@ -322,3 +332,14 @@ export function useSpotlightTour(): SpotlightTour {
     stop,
   };
 }
+
+export interface CoordinateAdjustment {
+  /**
+   * Global X offset to apply to all spotlight calculations
+   */
+  x?: number;
+  /**
+   * Global Y offset to apply to all spotlight calculations
+   */
+  y?: number;
+}

package/src/lib/SpotlightTour.provider.tsx

@@ -116,6 +116,7 @@ export const SpotlightTourProvider = forwardRef<SpotlightTour, SpotlightTourProv
   const {
     arrow,
     children,
+    coordinateAdjustment,
     flip,
     motion = "bounce",
     nativeDriver = true,
@@ -235,6 +236,7 @@ export const SpotlightTourProvider = forwardRef<SpotlightTour, SpotlightTourProv
 
   const tour = useMemo((): SpotlightTourCtx => ({
     changeSpot,
+    coordinateAdjustment,
     current,
     goTo,
     next,
@@ -246,7 +248,7 @@ export const SpotlightTourProvider = forwardRef<SpotlightTour, SpotlightTourProv
     status,
     steps,
     stop,
-  }), [changeSpot, current, goTo, next, previous, spot, start, steps, stop, pause]);
+  }), [changeSpot, coordinateAdjustment, current, goTo, next, previous, spot, start, steps, stop, pause]);
 
   useImperativeHandle(ref, () => ({
     current,
@@ -268,6 +270,7 @@ export const SpotlightTourProvider = forwardRef<SpotlightTour, SpotlightTourProv
       }
 
       <TourOverlay
+        coordinateAdjustment={coordinateAdjustment}
         backdropOpacity={overlayOpacity}
         color={overlayColor}
         current={current}

package/src/lib/components/attach-step/AttachStep.component.tsx

@@ -54,6 +54,14 @@ export interface AttachStepProps {
    * It can be a single index or multiple ones.
    */
   index: Array<number> | number;
+  /**
+   * Local offset adjustment for this specific AttachStep.
+   * This will be added to any global coordinate adjustment.
+   */
+  offset?: {
+    x?: number;
+    y?: number;
+  };
   /**
    * Style applied to AttachStep wrapper
    */
@@ -67,8 +75,8 @@ export interface AttachStepProps {
  * @param props the component props
  * @returns an AttachStep React element
  */
-export function AttachStep({ children, fill = false, index, style }: AttachStepProps): ReactElement {
-  const { changeSpot, current } = useContext(SpotlightTourContext);
+export function AttachStep({ children, fill = false, index, offset, style }: AttachStepProps): ReactElement {
+  const { changeSpot, coordinateAdjustment, current } = useContext(SpotlightTourContext);
 
   const ref = useRef<View>(null);
 
@@ -77,10 +85,22 @@ export function AttachStep({ children, fill = false, index, style }: AttachStepP
 
     if (current !== undefined && indexes.includes(current)) {
       ref.current?.measureInWindow((x, y, width, height) => {
-        changeSpot({ height, width, x, y });
+        // Apply global coordinate adjustment
+        const globalX = coordinateAdjustment?.x || 0;
+        const globalY = coordinateAdjustment?.y || 0;
+
+        // Apply local offset
+        const localX = offset?.x || 0;
+        const localY = offset?.y || 0;
+
+        // Combine all adjustments
+        const adjustedX = x + globalX + localX;
+        const adjustedY = y + globalY + localY;
+
+        changeSpot({ height, width, x: adjustedX, y: adjustedY });
       });
     }
-  }, [changeSpot, current, JSON.stringify(index)]);
+  }, [changeSpot, current, JSON.stringify(index), coordinateAdjustment, offset]);
 
   const onLayout = useCallback((event: LayoutChangeEvent): void => {
     updateSpot();

package/src/lib/components/tour-overlay/TourOverlay.component.tsx

@@ -187,6 +187,7 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
       supportedOrientations={["portrait", "landscape", "landscape-left", "landscape-right", "portrait-upside-down"]}
       transparent={true}
       visible={current !== undefined}
+      statusBarTranslucent={true}
     >
       <View testID="Overlay View" style={Css.overlayView}>
         <Svg