@repliqo/sdk-react-native 0.3.3 → 0.3.4

package/dist/components/RepliqoScrollView.d.ts

@@ -4,8 +4,8 @@ import { ScrollView, type ScrollViewProps } from 'react-native';
  * Drop-in replacement for React Native's ScrollView that:
  *
  *  1. Reports scroll offset for accurate heatmap touch coords
- *  2. Captures viewport tiles on scroll stops for collaborative
- *     screen building — the backend composites these into a
- *     full-content image over time from multiple user sessions
+ *  2. Captures viewport tiles on scroll stops AND during continuous
+ *     scroll for collaborative screen building — the backend composites
+ *     these into a full-content image over time
  */
 export declare const RepliqoScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;

package/dist/components/RepliqoScrollView.js

@@ -40,41 +40,54 @@ const client_1 = require("../core/client");
 /** Minimum scroll delta (px) to trigger a new tile capture. */
 const MIN_DELTA_PX = 20;
 /** Debounce: wait this long after scroll stops before capturing. */
-const DEBOUNCE_MS = 300;
+const DEBOUNCE_MS = 250;
 /** Throttle: minimum time between tile captures. */
-const THROTTLE_MS = 500;
+const THROTTLE_MS = 400;
+/**
+ * During continuous scroll, force a capture every this many ms.
+ * Ensures tiles are captured even during fast, uninterrupted scrolls
+ * where the user never pauses long enough for the debounce to fire.
+ */
+const SCROLL_INTERVAL_MS = 1200;
 /**
  * Drop-in replacement for React Native's ScrollView that:
  *
  *  1. Reports scroll offset for accurate heatmap touch coords
- *  2. Captures viewport tiles on scroll stops for collaborative
- *     screen building — the backend composites these into a
- *     full-content image over time from multiple user sessions
+ *  2. Captures viewport tiles on scroll stops AND during continuous
+ *     scroll for collaborative screen building — the backend composites
+ *     these into a full-content image over time
  */
-exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumScrollEnd, onScrollEndDrag, onLayout, ...props }, ref) => {
+exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumScrollEnd, onScrollEndDrag, onLayout, onContentSizeChange, ...props }, ref) => {
     const debounceTimer = (0, react_1.useRef)(null);
+    const scrollIntervalTimer = (0, react_1.useRef)(null);
     const lastCaptureTime = (0, react_1.useRef)(0);
     const lastCaptureY = (0, react_1.useRef)(-999);
     const initialCaptured = (0, react_1.useRef)(false);
+    const realContentHeight = (0, react_1.useRef)(0);
     const scrollState = (0, react_1.useRef)(null);
-    // Cleanup debounce timer on unmount
+    // Cleanup timers on unmount
     (0, react_1.useEffect)(() => {
         return () => {
             if (debounceTimer.current)
                 clearTimeout(debounceTimer.current);
+            if (scrollIntervalTimer.current)
+                clearInterval(scrollIntervalTimer.current);
         };
     }, []);
     /**
      * Core tile capture logic. Reads from refs (stable across renders).
      * Checks throttle + delta before capturing.
+     *
+     * @param force Skip throttle check (used for interval captures)
      */
-    const doCapture = () => {
+    const doCapture = (force = false) => {
         const state = scrollState.current;
         if (!state || state.viewportHeight <= 0)
             return;
         const now = Date.now();
-        if (now - lastCaptureTime.current < THROTTLE_MS)
+        if (!force && now - lastCaptureTime.current < THROTTLE_MS)
             return;
+        // Always check delta — no point re-capturing the same position
         if (Math.abs(state.offsetY - lastCaptureY.current) < MIN_DELTA_PX &&
             initialCaptured.current)
             return;
@@ -86,6 +99,21 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
         }
         catch { }
     };
+    /** Start the interval timer for continuous scroll captures. */
+    const startScrollInterval = () => {
+        if (scrollIntervalTimer.current !== null)
+            return;
+        scrollIntervalTimer.current = setInterval(() => {
+            doCapture(true); // force=true skips throttle
+        }, SCROLL_INTERVAL_MS);
+    };
+    /** Stop the interval timer. */
+    const stopScrollInterval = () => {
+        if (scrollIntervalTimer.current !== null) {
+            clearInterval(scrollIntervalTimer.current);
+            scrollIntervalTimer.current = null;
+        }
+    };
     const handleScroll = (0, react_1.useCallback)((event) => {
         const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
         // Report scroll offset for touch coords
@@ -93,25 +121,31 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
             client_1.AppAnalytics.getInstance().setScrollOffset(contentOffset.y);
         }
         catch { }
-        // Update scroll state
+        // Update scroll state — use realContentHeight if available
+        const bestContentHeight = realContentHeight.current > 0
+            ? realContentHeight.current
+            : contentSize.height;
         scrollState.current = {
             offsetY: contentOffset.y,
             viewportHeight: layoutMeasurement.height,
-            contentHeight: contentSize.height,
+            contentHeight: bestContentHeight,
         };
         // Debounce: capture after scroll stops
         if (debounceTimer.current)
             clearTimeout(debounceTimer.current);
-        debounceTimer.current = setTimeout(doCapture, DEBOUNCE_MS);
-        // Capture initial tile (Y≈0) on first scroll event with real dimensions
+        debounceTimer.current = setTimeout(() => doCapture(), DEBOUNCE_MS);
+        // Start interval for continuous scroll captures
+        startScrollInterval();
+        // Capture initial tile (Y~0) on first scroll event with real dims
         if (!initialCaptured.current && contentOffset.y < 10) {
-            setTimeout(doCapture, 200);
+            setTimeout(() => doCapture(), 200);
         }
         onScroll?.(event);
     }, [onScroll]);
     const handleScrollEndDrag = (0, react_1.useCallback)((event) => {
         // User lifted finger — capture immediately
-        doCapture();
+        stopScrollInterval();
+        doCapture(true);
         onScrollEndDrag?.(event);
     }, [onScrollEndDrag]);
     const handleMomentumEnd = (0, react_1.useCallback)((event) => {
@@ -119,7 +153,8 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
             clearTimeout(debounceTimer.current);
             debounceTimer.current = null;
         }
-        doCapture();
+        stopScrollInterval();
+        doCapture(true);
         onMomentumScrollEnd?.(event);
     }, [onMomentumScrollEnd]);
     const handleLayout = (0, react_1.useCallback)((event) => {
@@ -129,12 +164,25 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
             scrollState.current = {
                 offsetY: 0,
                 viewportHeight: height,
-                contentHeight: height, // Will be updated on first scroll
+                contentHeight: realContentHeight.current || height,
             };
-            setTimeout(doCapture, 1000);
+            setTimeout(() => doCapture(), 1000);
         }
         onLayout?.(event);
     }, [onLayout]);
-    return (<react_native_1.ScrollView ref={ref} {...props} onScroll={handleScroll} onScrollEndDrag={handleScrollEndDrag} onMomentumScrollEnd={handleMomentumEnd} onLayout={handleLayout} scrollEventThrottle={props.scrollEventThrottle ?? 16}/>);
+    /**
+     * Track the real content height from onContentSizeChange.
+     * This is more reliable than the first scroll event and ensures
+     * the initial tile at Y=0 has correct contentHeight metadata.
+     */
+    const handleContentSizeChange = (0, react_1.useCallback)((w, h) => {
+        realContentHeight.current = h;
+        // Update scroll state if it exists
+        if (scrollState.current) {
+            scrollState.current.contentHeight = h;
+        }
+        onContentSizeChange?.(w, h);
+    }, [onContentSizeChange]);
+    return (<react_native_1.ScrollView ref={ref} {...props} onScroll={handleScroll} onScrollEndDrag={handleScrollEndDrag} onMomentumScrollEnd={handleMomentumEnd} onLayout={handleLayout} onContentSizeChange={handleContentSizeChange} scrollEventThrottle={props.scrollEventThrottle ?? 16}/>);
 });
 exports.RepliqoScrollView.displayName = 'RepliqoScrollView';

package/dist/core/client.js

@@ -284,16 +284,14 @@ class AppAnalytics {
         this.scrollOffsetY = 0;
         this.errorTracker?.setCurrentScreen(screenName);
         this.snapshotCapture?.setCurrentScreen(screenName);
-        // Auto-scan with PixelCopy: captures entire ScrollView content
-        // by scrolling programmatically + PixelCopy from GPU framebuffer.
-        // Fires 2s after screen enter to let content fully render.
-        if (this.config.enableHeatmapCapture) {
-            setTimeout(() => {
-                if (this.currentScreen !== screenName || !this.sessionId)
-                    return;
-                this.autoScanScreen(screenName);
-            }, 2000);
-        }
+        // NOTE: autoScanScreen (PixelCopy / programmatic scroll) is DISABLED.
+        // React Native does NOT render off-screen content to the GPU or view
+        // tree, so programmatic scroll + View.draw()/PixelCopy produces blank
+        // tiles. Worse, those blank tiles poison the dedup cache and block
+        // real tiles captured during natural user scroll.
+        //
+        // Full-content capture relies entirely on RepliqoScrollView capturing
+        // viewport tiles as the user naturally scrolls through the content.
         this.logger.log('Screen entered:', screenName);
     }
     onScreenExit(screenName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repliqo/sdk-react-native",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Session replay & analytics SDK for React Native. Captures screenshots (including modals/alerts), navigation, screen visits, and custom events.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/RepliqoScrollView.tsx

@@ -11,47 +11,60 @@ import { AppAnalytics } from '../core/client';
 /** Minimum scroll delta (px) to trigger a new tile capture. */
 const MIN_DELTA_PX = 20;
 /** Debounce: wait this long after scroll stops before capturing. */
-const DEBOUNCE_MS = 300;
+const DEBOUNCE_MS = 250;
 /** Throttle: minimum time between tile captures. */
-const THROTTLE_MS = 500;
+const THROTTLE_MS = 400;
+/**
+ * During continuous scroll, force a capture every this many ms.
+ * Ensures tiles are captured even during fast, uninterrupted scrolls
+ * where the user never pauses long enough for the debounce to fire.
+ */
+const SCROLL_INTERVAL_MS = 1200;
 
 /**
  * Drop-in replacement for React Native's ScrollView that:
  *
  *  1. Reports scroll offset for accurate heatmap touch coords
- *  2. Captures viewport tiles on scroll stops for collaborative
- *     screen building — the backend composites these into a
- *     full-content image over time from multiple user sessions
+ *  2. Captures viewport tiles on scroll stops AND during continuous
+ *     scroll for collaborative screen building — the backend composites
+ *     these into a full-content image over time
  */
 export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
-  ({ onScroll, onMomentumScrollEnd, onScrollEndDrag, onLayout, ...props }, ref) => {
+  ({ onScroll, onMomentumScrollEnd, onScrollEndDrag, onLayout, onContentSizeChange, ...props }, ref) => {
     const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const scrollIntervalTimer = useRef<ReturnType<typeof setInterval> | null>(null);
     const lastCaptureTime = useRef(0);
     const lastCaptureY = useRef(-999);
     const initialCaptured = useRef(false);
+    const realContentHeight = useRef(0);
     const scrollState = useRef<{
       offsetY: number;
       viewportHeight: number;
       contentHeight: number;
     } | null>(null);
 
-    // Cleanup debounce timer on unmount
+    // Cleanup timers on unmount
     useEffect(() => {
       return () => {
         if (debounceTimer.current) clearTimeout(debounceTimer.current);
+        if (scrollIntervalTimer.current) clearInterval(scrollIntervalTimer.current);
       };
     }, []);
 
     /**
      * Core tile capture logic. Reads from refs (stable across renders).
      * Checks throttle + delta before capturing.
+     *
+     * @param force Skip throttle check (used for interval captures)
      */
-    const doCapture = () => {
+    const doCapture = (force = false) => {
       const state = scrollState.current;
       if (!state || state.viewportHeight <= 0) return;
 
       const now = Date.now();
-      if (now - lastCaptureTime.current < THROTTLE_MS) return;
+      if (!force && now - lastCaptureTime.current < THROTTLE_MS) return;
+
+      // Always check delta — no point re-capturing the same position
       if (Math.abs(state.offsetY - lastCaptureY.current) < MIN_DELTA_PX &&
           initialCaptured.current) return;
 
@@ -68,6 +81,22 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
       } catch {}
     };
 
+    /** Start the interval timer for continuous scroll captures. */
+    const startScrollInterval = () => {
+      if (scrollIntervalTimer.current !== null) return;
+      scrollIntervalTimer.current = setInterval(() => {
+        doCapture(true); // force=true skips throttle
+      }, SCROLL_INTERVAL_MS);
+    };
+
+    /** Stop the interval timer. */
+    const stopScrollInterval = () => {
+      if (scrollIntervalTimer.current !== null) {
+        clearInterval(scrollIntervalTimer.current);
+        scrollIntervalTimer.current = null;
+      }
+    };
+
     const handleScroll = useCallback(
       (event: NativeSyntheticEvent<NativeScrollEvent>) => {
         const { contentOffset, layoutMeasurement, contentSize } =
@@ -78,20 +107,26 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
           AppAnalytics.getInstance().setScrollOffset(contentOffset.y);
         } catch {}
 
-        // Update scroll state
+        // Update scroll state — use realContentHeight if available
+        const bestContentHeight = realContentHeight.current > 0
+          ? realContentHeight.current
+          : contentSize.height;
         scrollState.current = {
           offsetY: contentOffset.y,
           viewportHeight: layoutMeasurement.height,
-          contentHeight: contentSize.height,
+          contentHeight: bestContentHeight,
         };
 
         // Debounce: capture after scroll stops
         if (debounceTimer.current) clearTimeout(debounceTimer.current);
-        debounceTimer.current = setTimeout(doCapture, DEBOUNCE_MS);
+        debounceTimer.current = setTimeout(() => doCapture(), DEBOUNCE_MS);
 
-        // Capture initial tile (Y≈0) on first scroll event with real dimensions
+        // Start interval for continuous scroll captures
+        startScrollInterval();
+
+        // Capture initial tile (Y~0) on first scroll event with real dims
         if (!initialCaptured.current && contentOffset.y < 10) {
-          setTimeout(doCapture, 200);
+          setTimeout(() => doCapture(), 200);
         }
 
         onScroll?.(event);
@@ -102,7 +137,8 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
     const handleScrollEndDrag = useCallback(
       (event: NativeSyntheticEvent<NativeScrollEvent>) => {
         // User lifted finger — capture immediately
-        doCapture();
+        stopScrollInterval();
+        doCapture(true);
         onScrollEndDrag?.(event);
       },
       [onScrollEndDrag],
@@ -114,7 +150,8 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
           clearTimeout(debounceTimer.current);
           debounceTimer.current = null;
         }
-        doCapture();
+        stopScrollInterval();
+        doCapture(true);
         onMomentumScrollEnd?.(event);
       },
       [onMomentumScrollEnd],
@@ -128,15 +165,32 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
           scrollState.current = {
             offsetY: 0,
             viewportHeight: height,
-            contentHeight: height, // Will be updated on first scroll
+            contentHeight: realContentHeight.current || height,
           };
-          setTimeout(doCapture, 1000);
+          setTimeout(() => doCapture(), 1000);
         }
         onLayout?.(event);
       },
       [onLayout],
     );
 
+    /**
+     * Track the real content height from onContentSizeChange.
+     * This is more reliable than the first scroll event and ensures
+     * the initial tile at Y=0 has correct contentHeight metadata.
+     */
+    const handleContentSizeChange = useCallback(
+      (w: number, h: number) => {
+        realContentHeight.current = h;
+        // Update scroll state if it exists
+        if (scrollState.current) {
+          scrollState.current.contentHeight = h;
+        }
+        onContentSizeChange?.(w, h);
+      },
+      [onContentSizeChange],
+    );
+
     return (
       <ScrollView
         ref={ref}
@@ -145,6 +199,7 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
         onScrollEndDrag={handleScrollEndDrag}
         onMomentumScrollEnd={handleMomentumEnd}
         onLayout={handleLayout}
+        onContentSizeChange={handleContentSizeChange}
         scrollEventThrottle={props.scrollEventThrottle ?? 16}
       />
     );

package/src/core/client.ts

@@ -416,15 +416,14 @@ export class AppAnalytics {
     this.scrollOffsetY = 0;
     this.errorTracker?.setCurrentScreen(screenName);
     this.snapshotCapture?.setCurrentScreen(screenName);
-    // Auto-scan with PixelCopy: captures entire ScrollView content
-    // by scrolling programmatically + PixelCopy from GPU framebuffer.
-    // Fires 2s after screen enter to let content fully render.
-    if (this.config.enableHeatmapCapture) {
-      setTimeout(() => {
-        if (this.currentScreen !== screenName || !this.sessionId) return;
-        this.autoScanScreen(screenName);
-      }, 2000);
-    }
+    // NOTE: autoScanScreen (PixelCopy / programmatic scroll) is DISABLED.
+    // React Native does NOT render off-screen content to the GPU or view
+    // tree, so programmatic scroll + View.draw()/PixelCopy produces blank
+    // tiles. Worse, those blank tiles poison the dedup cache and block
+    // real tiles captured during natural user scroll.
+    //
+    // Full-content capture relies entirely on RepliqoScrollView capturing
+    // viewport tiles as the user naturally scrolls through the content.
 
     this.logger.log('Screen entered:', screenName);
   }