@repliqo/sdk-react-native 0.1.2 → 0.2.0

package/android/src/main/java/com/repliqo/screencapture/FullContentCapture.java

@@ -0,0 +1,258 @@
+package com.repliqo.screencapture;
+
+import android.app.Activity;
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.util.Base64;
+import android.util.Log;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.ScrollView;
+
+import java.io.ByteArrayOutputStream;
+import java.lang.reflect.Field;
+import java.util.ArrayList;
+
+/**
+ * Captures the FULL content of the primary vertical ScrollView found in
+ * the app's view hierarchy — including content scrolled off-screen.
+ *
+ * Used for heatmap backgrounds where we need the complete screen layout,
+ * not just the visible viewport.
+ *
+ * Supports:
+ *  - Android ScrollView
+ *  - AndroidX NestedScrollView
+ *  - React Native ReactScrollView (old arch)
+ *  - React Native ReactScrollViewManager (Fabric / new arch)
+ *
+ * Known limitation: FlatList / SectionList use RecyclerView which only
+ * renders visible items. Full-content capture is not possible for those.
+ * The method falls back to a viewport capture in that case.
+ *
+ * No permissions needed. Runs on UI thread.
+ */
+public class FullContentCapture {
+    private static final String TAG = "RepliqoCapture";
+    private static final int TARGET_WIDTH = 500;
+    private static final int JPEG_QUALITY = 60;
+    private static final int MAX_HEIGHT = 5000;
+
+    /** Result that includes whether this is a full-content or viewport capture. */
+    public static class FullCaptureResult {
+        public final String image;
+        public final int width;
+        public final int height;
+        public final boolean isFullContent;
+
+        FullCaptureResult(String image, int width, int height, boolean isFullContent) {
+            this.image = image;
+            this.width = width;
+            this.height = height;
+            this.isFullContent = isFullContent;
+        }
+    }
+
+    /**
+     * Capture the full content of the primary vertical ScrollView.
+     * Falls back to viewport capture if no suitable ScrollView is found.
+     *
+     * @param activity Current activity
+     * @return FullCaptureResult with isFullContent flag
+     */
+    public static FullCaptureResult capture(Activity activity) {
+        if (activity == null || activity.isFinishing()) return null;
+
+        try {
+            // Find the primary vertical ScrollView
+            View scrollView = findVerticalScrollView(activity);
+            if (scrollView == null) {
+                Log.d(TAG, "No vertical ScrollView found, falling back to viewport");
+                return viewportFallback(activity);
+            }
+
+            // Get the content child
+            View contentView = getContentChild(scrollView);
+            if (contentView == null) {
+                return viewportFallback(activity);
+            }
+
+            int contentWidth = contentView.getWidth();
+            int contentHeight = contentView.getHeight();
+
+            if (contentWidth <= 0 || contentHeight <= 0) {
+                return viewportFallback(activity);
+            }
+
+            // If content height is same as viewport, it's not scrollable
+            int viewportHeight = scrollView.getHeight();
+            if (contentHeight <= viewportHeight) {
+                Log.d(TAG, "Content fits in viewport, no scroll needed");
+                return viewportFallback(activity);
+            }
+
+            // Cap height to avoid OOM
+            int captureHeight = Math.min(contentHeight, MAX_HEIGHT);
+
+            // Scale to output dimensions
+            float scale = (float) TARGET_WIDTH / contentWidth;
+            int outWidth = TARGET_WIDTH & ~1;
+            int outHeight = Math.round(captureHeight * scale) & ~1;
+
+            if (outWidth <= 0 || outHeight <= 0) {
+                return viewportFallback(activity);
+            }
+
+            // Create bitmap — wrapped in OOM catch
+            Bitmap bitmap;
+            try {
+                bitmap = Bitmap.createBitmap(outWidth, outHeight,
+                        Bitmap.Config.ARGB_8888);
+            } catch (OutOfMemoryError oom) {
+                Log.w(TAG, "OOM creating bitmap " + outWidth + "x" + outHeight +
+                        ", falling back to viewport");
+                return viewportFallback(activity);
+            }
+
+            Canvas canvas = new Canvas(bitmap);
+            canvas.scale(scale, scale);
+
+            // Draw the full content
+            contentView.draw(canvas);
+
+            // Compress to JPEG
+            ByteArrayOutputStream baos = new ByteArrayOutputStream();
+            bitmap.compress(Bitmap.CompressFormat.JPEG, JPEG_QUALITY, baos);
+            String base64 = Base64.encodeToString(baos.toByteArray(), Base64.NO_WRAP);
+            bitmap.recycle();
+
+            Log.d(TAG, "Full content captured: " + outWidth + "x" + outHeight +
+                    " (content: " + contentWidth + "x" + contentHeight +
+                    ", viewport: " + contentWidth + "x" + viewportHeight + ")");
+
+            return new FullCaptureResult(base64, outWidth, outHeight, true);
+
+        } catch (Exception e) {
+            Log.w(TAG, "FullContentCapture failed: " + e.getMessage());
+            return viewportFallback(activity);
+        }
+    }
+
+    /**
+     * Fallback: capture just the visible viewport via MultiWindowCapture.
+     */
+    private static FullCaptureResult viewportFallback(Activity activity) {
+        MultiWindowCapture.CaptureResult vp = MultiWindowCapture.capture(activity);
+        if (vp == null) return null;
+        return new FullCaptureResult(vp.image, vp.width, vp.height, false);
+    }
+
+    /**
+     * Find the first VERTICAL ScrollView in the view hierarchy.
+     * Searches all root views (including modals).
+     *
+     * Matches by walking the class hierarchy for known scroll classes:
+     *  - android.widget.ScrollView
+     *  - androidx.core.widget.NestedScrollView
+     *  - com.facebook.react.views.scroll.ReactScrollView (old arch)
+     *  - Any class with "ScrollView" in the name (catches Fabric variants)
+     *
+     * Explicitly SKIPS HorizontalScrollView and classes containing
+     * "Horizontal" to avoid capturing carousels.
+     */
+    private static View findVerticalScrollView(Activity activity) {
+        View decorView = activity.getWindow().getDecorView();
+        View found = findVerticalScrollInTree(decorView);
+        if (found != null) return found;
+
+        // Check other windows (modals)
+        try {
+            Class<?> wmgClass = Class.forName("android.view.WindowManagerGlobal");
+            Object wmg = wmgClass.getMethod("getInstance").invoke(null);
+            Field viewsField = wmgClass.getDeclaredField("mViews");
+            viewsField.setAccessible(true);
+            @SuppressWarnings("unchecked")
+            ArrayList<View> views = (ArrayList<View>) viewsField.get(wmg);
+            if (views != null) {
+                for (View root : views) {
+                    if (root == decorView) continue;
+                    found = findVerticalScrollInTree(root);
+                    if (found != null) return found;
+                }
+            }
+        } catch (Exception e) {
+            // Reflection failed
+        }
+
+        return null;
+    }
+
+    /**
+     * DFS for a vertical scroll view in the tree.
+     */
+    private static View findVerticalScrollInTree(View view) {
+        if (view == null) return null;
+
+        if (isVerticalScrollView(view)) {
+            if (view instanceof ViewGroup && ((ViewGroup) view).getChildCount() > 0) {
+                return view;
+            }
+        }
+
+        if (view instanceof ViewGroup) {
+            ViewGroup group = (ViewGroup) view;
+            for (int i = 0; i < group.getChildCount(); i++) {
+                View found = findVerticalScrollInTree(group.getChildAt(i));
+                if (found != null) return found;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Check if a view is a vertical scroll view.
+     * Walks the class hierarchy to catch subclasses.
+     */
+    private static boolean isVerticalScrollView(View view) {
+        // Direct instanceof for standard Android ScrollView
+        if (view instanceof ScrollView) return true;
+
+        // Walk class hierarchy for name-based matching
+        Class<?> clazz = view.getClass();
+        while (clazz != null && clazz != View.class) {
+            String name = clazz.getName();
+
+            // Skip horizontal variants
+            if (name.contains("Horizontal")) return false;
+
+            // Match known vertical scroll classes:
+            // - androidx.core.widget.NestedScrollView
+            // - com.facebook.react.views.scroll.ReactScrollView (old arch)
+            // - com.facebook.react.views.scroll.ReactScrollViewManager$... (Fabric)
+            // - Any other class ending in "ScrollView" that isn't horizontal
+            if (name.contains("NestedScrollView") ||
+                name.contains("ReactScrollView") ||
+                (name.endsWith("ScrollView") && !name.contains("Horizontal"))) {
+                return true;
+            }
+
+            clazz = clazz.getSuperclass();
+        }
+
+        return false;
+    }
+
+    /**
+     * Get the content child of a ScrollView.
+     */
+    private static View getContentChild(View scrollView) {
+        if (scrollView instanceof ViewGroup) {
+            ViewGroup group = (ViewGroup) scrollView;
+            if (group.getChildCount() > 0) {
+                return group.getChildAt(0);
+            }
+        }
+        return null;
+    }
+}

package/android/src/main/java/com/repliqo/screencapture/ScreenCaptureModule.java

@@ -91,4 +91,45 @@ public class ScreenCaptureModule extends ReactContextBaseJavaModule {
             }
         });
     }
+
+    /**
+     * Capture the FULL content of the primary ScrollView on screen,
+     * including content that is scrolled off-screen.
+     *
+     * Used for heatmap backgrounds. Falls back to a viewport capture
+     * if no ScrollView is found.
+     *
+     * Returns: { image: base64, width: int, height: int, format: "jpeg" }
+     */
+    @ReactMethod
+    public void captureFullContent(Promise promise) {
+        Activity activity = getCurrentActivity();
+        if (activity == null) {
+            promise.resolve(null);
+            return;
+        }
+
+        mainHandler.post(() -> {
+            try {
+                FullContentCapture.FullCaptureResult result =
+                        FullContentCapture.capture(activity);
+
+                if (result == null) {
+                    promise.resolve(null);
+                    return;
+                }
+
+                WritableMap map = Arguments.createMap();
+                map.putString("image", result.image);
+                map.putInt("width", result.width);
+                map.putInt("height", result.height);
+                map.putString("format", "jpeg");
+                map.putBoolean("isFullContent", result.isFullContent);
+                promise.resolve(map);
+            } catch (Exception e) {
+                Log.w(TAG, "captureFullContent failed: " + e.getMessage());
+                promise.resolve(null);
+            }
+        });
+    }
 }

package/dist/components/RepliqoScrollView.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ScrollView, type ScrollViewProps } from 'react-native';
+/**
+ * Drop-in replacement for React Native's ScrollView that automatically
+ * reports the scroll offset to Repliqo for accurate heatmaps.
+ *
+ * Without this, touch coordinates on scrollable screens are relative to
+ * the visible viewport. With this, they're relative to the full content,
+ * so heatmaps accurately show which content elements users touch.
+ *
+ * Usage — just replace `<ScrollView>` with `<RepliqoScrollView>`:
+ *
+ * ```tsx
+ * import { RepliqoScrollView } from '@repliqo/sdk-react-native';
+ *
+ * // Before:
+ * <ScrollView>...</ScrollView>
+ *
+ * // After:
+ * <RepliqoScrollView>...</RepliqoScrollView>
+ * ```
+ *
+ * All ScrollView props are forwarded. Your existing `onScroll` handler
+ * still fires normally.
+ */
+export declare const RepliqoScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;

package/dist/components/RepliqoScrollView.js

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RepliqoScrollView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const client_1 = require("../core/client");
+/**
+ * Drop-in replacement for React Native's ScrollView that automatically
+ * reports the scroll offset to Repliqo for accurate heatmaps.
+ *
+ * Without this, touch coordinates on scrollable screens are relative to
+ * the visible viewport. With this, they're relative to the full content,
+ * so heatmaps accurately show which content elements users touch.
+ *
+ * Usage — just replace `<ScrollView>` with `<RepliqoScrollView>`:
+ *
+ * ```tsx
+ * import { RepliqoScrollView } from '@repliqo/sdk-react-native';
+ *
+ * // Before:
+ * <ScrollView>...</ScrollView>
+ *
+ * // After:
+ * <RepliqoScrollView>...</RepliqoScrollView>
+ * ```
+ *
+ * All ScrollView props are forwarded. Your existing `onScroll` handler
+ * still fires normally.
+ */
+exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, ...props }, ref) => {
+    const handleScroll = (0, react_1.useCallback)((event) => {
+        // Report scroll offset to the SDK
+        try {
+            const offsetY = event.nativeEvent.contentOffset.y;
+            client_1.AppAnalytics.getInstance().setScrollOffset(offsetY);
+        }
+        catch {
+            // SDK not initialized, ignore
+        }
+        // Forward to the original onScroll handler
+        onScroll?.(event);
+    }, [onScroll]);
+    return (<react_native_1.ScrollView ref={ref} {...props} onScroll={handleScroll} scrollEventThrottle={props.scrollEventThrottle ?? 16}/>);
+});
+exports.RepliqoScrollView.displayName = 'RepliqoScrollView';

package/dist/core/client.d.ts

@@ -7,10 +7,12 @@ export declare class AppAnalytics {
     private screenVisitQueue;
     private snapshotQueue;
     private snapshotCapture;
+    private screenCaptureManager;
     private errorTracker;
     private sessionId;
     private currentScreen;
     private currentScreenEnteredAt;
+    private scrollOffsetY;
     private logger;
     private appStateSubscription;
     private constructor();
@@ -23,6 +25,13 @@ export declare class AppAnalytics {
     trackNavigation(fromScreen: string, toScreen: string): void;
     trackCustomEvent(eventName: string, data?: Record<string, any>): void;
     reportError(error: Error, metadata?: Record<string, any>): void;
+    /**
+     * Update the current scroll offset. Called by RepliqoScrollView
+     * or manually from the host app's ScrollView onScroll handler.
+     * The offset is added to touch Y coordinates for accurate heatmaps
+     * on scrollable screens.
+     */
+    setScrollOffset(y: number): void;
     onScreenEnter(screenName: string): void;
     onScreenExit(screenName: string): void;
     flush(): Promise<void>;

package/dist/core/client.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppAnalytics = void 0;
 const react_native_1 = require("react-native");
 const capture_1 = require("../snapshot/capture");
+const ScreenCaptureManager_1 = require("../snapshot/ScreenCaptureManager");
 const config_1 = require("./config");
 const logger_1 = require("./logger");
 const api_client_1 = require("../transport/api.client");
@@ -13,10 +14,12 @@ const error_tracker_1 = require("../trackers/error.tracker");
 class AppAnalytics {
     constructor(config) {
         this.snapshotCapture = null;
+        this.screenCaptureManager = null;
         this.errorTracker = null;
         this.sessionId = null;
         this.currentScreen = null;
         this.currentScreenEnteredAt = null;
+        this.scrollOffsetY = 0;
         this.appStateSubscription = null;
         this.config = (0, config_1.resolveConfig)(config);
         this.logger = new logger_1.Logger(this.config.debug);
@@ -49,6 +52,11 @@ class AppAnalytics {
             }, undefined, // default captureScreenshot provider
             (...args) => this.logger.log(...args), (...args) => this.logger.warn(...args));
         }
+        // Screen capture manager for heatmap backgrounds.
+        // Captures full ScrollView content on screen enter (24h cache).
+        if (this.config.enableSnapshots) {
+            this.screenCaptureManager = new ScreenCaptureManager_1.ScreenCaptureManager((screenName, image, width, height, isFullContent) => this.apiClient.uploadScreenCapture(screenName, image, width, height, isFullContent), this.config.debug);
+        }
         if (this.config.enableCrashTracking) {
             this.errorTracker = new error_tracker_1.ErrorTracker((crash) => {
                 // Crash reports are sent immediately (fire-and-forget), not batched
@@ -93,6 +101,8 @@ class AppAnalytics {
                 instance.snapshotCapture.stop();
                 instance.snapshotCapture = null;
             }
+            instance.screenCaptureManager?.reset();
+            instance.screenCaptureManager = null;
             instance.eventQueue.stopAutoFlush();
             instance.screenVisitQueue.stopAutoFlush();
             instance.snapshotQueue.stopAutoFlush();
@@ -163,10 +173,14 @@ class AppAnalytics {
         if (!this.config.enableTouchTracking) {
             return;
         }
+        // Adjust Y by the current scroll offset so touches map to content
+        // position, not just viewport position. This makes heatmaps accurate
+        // for scrollable screens.
+        const adjustedY = y + this.scrollOffsetY;
         const event = {
             type: 'touch',
             screenName: screenName || this.currentScreen || undefined,
-            data: { x, y, ...extra },
+            data: { x, y: adjustedY, scrollOffsetY: this.scrollOffsetY, ...extra },
             timestamp: new Date().toISOString(),
         };
         this.eventQueue.add(event);
@@ -210,11 +224,23 @@ class AppAnalytics {
         }
         this.errorTracker.reportError(error, metadata);
     }
+    /**
+     * Update the current scroll offset. Called by RepliqoScrollView
+     * or manually from the host app's ScrollView onScroll handler.
+     * The offset is added to touch Y coordinates for accurate heatmaps
+     * on scrollable screens.
+     */
+    setScrollOffset(y) {
+        this.scrollOffsetY = y;
+    }
     onScreenEnter(screenName) {
         this.currentScreen = screenName;
         this.currentScreenEnteredAt = new Date().toISOString();
+        this.scrollOffsetY = 0;
         this.errorTracker?.setCurrentScreen(screenName);
         this.snapshotCapture?.setCurrentScreen(screenName);
+        // Trigger full-content capture for heatmap backgrounds (async, non-blocking)
+        this.screenCaptureManager?.onScreenEnter(screenName);
         this.logger.log('Screen entered:', screenName);
     }
     onScreenExit(screenName) {

package/dist/index.d.ts

@@ -5,11 +5,13 @@ export { trackScreenEnter, trackScreenExit, } from './trackers/screen.tracker';
 export { ErrorTracker } from './trackers/error.tracker';
 export { SnapshotCapture } from './snapshot/capture';
 export { captureScreenshot } from './snapshot/captureScreenshot';
-export { isNativeScreenCaptureAvailable, captureNativeFrame, } from './snapshot/NativeScreenCapture';
+export { isNativeScreenCaptureAvailable, captureNativeFrame, captureFullContent, } from './snapshot/NativeScreenCapture';
+export type { FullContentResult } from './snapshot/NativeScreenCapture';
 export type { EventType, AnalyticsEvent, TouchEventData, NavigationEventData, ScreenVisit, DeviceInfo, SDKConfig, } from './types/events';
 export type { ScreenshotData, SnapshotPayload, } from './types/snapshot';
 export type { CrashReport } from './types/crash';
 export type { SnapshotCaptureConfig } from './snapshot/capture';
 export type { ScreenshotResult } from './snapshot/captureScreenshot';
+export { RepliqoScrollView } from './components/RepliqoScrollView';
 export { DEFAULT_CONFIG } from './core/config';
 export type { ResolvedConfig } from './core/config';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_CONFIG = exports.captureNativeFrame = exports.isNativeScreenCaptureAvailable = exports.captureScreenshot = exports.SnapshotCapture = exports.ErrorTracker = exports.trackScreenExit = exports.trackScreenEnter = exports.trackScreenChange = exports.useNavigationTracker = exports.TouchTracker = exports.AppAnalytics = void 0;
+exports.DEFAULT_CONFIG = exports.RepliqoScrollView = exports.captureFullContent = exports.captureNativeFrame = exports.isNativeScreenCaptureAvailable = exports.captureScreenshot = exports.SnapshotCapture = exports.ErrorTracker = exports.trackScreenExit = exports.trackScreenEnter = exports.trackScreenChange = exports.useNavigationTracker = exports.TouchTracker = exports.AppAnalytics = void 0;
 // Main class
 var client_1 = require("./core/client");
 Object.defineProperty(exports, "AppAnalytics", { enumerable: true, get: function () { return client_1.AppAnalytics; } });
@@ -23,6 +23,10 @@ Object.defineProperty(exports, "captureScreenshot", { enumerable: true, get: fun
 var NativeScreenCapture_1 = require("./snapshot/NativeScreenCapture");
 Object.defineProperty(exports, "isNativeScreenCaptureAvailable", { enumerable: true, get: function () { return NativeScreenCapture_1.isNativeScreenCaptureAvailable; } });
 Object.defineProperty(exports, "captureNativeFrame", { enumerable: true, get: function () { return NativeScreenCapture_1.captureNativeFrame; } });
+Object.defineProperty(exports, "captureFullContent", { enumerable: true, get: function () { return NativeScreenCapture_1.captureFullContent; } });
+// Components
+var RepliqoScrollView_1 = require("./components/RepliqoScrollView");
+Object.defineProperty(exports, "RepliqoScrollView", { enumerable: true, get: function () { return RepliqoScrollView_1.RepliqoScrollView; } });
 // Config
 var config_1 = require("./core/config");
 Object.defineProperty(exports, "DEFAULT_CONFIG", { enumerable: true, get: function () { return config_1.DEFAULT_CONFIG; } });

package/dist/snapshot/NativeScreenCapture.d.ts

@@ -15,3 +15,29 @@ export declare function isNativeScreenCaptureAvailable(): boolean;
  * @returns NativeFrameResult or null if capture failed / not available
  */
 export declare function captureNativeFrame(): Promise<NativeFrameResult | null>;
+/**
+ * Capture the FULL content of the primary ScrollView on screen,
+ * including content scrolled off-screen. Used for heatmap backgrounds.
+ *
+ * Falls back to a viewport capture if no ScrollView is found.
+ * Max height: 5000px. JPEG quality: 60%. Width: ~500px.
+ *
+ * @returns NativeFrameResult or null if capture failed / not available
+ */
+export interface FullContentResult extends NativeFrameResult {
+    /** True if the capture includes full scrollable content. False if viewport-only fallback. */
+    isFullContent: boolean;
+}
+/**
+ * Capture the FULL content of the primary ScrollView on screen,
+ * including content scrolled off-screen. Used for heatmap backgrounds.
+ *
+ * Falls back to a viewport capture if no ScrollView is found.
+ * Max height: 5000px. JPEG quality: 60%. Width: ~500px.
+ *
+ * Known limitation: FlatList/SectionList use RecyclerView which only
+ * renders visible items — full-content capture falls back to viewport.
+ *
+ * @returns FullContentResult with isFullContent flag, or null
+ */
+export declare function captureFullContent(): Promise<FullContentResult | null>;

package/dist/snapshot/NativeScreenCapture.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isNativeScreenCaptureAvailable = isNativeScreenCaptureAvailable;
 exports.captureNativeFrame = captureNativeFrame;
+exports.captureFullContent = captureFullContent;
 const react_native_1 = require("react-native");
 const NativeModule = react_native_1.Platform.OS === 'android'
     ? react_native_1.NativeModules.ScreenCaptureModule ?? null
@@ -36,3 +37,34 @@ async function captureNativeFrame() {
         return null;
     }
 }
+/**
+ * Capture the FULL content of the primary ScrollView on screen,
+ * including content scrolled off-screen. Used for heatmap backgrounds.
+ *
+ * Falls back to a viewport capture if no ScrollView is found.
+ * Max height: 5000px. JPEG quality: 60%. Width: ~500px.
+ *
+ * Known limitation: FlatList/SectionList use RecyclerView which only
+ * renders visible items — full-content capture falls back to viewport.
+ *
+ * @returns FullContentResult with isFullContent flag, or null
+ */
+async function captureFullContent() {
+    if (!NativeModule)
+        return null;
+    try {
+        const result = await NativeModule.captureFullContent();
+        if (!result || !result.image)
+            return null;
+        return {
+            image: result.image,
+            width: result.width,
+            height: result.height,
+            format: 'jpeg',
+            isFullContent: !!result.isFullContent,
+        };
+    }
+    catch {
+        return null;
+    }
+}

package/dist/snapshot/ScreenCaptureManager.d.ts

@@ -0,0 +1,31 @@
+type UploadFn = (screenName: string, image: string, width: number, height: number, isFullContent: boolean) => Promise<void>;
+/**
+ * Manages full-content screen captures for heatmap backgrounds.
+ *
+ * - Captures the full ScrollView content on screen enter
+ * - Local cache with 24h TTL to avoid redundant captures
+ * - Async and non-blocking: never delays navigation or crashes the app
+ * - Independent of the session replay snapshot system
+ */
+export declare class ScreenCaptureManager {
+    private cache;
+    private pending;
+    private uploadFn;
+    private debug;
+    constructor(uploadFn: UploadFn, debug?: boolean);
+    /**
+     * Called when the user enters a screen. Schedules a full-content
+     * capture after a delay if no recent capture exists.
+     *
+     * Fire-and-forget: never awaited by the caller, never throws.
+     */
+    onScreenEnter(screenName: string): void;
+    /**
+     * Check if a capture is needed for this screen.
+     */
+    private shouldCapture;
+    private captureAndUpload;
+    /** Reset the cache (e.g. on session end). */
+    reset(): void;
+}
+export {};

package/dist/snapshot/ScreenCaptureManager.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenCaptureManager = void 0;
+const NativeScreenCapture_1 = require("./NativeScreenCapture");
+/** 24 hours in milliseconds. */
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+/** Wait for screen to render before capturing. */
+const RENDER_DELAY_MS = 800;
+/**
+ * Manages full-content screen captures for heatmap backgrounds.
+ *
+ * - Captures the full ScrollView content on screen enter
+ * - Local cache with 24h TTL to avoid redundant captures
+ * - Async and non-blocking: never delays navigation or crashes the app
+ * - Independent of the session replay snapshot system
+ */
+class ScreenCaptureManager {
+    constructor(uploadFn, debug = false) {
+        this.cache = new Map();
+        this.pending = new Set();
+        this.uploadFn = uploadFn;
+        this.debug = debug;
+    }
+    /**
+     * Called when the user enters a screen. Schedules a full-content
+     * capture after a delay if no recent capture exists.
+     *
+     * Fire-and-forget: never awaited by the caller, never throws.
+     */
+    onScreenEnter(screenName) {
+        if (!this.shouldCapture(screenName))
+            return;
+        // Mark as pending to avoid duplicate captures from rapid navigation
+        this.pending.add(screenName);
+        // Delay to let the screen render completely (animations, data loading)
+        setTimeout(() => {
+            this.captureAndUpload(screenName).catch(() => { });
+        }, RENDER_DELAY_MS);
+    }
+    /**
+     * Check if a capture is needed for this screen.
+     */
+    shouldCapture(screenName) {
+        // Already capturing this screen
+        if (this.pending.has(screenName))
+            return false;
+        // Check local cache TTL
+        const lastCapture = this.cache.get(screenName);
+        if (lastCapture && Date.now() - lastCapture < CACHE_TTL_MS) {
+            return false;
+        }
+        return true;
+    }
+    async captureAndUpload(screenName) {
+        try {
+            const result = await (0, NativeScreenCapture_1.captureFullContent)();
+            if (!result) {
+                if (this.debug) {
+                    console.log(`[Repliqo] Screen capture returned null for "${screenName}"`);
+                }
+                return;
+            }
+            if (this.debug) {
+                console.log(`[Repliqo] Screen captured: "${screenName}" ${result.width}x${result.height} ` +
+                    `(fullContent=${result.isFullContent}, ${Math.round(result.image.length / 1024)}KB)`);
+            }
+            // Upload to backend (fire-and-forget, errors are swallowed)
+            await this.uploadFn(screenName, result.image, result.width, result.height, result.isFullContent);
+            // Update local cache
+            this.cache.set(screenName, Date.now());
+            if (this.debug) {
+                console.log(`[Repliqo] Screen capture uploaded: "${screenName}"`);
+            }
+        }
+        catch (err) {
+            if (this.debug) {
+                console.warn(`[Repliqo] Screen capture failed for "${screenName}":`, err);
+            }
+        }
+        finally {
+            this.pending.delete(screenName);
+        }
+    }
+    /** Reset the cache (e.g. on session end). */
+    reset() {
+        this.cache.clear();
+        this.pending.clear();
+    }
+}
+exports.ScreenCaptureManager = ScreenCaptureManager;

package/dist/transport/api.client.d.ts

@@ -26,4 +26,9 @@ export declare class ApiClient {
     sendCrashesBatch(crashes: CrashReport[]): Promise<{
         count: number;
     }>;
+    /**
+     * Upload a full-content screen capture for heatmap backgrounds.
+     * Fire-and-forget: errors are logged but never thrown.
+     */
+    uploadScreenCapture(screenName: string, image: string, width: number, height: number, isFullContent: boolean): Promise<void>;
 }

package/dist/transport/api.client.js

@@ -152,5 +152,31 @@ class ApiClient {
             throw error;
         }
     }
+    /**
+     * Upload a full-content screen capture for heatmap backgrounds.
+     * Fire-and-forget: errors are logged but never thrown.
+     */
+    async uploadScreenCapture(screenName, image, width, height, isFullContent) {
+        try {
+            const response = await fetch(`${this.baseUrl}/api/screen-captures`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({
+                    screenName,
+                    image,
+                    width,
+                    height,
+                    isFullContent,
+                }),
+            });
+            if (!response.ok) {
+                const text = await response.text();
+                this.logger.warn('Screen capture upload failed:', response.status, text?.substring(0, 200));
+            }
+        }
+        catch (error) {
+            this.logger.warn('Error uploading screen capture:', error);
+        }
+    }
 }
 exports.ApiClient = ApiClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repliqo/sdk-react-native",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "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

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import {
+  ScrollView,
+  type ScrollViewProps,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+} from 'react-native';
+import { AppAnalytics } from '../core/client';
+
+/**
+ * Drop-in replacement for React Native's ScrollView that automatically
+ * reports the scroll offset to Repliqo for accurate heatmaps.
+ *
+ * Without this, touch coordinates on scrollable screens are relative to
+ * the visible viewport. With this, they're relative to the full content,
+ * so heatmaps accurately show which content elements users touch.
+ *
+ * Usage — just replace `<ScrollView>` with `<RepliqoScrollView>`:
+ *
+ * ```tsx
+ * import { RepliqoScrollView } from '@repliqo/sdk-react-native';
+ *
+ * // Before:
+ * <ScrollView>...</ScrollView>
+ *
+ * // After:
+ * <RepliqoScrollView>...</RepliqoScrollView>
+ * ```
+ *
+ * All ScrollView props are forwarded. Your existing `onScroll` handler
+ * still fires normally.
+ */
+export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
+  ({ onScroll, ...props }, ref) => {
+    const handleScroll = useCallback(
+      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        // Report scroll offset to the SDK
+        try {
+          const offsetY = event.nativeEvent.contentOffset.y;
+          AppAnalytics.getInstance().setScrollOffset(offsetY);
+        } catch {
+          // SDK not initialized, ignore
+        }
+
+        // Forward to the original onScroll handler
+        onScroll?.(event);
+      },
+      [onScroll],
+    );
+
+    return (
+      <ScrollView
+        ref={ref}
+        {...props}
+        onScroll={handleScroll}
+        scrollEventThrottle={props.scrollEventThrottle ?? 16}
+      />
+    );
+  },
+);
+
+RepliqoScrollView.displayName = 'RepliqoScrollView';

package/src/core/client.ts

@@ -7,6 +7,7 @@ import {
 } from '../types/events';
 import { SnapshotPayload } from '../types/snapshot';
 import { SnapshotCapture } from '../snapshot/capture';
+import { ScreenCaptureManager } from '../snapshot/ScreenCaptureManager';
 import { ResolvedConfig, resolveConfig, REPLIQO_API_URL } from './config';
 import { Logger } from './logger';
 import { ApiClient } from '../transport/api.client';
@@ -24,10 +25,12 @@ export class AppAnalytics {
   private screenVisitQueue: BatchQueue<ScreenVisit>;
   private snapshotQueue: BatchQueue<SnapshotPayload>;
   private snapshotCapture: SnapshotCapture | null = null;
+  private screenCaptureManager: ScreenCaptureManager | null = null;
   private errorTracker: ErrorTracker | null = null;
   private sessionId: string | null = null;
   private currentScreen: string | null = null;
   private currentScreenEnteredAt: string | null = null;
+  private scrollOffsetY: number = 0;
   private logger: Logger;
   private appStateSubscription: { remove: () => void } | null = null;
 
@@ -93,6 +96,18 @@ export class AppAnalytics {
       );
     }
 
+    // Screen capture manager for heatmap backgrounds.
+    // Captures full ScrollView content on screen enter (24h cache).
+    if (this.config.enableSnapshots) {
+      this.screenCaptureManager = new ScreenCaptureManager(
+        (screenName, image, width, height, isFullContent) =>
+          this.apiClient.uploadScreenCapture(
+            screenName, image, width, height, isFullContent,
+          ),
+        this.config.debug,
+      );
+    }
+
     if (this.config.enableCrashTracking) {
       this.errorTracker = new ErrorTracker((crash) => {
         // Crash reports are sent immediately (fire-and-forget), not batched
@@ -150,6 +165,8 @@ export class AppAnalytics {
         instance.snapshotCapture = null;
       }
 
+      instance.screenCaptureManager?.reset();
+      instance.screenCaptureManager = null;
 
       instance.eventQueue.stopAutoFlush();
       instance.screenVisitQueue.stopAutoFlush();
@@ -246,10 +263,15 @@ export class AppAnalytics {
       return;
     }
 
+    // Adjust Y by the current scroll offset so touches map to content
+    // position, not just viewport position. This makes heatmaps accurate
+    // for scrollable screens.
+    const adjustedY = y + this.scrollOffsetY;
+
     const event: AnalyticsEvent = {
       type: 'touch',
       screenName: screenName || this.currentScreen || undefined,
-      data: { x, y, ...extra },
+      data: { x, y: adjustedY, scrollOffsetY: this.scrollOffsetY, ...extra },
       timestamp: new Date().toISOString(),
     };
 
@@ -306,11 +328,24 @@ export class AppAnalytics {
     this.errorTracker.reportError(error, metadata);
   }
 
+  /**
+   * Update the current scroll offset. Called by RepliqoScrollView
+   * or manually from the host app's ScrollView onScroll handler.
+   * The offset is added to touch Y coordinates for accurate heatmaps
+   * on scrollable screens.
+   */
+  setScrollOffset(y: number): void {
+    this.scrollOffsetY = y;
+  }
+
   onScreenEnter(screenName: string): void {
     this.currentScreen = screenName;
     this.currentScreenEnteredAt = new Date().toISOString();
+    this.scrollOffsetY = 0;
     this.errorTracker?.setCurrentScreen(screenName);
     this.snapshotCapture?.setCurrentScreen(screenName);
+    // Trigger full-content capture for heatmap backgrounds (async, non-blocking)
+    this.screenCaptureManager?.onScreenEnter(screenName);
     this.logger.log('Screen entered:', screenName);
   }
 

package/src/index.ts

@@ -19,7 +19,9 @@ export { captureScreenshot } from './snapshot/captureScreenshot';
 export {
   isNativeScreenCaptureAvailable,
   captureNativeFrame,
+  captureFullContent,
 } from './snapshot/NativeScreenCapture';
+export type { FullContentResult } from './snapshot/NativeScreenCapture';
 
 // Types
 export type {
@@ -42,6 +44,9 @@ export type { CrashReport } from './types/crash';
 export type { SnapshotCaptureConfig } from './snapshot/capture';
 export type { ScreenshotResult } from './snapshot/captureScreenshot';
 
+// Components
+export { RepliqoScrollView } from './components/RepliqoScrollView';
+
 // Config
 export { DEFAULT_CONFIG } from './core/config';
 export type { ResolvedConfig } from './core/config';

package/src/snapshot/NativeScreenCapture.ts

@@ -7,13 +7,20 @@ export interface NativeFrameResult {
   format: 'jpeg';
 }
 
+interface NativeCaptureResult {
+  image: string;
+  width: number;
+  height: number;
+  format: string;
+}
+
+interface NativeFullContentResult extends NativeCaptureResult {
+  isFullContent: boolean;
+}
+
 interface NativeScreenCaptureModule {
-  captureFrame(): Promise<{
-    image: string;
-    width: number;
-    height: number;
-    format: string;
-  } | null>;
+  captureFrame(): Promise<NativeCaptureResult | null>;
+  captureFullContent(): Promise<NativeFullContentResult | null>;
   isAvailable(): Promise<boolean>;
 }
 
@@ -52,3 +59,48 @@ export async function captureNativeFrame(): Promise<NativeFrameResult | null> {
     return null;
   }
 }
+
+/**
+ * Capture the FULL content of the primary ScrollView on screen,
+ * including content scrolled off-screen. Used for heatmap backgrounds.
+ *
+ * Falls back to a viewport capture if no ScrollView is found.
+ * Max height: 5000px. JPEG quality: 60%. Width: ~500px.
+ *
+ * @returns NativeFrameResult or null if capture failed / not available
+ */
+export interface FullContentResult extends NativeFrameResult {
+  /** True if the capture includes full scrollable content. False if viewport-only fallback. */
+  isFullContent: boolean;
+}
+
+/**
+ * Capture the FULL content of the primary ScrollView on screen,
+ * including content scrolled off-screen. Used for heatmap backgrounds.
+ *
+ * Falls back to a viewport capture if no ScrollView is found.
+ * Max height: 5000px. JPEG quality: 60%. Width: ~500px.
+ *
+ * Known limitation: FlatList/SectionList use RecyclerView which only
+ * renders visible items — full-content capture falls back to viewport.
+ *
+ * @returns FullContentResult with isFullContent flag, or null
+ */
+export async function captureFullContent(): Promise<FullContentResult | null> {
+  if (!NativeModule) return null;
+
+  try {
+    const result = await NativeModule.captureFullContent();
+    if (!result || !result.image) return null;
+
+    return {
+      image: result.image,
+      width: result.width,
+      height: result.height,
+      format: 'jpeg',
+      isFullContent: !!result.isFullContent,
+    };
+  } catch {
+    return null;
+  }
+}

package/src/snapshot/ScreenCaptureManager.ts

@@ -0,0 +1,116 @@
+import { captureFullContent, type FullContentResult } from './NativeScreenCapture';
+
+/** 24 hours in milliseconds. */
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+/** Wait for screen to render before capturing. */
+const RENDER_DELAY_MS = 800;
+
+type UploadFn = (
+  screenName: string,
+  image: string,
+  width: number,
+  height: number,
+  isFullContent: boolean,
+) => Promise<void>;
+
+/**
+ * Manages full-content screen captures for heatmap backgrounds.
+ *
+ * - Captures the full ScrollView content on screen enter
+ * - Local cache with 24h TTL to avoid redundant captures
+ * - Async and non-blocking: never delays navigation or crashes the app
+ * - Independent of the session replay snapshot system
+ */
+export class ScreenCaptureManager {
+  private cache = new Map<string, number>();
+  private pending = new Set<string>();
+  private uploadFn: UploadFn;
+  private debug: boolean;
+
+  constructor(uploadFn: UploadFn, debug = false) {
+    this.uploadFn = uploadFn;
+    this.debug = debug;
+  }
+
+  /**
+   * Called when the user enters a screen. Schedules a full-content
+   * capture after a delay if no recent capture exists.
+   *
+   * Fire-and-forget: never awaited by the caller, never throws.
+   */
+  onScreenEnter(screenName: string): void {
+    if (!this.shouldCapture(screenName)) return;
+
+    // Mark as pending to avoid duplicate captures from rapid navigation
+    this.pending.add(screenName);
+
+    // Delay to let the screen render completely (animations, data loading)
+    setTimeout(() => {
+      this.captureAndUpload(screenName).catch(() => {});
+    }, RENDER_DELAY_MS);
+  }
+
+  /**
+   * Check if a capture is needed for this screen.
+   */
+  private shouldCapture(screenName: string): boolean {
+    // Already capturing this screen
+    if (this.pending.has(screenName)) return false;
+
+    // Check local cache TTL
+    const lastCapture = this.cache.get(screenName);
+    if (lastCapture && Date.now() - lastCapture < CACHE_TTL_MS) {
+      return false;
+    }
+
+    return true;
+  }
+
+  private async captureAndUpload(screenName: string): Promise<void> {
+    try {
+      const result = await captureFullContent();
+      if (!result) {
+        if (this.debug) {
+          console.log(`[Repliqo] Screen capture returned null for "${screenName}"`);
+        }
+        return;
+      }
+
+      if (this.debug) {
+        console.log(
+          `[Repliqo] Screen captured: "${screenName}" ${result.width}x${result.height} ` +
+            `(fullContent=${result.isFullContent}, ${Math.round(result.image.length / 1024)}KB)`,
+        );
+      }
+
+      // Upload to backend (fire-and-forget, errors are swallowed)
+      await this.uploadFn(
+        screenName,
+        result.image,
+        result.width,
+        result.height,
+        result.isFullContent,
+      );
+
+      // Update local cache
+      this.cache.set(screenName, Date.now());
+
+      if (this.debug) {
+        console.log(`[Repliqo] Screen capture uploaded: "${screenName}"`);
+      }
+    } catch (err) {
+      if (this.debug) {
+        console.warn(`[Repliqo] Screen capture failed for "${screenName}":`, err);
+      }
+    } finally {
+      this.pending.delete(screenName);
+    }
+  }
+
+  /** Reset the cache (e.g. on session end). */
+  reset(): void {
+    this.cache.clear();
+    this.pending.clear();
+  }
+}

package/src/transport/api.client.ts

@@ -222,4 +222,44 @@ export class ApiClient {
       throw error;
     }
   }
+
+  /**
+   * Upload a full-content screen capture for heatmap backgrounds.
+   * Fire-and-forget: errors are logged but never thrown.
+   */
+  async uploadScreenCapture(
+    screenName: string,
+    image: string,
+    width: number,
+    height: number,
+    isFullContent: boolean,
+  ): Promise<void> {
+    try {
+      const response = await fetch(
+        `${this.baseUrl}/api/screen-captures`,
+        {
+          method: 'POST',
+          headers: this.getHeaders(),
+          body: JSON.stringify({
+            screenName,
+            image,
+            width,
+            height,
+            isFullContent,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        const text = await response.text();
+        this.logger.warn(
+          'Screen capture upload failed:',
+          response.status,
+          text?.substring(0, 200),
+        );
+      }
+    } catch (error) {
+      this.logger.warn('Error uploading screen capture:', error);
+    }
+  }
 }