rn-smart-tour 1.0.1 → 1.0.3

package/README.md

@@ -3,10 +3,11 @@
 An enterprise-grade Digital Adoption Platform (DAP) package for React Native. Easily add product tours, guided walkthroughs, and onboarding overlays directly into your app without intrusive code changes.
 
 ## Features
-- **Zero Config Measurement**: Wraps your components and seamlessly uses Native `measureInWindow` API.
-- **Auto-Start Engine**: Automatically triggers tours the moment specific features mount.
+- **Multi-Pass Measurement**: Wraps your components and uses the native `measureInWindow` API with a self-correcting, multi-pass strategy — so highlights land correctly even during screen-transition animations.
+- **Rotation & Resize Aware**: Automatically re-measures targets when screen dimensions change (rotation, split-screen, foldables).
+- **Debounced Auto-Start Engine**: Automatically triggers tours when target elements mount, with a built-in debounce to ensure the overlay uses fully settled coordinates.
 - **Seen State Caching**: Connect any local storage database to ensure users only see tours once.
-- **Smart Overlays**: Creates highlighted holes in backdrops over completely custom UIs.
+- **Smart Overlays**: Creates highlighted holes in backdrops over completely custom UIs, with Back/Next/Skip navigation.
 
 ## Installation
 
@@ -74,7 +75,7 @@ To start the walkthrough, just call `startTour` anywhere inside your app.
 
 ```tsx
 import { Button } from 'react-native';
-import { useDap } from 'react-native-app-tour';
+import { useDap } from 'rn-smart-tour';
 
 export const HelpMenu = () => {
     const { startTour } = useDap();
@@ -118,6 +119,58 @@ const myStorage = {
 <DapProvider tours={MY_TOURS} storageAdapter={myStorage}>
 ```
 
+### 2. How Measurement Works
+
+When a `<DapTarget>` mounts or re-layouts, it does **not** rely on a single measurement. Instead, it uses a **multi-pass strategy** to guarantee accuracy:
+
+| Pass | Delay | Purpose |
+|------|-------|---------|
+| 1st  | 100ms | Fast first estimate — may capture mid-animation coordinates |
+| 2nd  | 500ms | Self-corrects after most navigation transitions finish |
+| 3rd  | 1000ms | Final safety net for slow animations or async layout shifts |
+
+- Each new `onLayout` event **cancels** all pending timers and schedules fresh measurements.
+- A measurement is only sent to the Provider if the position has **actually changed** (>1pt threshold), avoiding unnecessary re-renders.
+- On **rotation/resize**, all targets automatically re-measure themselves.
+- On unmount, all timers are cleaned up and the target is unregistered.
+
+#### Auto-Start Debounce
+
+When `autoStart: true` is set on a tour, the overlay does **not** appear the instant a target registers. Instead, it waits **300ms** before starting. If a more accurate measurement arrives during that window (e.g., the 500ms pass corrects the 100ms pass), the debounce resets and the overlay uses the final, settled coordinates.
+
+This is why you may notice a brief (~300ms) delay before an auto-start tour appears — it's by design to prevent misaligned highlights.
+
+#### Tuning Constants
+
+If you need to adjust timing for your app's specific animation durations, the following constants can be modified in the source:
+
+| Constant | File | Default | Description |
+|----------|------|---------|-------------|
+| `MEASUREMENT_DELAYS` | `DapTarget.tsx` | `[100, 500, 1000]` | Multi-pass measurement intervals (ms) |
+| `POSITION_THRESHOLD` | `DapTarget.tsx` | `1` | Minimum position change (points) to trigger re-registration |
+| `AUTO_START_DEBOUNCE_MS` | `DapProvider.tsx` | `300` | Debounce delay (ms) before auto-starting a tour |
+
+### 3. Programmatic Control
+
+The `useDap()` hook exposes full control over tours:
+
+```tsx
+const { startTour, stopTour, nextStep, prevStep, activeTour, currentStepIndex } = useDap();
+
+// Start a specific tour
+startTour('welcome-tour');
+
+// Stop and mark as seen (default)
+stopTour();
+
+// Stop WITHOUT marking as seen (user can see it again)
+stopTour(false);
+
+// Navigate between steps
+nextStep();
+prevStep();
+```
+
 ## API Reference
 
 ### Tour Object
@@ -128,8 +181,38 @@ const myStorage = {
 | `steps` | `TourStep[]` | The sequence of highlighted elements and tooltips. |
 
 ### TourStep Object
+| Property | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `targetId` | `string` | — | Must directly match the `name=""` prop passed to `<DapTarget>`. |
+| `title` | `string` | — | Large text inside the tooltip. |
+| `description` | `string` | — | Context explanation inside the tooltip. |
+| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Where the tooltip appears relative to the highlighted target. |
+
+### DapTarget Props
+| Property | Type | Description |
+|-----------|------|-------------|
+| `name` | `string` | Unique identifier that matches a `targetId` in a tour step. |
+| `children` | `ReactElement` | The UI element to wrap and highlight. |
+| `...props` | `ViewProps` | All standard React Native `View` props are forwarded. |
+
+### useDap() Hook
 | Property | Type | Description |
 |-----------|------|-------------|
-| `targetId` | `string` | Must directly match the `name=""` prop passed to `<DapTarget>`. |
-| `title` | `string` | Large text inside the tooltip. |
-| `description` | `string` | Context explanation inside the tooltip. |
+| `startTour(id)` | `(tourId: string) => void` | Start a tour by its ID. |
+| `stopTour(markAsSeen?)` | `(markAsSeen?: boolean) => void` | Stop the active tour. Pass `false` to allow the tour to show again. |
+| `nextStep()` | `() => void` | Advance to the next step. Finishes the tour if on the last step. |
+| `prevStep()` | `() => void` | Go back to the previous step. |
+| `activeTour` | `Tour \| null` | The currently active tour object, or `null`. |
+| `currentStepIndex` | `number` | Index of the current step in the active tour. |
+| `targets` | `Record<string, TargetMeasurement>` | All registered target measurements. |
+| `seenTours` | `Record<string, boolean>` | Map of tour IDs to whether they've been seen. |
+
+### StorageAdapter Interface
+| Method | Type | Description |
+|--------|------|-------------|
+| `getItem` | `(key: string) => Promise<string \| null> \| string \| null` | Retrieve a stored value by key. |
+| `setItem` | `(key: string, value: string) => Promise<void> \| void` | Store a value by key. |
+
+Compatible with `AsyncStorage`, `MMKV`, or any key-value store that implements this interface.
+# rn-smart-tour
+

package/dist/DapOverlay.js

@@ -37,28 +37,73 @@ exports.DapOverlay = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const DapContext_1 = require("./DapContext");
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+/** Gap (pts) between the target highlight and the tooltip card. */
+const TOOLTIP_GAP = 10;
+/** Max width of the tooltip card. */
+const TOOLTIP_WIDTH = 280;
+/** General padding from screen edges. */
+const EDGE_PADDING = 16;
+/** Rough estimated tooltip height — used for bottom-overflow checks. */
+const ESTIMATED_TOOLTIP_HEIGHT = 150;
+/** Rough vertical offset for left/right centering. */
+const VERTICAL_CENTER_OFFSET = 60;
+/** Min screen space reserved at the bottom when centering vertically. */
+const VERTICAL_SAFE_BOTTOM = 120;
 const DapOverlay = () => {
     const context = (0, react_1.useContext)(DapContext_1.DapContext);
+    const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
     if (!context || !context.activeTour)
         return null;
-    const { activeTour, currentStepIndex, targets, nextStep, stopTour } = context;
+    const { activeTour, currentStepIndex, targets, nextStep, prevStep, stopTour } = context;
     const currentStep = activeTour.steps[currentStepIndex];
     if (!currentStep)
         return null;
     const targetId = currentStep.targetId;
     const measurement = targets[targetId];
-    // If the target hasn't been measured yet, we can't show the overlay correctly.
-    if (!measurement) {
-        return (<react_native_1.Modal transparent visible animationType="fade">
-         <react_native_1.View style={styles.fullscreen}>
-           <react_native_1.Text style={{ color: 'white', marginTop: 100, textAlign: 'center' }}>
-             Waiting for target "{targetId}" to mount...
-           </react_native_1.Text>
-         </react_native_1.View>
-       </react_native_1.Modal>);
-    }
+    // If the target hasn't been measured yet, silently wait — don't show debug text in production.
+    if (!measurement)
+        return null;
     const { x, y, width, height } = measurement;
+    const pos = currentStep.position || 'bottom';
+    const tooltipStyle = {
+        position: 'absolute',
+        width: TOOLTIP_WIDTH,
+        backgroundColor: 'white',
+        padding: EDGE_PADDING,
+        borderRadius: 8,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+        // Horizontal centering by default
+        left: Math.max(EDGE_PADDING, Math.min(x + width / 2 - TOOLTIP_WIDTH / 2, screenWidth - TOOLTIP_WIDTH - EDGE_PADDING)),
+    };
+    if (pos === 'top') {
+        tooltipStyle.bottom = screenHeight - y + TOOLTIP_GAP;
+    }
+    else if (pos === 'left') {
+        tooltipStyle.right = screenWidth - x + TOOLTIP_GAP;
+        tooltipStyle.left = undefined; // Clear the default left
+        tooltipStyle.width = Math.min(TOOLTIP_WIDTH, x - EDGE_PADDING * 2);
+        tooltipStyle.top = Math.max(EDGE_PADDING, Math.min(y + height / 2 - VERTICAL_CENTER_OFFSET, screenHeight - VERTICAL_SAFE_BOTTOM));
+    }
+    else if (pos === 'right') {
+        tooltipStyle.left = x + width + TOOLTIP_GAP;
+        tooltipStyle.width = Math.min(TOOLTIP_WIDTH, screenWidth - (x + width) - EDGE_PADDING * 2);
+        tooltipStyle.top = Math.max(EDGE_PADDING, Math.min(y + height / 2 - VERTICAL_CENTER_OFFSET, screenHeight - VERTICAL_SAFE_BOTTOM));
+    }
+    else {
+        // bottom (default)
+        tooltipStyle.top = y + height + TOOLTIP_GAP;
+        // Check if it spills off bottom of screen
+        if (tooltipStyle.top + ESTIMATED_TOOLTIP_HEIGHT > screenHeight) {
+            tooltipStyle.top = undefined;
+            tooltipStyle.bottom = EDGE_PADDING; // Pin to bottom if it overflows
+        }
+    }
+    const isFirstStep = currentStepIndex === 0;
+    const isLastStep = currentStepIndex === activeTour.steps.length - 1;
     return (<react_native_1.Modal transparent visible animationType="fade">
       <react_native_1.View style={styles.fullscreen}>
         {/* Top backdrop */}
@@ -71,16 +116,27 @@ const DapOverlay = () => {
         <react_native_1.View style={[styles.backdrop, { top: y, left: x + width, right: 0, height }]}/>
 
         {/* The Tooltip Card */}
-        <react_native_1.View style={[styles.tooltipContainer, { top: y + height + 10, left: Math.max(10, x - 20) }]}>
+        <react_native_1.View style={tooltipStyle}>
           <react_native_1.Text style={styles.title}>{currentStep.title}</react_native_1.Text>
           <react_native_1.Text style={styles.description}>{currentStep.description}</react_native_1.Text>
+
+          {/* Step indicator */}
+          {activeTour.steps.length > 1 && (<react_native_1.Text style={styles.stepIndicator}>
+              {currentStepIndex + 1} / {activeTour.steps.length}
+            </react_native_1.Text>)}
+
           <react_native_1.View style={styles.actions}>
-            <react_native_1.TouchableOpacity onPress={stopTour} style={styles.actionBtn}>
+            <react_native_1.TouchableOpacity onPress={() => stopTour()} style={styles.actionBtn}>
               <react_native_1.Text style={styles.actionText}>Skip</react_native_1.Text>
             </react_native_1.TouchableOpacity>
+
+            {!isFirstStep && (<react_native_1.TouchableOpacity onPress={prevStep} style={styles.actionBtn}>
+                <react_native_1.Text style={styles.actionText}>Back</react_native_1.Text>
+              </react_native_1.TouchableOpacity>)}
+
             <react_native_1.TouchableOpacity onPress={nextStep} style={[styles.actionBtn, styles.primaryBtn]}>
               <react_native_1.Text style={[styles.actionText, styles.primaryText]}>
-                {currentStepIndex === activeTour.steps.length - 1 ? 'Finish' : 'Next'}
+                {isLastStep ? 'Finish' : 'Next'}
               </react_native_1.Text>
             </react_native_1.TouchableOpacity>
           </react_native_1.View>
@@ -97,18 +153,6 @@ const styles = react_native_1.StyleSheet.create({
         position: 'absolute',
         backgroundColor: 'rgba(0, 0, 0, 0.6)',
     },
-    tooltipContainer: {
-        position: 'absolute',
-        backgroundColor: 'white',
-        padding: 16,
-        borderRadius: 8,
-        width: 250,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-        elevation: 5,
-    },
     title: {
         fontSize: 16,
         fontWeight: 'bold',
@@ -118,7 +162,13 @@ const styles = react_native_1.StyleSheet.create({
     description: {
         fontSize: 14,
         color: '#666',
-        marginBottom: 16,
+        marginBottom: 8,
+    },
+    stepIndicator: {
+        fontSize: 12,
+        color: '#999',
+        textAlign: 'right',
+        marginBottom: 8,
     },
     actions: {
         flexDirection: 'row',

package/dist/DapProvider.js

@@ -38,12 +38,21 @@ const react_1 = __importStar(require("react"));
 const DapContext_1 = require("./DapContext");
 const DapOverlay_1 = require("./DapOverlay");
 const STORAGE_KEY = '@rn-dap:seen_tours';
+/**
+ * Debounce delay (ms) before auto-starting a tour after a target registers.
+ * This gives the multi-pass measurement in DapTarget time to settle on the
+ * final coordinates before the overlay is shown.
+ */
+const AUTO_START_DEBOUNCE_MS = 300;
 const DapProvider = ({ children, tours, storageAdapter }) => {
     const [targets, setTargets] = (0, react_1.useState)({});
     const [activeTourId, setActiveTourId] = (0, react_1.useState)(null);
     const [currentStepIndex, setCurrentStepIndex] = (0, react_1.useState)(0);
     const [seenTours, setSeenTours] = (0, react_1.useState)({});
     const [isStorageLoaded, setIsStorageLoaded] = (0, react_1.useState)(!storageAdapter);
+    // Ref to avoid stale closures — always holds the latest activeTourId.
+    const activeTourIdRef = (0, react_1.useRef)(activeTourId);
+    activeTourIdRef.current = activeTourId;
     // Load seen tours on mount if a storage adapter is provided
     (0, react_1.useEffect)(() => {
         const loadStorage = async () => {
@@ -62,18 +71,18 @@ const DapProvider = ({ children, tours, storageAdapter }) => {
         };
         loadStorage();
     }, [storageAdapter]);
-    const saveSeenTour = async (tourId) => {
-        const nextSeen = { ...seenTours, [tourId]: true };
-        setSeenTours(nextSeen);
-        if (storageAdapter) {
-            try {
-                await storageAdapter.setItem(STORAGE_KEY, JSON.stringify(nextSeen));
-            }
-            catch (e) {
-                console.error('[rn-dap] failed to save storage', e);
+    const saveSeenTour = (0, react_1.useCallback)(async (tourId) => {
+        setSeenTours(prev => {
+            const nextSeen = { ...prev, [tourId]: true };
+            if (storageAdapter) {
+                // Safe side-effect here for async storage, as long as it's fire-and-forget
+                Promise.resolve(storageAdapter.setItem(STORAGE_KEY, JSON.stringify(nextSeen))).catch(e => {
+                    console.error('[rn-dap] failed to save storage', e);
+                });
             }
-        }
-    };
+            return nextSeen;
+        });
+    }, [storageAdapter]);
     const registerTarget = (0, react_1.useCallback)((id, measurement) => {
         setTargets(prev => ({ ...prev, [id]: measurement }));
     }, []);
@@ -93,13 +102,15 @@ const DapProvider = ({ children, tours, storageAdapter }) => {
             console.warn(`[rn-dap] Tour with id ${tourId} not found.`);
         }
     }, [tours, seenTours]);
+    // Uses activeTourIdRef to avoid stale closures and prevent cascading re-renders.
     const stopTour = (0, react_1.useCallback)((markAsSeen = true) => {
-        if (activeTourId && markAsSeen) {
-            saveSeenTour(activeTourId);
+        const currentTourId = activeTourIdRef.current;
+        if (currentTourId && markAsSeen) {
+            saveSeenTour(currentTourId);
         }
         setActiveTourId(null);
         setCurrentStepIndex(0);
-    }, [activeTourId, seenTours]);
+    }, [saveSeenTour]);
     const nextStep = (0, react_1.useCallback)(() => {
         if (activeTourId && tours[activeTourId]) {
             const tour = tours[activeTourId];
@@ -117,36 +128,61 @@ const DapProvider = ({ children, tours, storageAdapter }) => {
             setCurrentStepIndex(prev => prev - 1);
         }
     }, [currentStepIndex]);
-    // Auto-Start Engine
+    /** Timer ref for debounced auto-start. */
+    const autoStartTimerRef = (0, react_1.useRef)();
+    // Auto-Start Engine — debounced so multi-pass measurements can settle.
     (0, react_1.useEffect)(() => {
         // Wait until storage is loaded, and ensure no tour is currently running
         if (!isStorageLoaded || activeTourId)
             return;
-        for (const tourId of Object.keys(tours)) {
-            const tour = tours[tourId];
-            if (tour.autoStart && !seenTours[tourId] && tour.steps.length > 0) {
-                const firstTargetId = tour.steps[0].targetId;
-                // If the first target of an unread, auto-starting tour is mounted
-                if (targets[firstTargetId]) {
-                    startTour(tourId);
-                    break; // Start only one auto-tour at a time
+        // Clear any previously scheduled auto-start
+        if (autoStartTimerRef.current) {
+            clearTimeout(autoStartTimerRef.current);
+        }
+        autoStartTimerRef.current = setTimeout(() => {
+            for (const tourId of Object.keys(tours)) {
+                const tour = tours[tourId];
+                if (tour.autoStart && !seenTours[tourId] && tour.steps.length > 0) {
+                    const firstTargetId = tour.steps[0].targetId;
+                    // If the first target of an unread, auto-starting tour is mounted
+                    if (targets[firstTargetId]) {
+                        startTour(tourId);
+                        break; // Start only one auto-tour at a time
+                    }
                 }
             }
-        }
+        }, AUTO_START_DEBOUNCE_MS);
+        return () => {
+            if (autoStartTimerRef.current) {
+                clearTimeout(autoStartTimerRef.current);
+            }
+        };
     }, [targets, tours, seenTours, isStorageLoaded, activeTourId, startTour]);
     const activeTour = activeTourId ? tours[activeTourId] : null;
-    return (<DapContext_1.DapContext.Provider value={{
-            registerTarget,
-            unregisterTarget,
-            startTour,
-            stopTour,
-            nextStep,
-            prevStep,
-            activeTour,
-            currentStepIndex,
-            targets,
-            seenTours
-        }}>
+    const contextValue = (0, react_1.useMemo)(() => ({
+        registerTarget,
+        unregisterTarget,
+        startTour,
+        stopTour,
+        nextStep,
+        prevStep,
+        activeTour,
+        currentStepIndex,
+        targets,
+        seenTours
+    }), [
+        registerTarget,
+        unregisterTarget,
+        startTour,
+        stopTour,
+        nextStep,
+        prevStep,
+        activeTour,
+        currentStepIndex,
+        targets,
+        seenTours
+    ]);
+    return (<DapContext_1.DapContext.Provider value={contextValue}>
       {children}
       <DapOverlay_1.DapOverlay />
     </DapContext_1.DapContext.Provider>);

package/dist/DapTarget.js

@@ -37,31 +37,85 @@ exports.DapTarget = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const DapContext_1 = require("./DapContext");
+/**
+ * Multi-pass measurement delays (ms).
+ * The first pass captures an early estimate; subsequent passes self-correct
+ * after screen-transition animations and async layout shifts have settled.
+ */
+const MEASUREMENT_DELAYS = [100, 500, 1000];
+/** Threshold in points — ignore sub-pixel drift to avoid unnecessary re-registers. */
+const POSITION_THRESHOLD = 1;
 const DapTarget = ({ name, children, ...props }) => {
     const viewRef = (0, react_1.useRef)(null);
     const context = (0, react_1.useContext)(DapContext_1.DapContext);
-    const measureAndRegister = () => {
-        if (viewRef.current && context) {
-            setTimeout(() => {
-                viewRef.current?.measureInWindow((x, y, width, height) => {
-                    if (width > 0 && height > 0) {
-                        context.registerTarget(name, { x, y, width, height });
+    /** Holds all scheduled timer IDs so we can cancel them on re-layout or unmount. */
+    const timersRef = (0, react_1.useRef)([]);
+    /** Last successfully registered measurement — used for deduplication. */
+    const lastMeasurementRef = (0, react_1.useRef)(null);
+    /** Clear every pending measurement timer. */
+    const clearAllTimers = (0, react_1.useCallback)(() => {
+        timersRef.current.forEach(clearTimeout);
+        timersRef.current = [];
+    }, []);
+    /** Returns true if the new measurement differs meaningfully from the previous one. */
+    const hasPositionChanged = (0, react_1.useCallback)((prev, next) => {
+        if (!prev)
+            return true; // First measurement — always register.
+        return (Math.abs(prev.x - next.x) > POSITION_THRESHOLD ||
+            Math.abs(prev.y - next.y) > POSITION_THRESHOLD ||
+            Math.abs(prev.width - next.width) > POSITION_THRESHOLD ||
+            Math.abs(prev.height - next.height) > POSITION_THRESHOLD);
+    }, []);
+    /**
+     * Schedule measureInWindow calls at each delay.
+     * Every invocation first cancels any previously scheduled timers so that
+     * rapid-fire onLayout events don't pile up stale measurements.
+     */
+    const measureAndRegister = (0, react_1.useCallback)(() => {
+        clearAllTimers();
+        if (!viewRef.current || !context)
+            return;
+        const scheduleAtDelay = (delay) => {
+            const id = setTimeout(() => {
+                if (!viewRef.current)
+                    return;
+                viewRef.current.measureInWindow((x, y, width, height) => {
+                    if (width <= 0 || height <= 0)
+                        return;
+                    const next = { x, y, width, height };
+                    if (hasPositionChanged(lastMeasurementRef.current, next)) {
+                        lastMeasurementRef.current = next;
+                        context.registerTarget(name, next);
                     }
                 });
-            }, 100);
-        }
-    };
-    const handleLayout = (e) => {
+            }, delay);
+            timersRef.current.push(id);
+        };
+        MEASUREMENT_DELAYS.forEach(scheduleAtDelay);
+    }, [name, context, clearAllTimers, hasPositionChanged]);
+    const handleLayout = (0, react_1.useCallback)((e) => {
         measureAndRegister();
-        if (props.onLayout) {
-            props.onLayout(e);
-        }
-    };
+        props.onLayout?.(e);
+    }, [measureAndRegister, props.onLayout]);
+    const unregisterTarget = context?.unregisterTarget;
+    // Re-measure when the screen dimensions change (rotation, split-screen, foldables).
+    (0, react_1.useEffect)(() => {
+        const subscription = react_native_1.Dimensions.addEventListener('change', () => {
+            // Reset the last measurement so the next pass always registers.
+            lastMeasurementRef.current = null;
+            measureAndRegister();
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, [measureAndRegister]);
+    // Cleanup on unmount or when name changes.
     (0, react_1.useEffect)(() => {
         return () => {
-            context?.unregisterTarget(name);
+            clearAllTimers();
+            unregisterTarget?.(name);
         };
-    }, [name, context]);
+    }, [name, unregisterTarget, clearAllTimers]);
     // collapsable={false} is vital for Android, otherwise it gets optimized away and measure fails
     return (<react_native_1.View ref={viewRef} onLayout={handleLayout} collapsable={false} {...props}>
       {children}

package/dist/types.d.ts

@@ -25,7 +25,7 @@ export interface DapContextType {
     startTour: (tourId: string) => void;
     nextStep: () => void;
     prevStep: () => void;
-    stopTour: () => void;
+    stopTour: (markAsSeen?: boolean) => void;
     activeTour: Tour | null;
     currentStepIndex: number;
     targets: Record<string, TargetMeasurement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-smart-tour",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Enterprise-grade Digital Adoption Platform (DAP) package for React Native. Provides guided walkthroughs, tooltips, and app tours.",
   "author": "Vishwas Gaur",
   "license": "MIT",
@@ -9,6 +9,14 @@
   "files": [
     "dist"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Vishwasgaur0819/rn-smart-tour"
+  },
+  "homepage": "https://github.com/Vishwasgaur0819/rn-smart-tour#readme",
+  "bugs": {
+    "url": "https://github.com/Vishwasgaur0819/rn-smart-tour/issues"
+  },
   "keywords": [
     "react-native",
     "tour",
@@ -16,20 +24,24 @@
     "onboarding",
     "dap",
     "guide",
-    "product-tour"
+    "product-tour",
+    "tooltip",
+    "overlay",
+    "digital-adoption"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": ">=16.8.0",
+    "react-native": ">=0.63.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.28",
+    "@types/react": "^18.2.0",
     "@types/react-native": "^0.72.8",
-    "react": "^19.2.4",
-    "react-native": "^0.84.1",
+    "react": "18.2.0",
+    "react-native": "0.73.11",
     "typescript": "^5.9.3"
   }
 }