@repliqo/sdk-react-native 0.3.6 → 0.3.8

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

@@ -57,6 +57,10 @@ public class MultiWindowCapture {
             int screenHeight = decorView.getHeight();
 
             if (screenWidth <= 0 || screenHeight <= 0) {
+                // Happens during layout transitions / before first layout.
+                // Log so a persistent capture failure is diagnosable.
+                Log.w(TAG, "capture skipped: invalid decor dimensions "
+                        + screenWidth + "x" + screenHeight);
                 return null;
             }
 
@@ -77,38 +81,41 @@ public class MultiWindowCapture {
                 return captureDecorView(decorView, outWidth, outHeight, scale);
             }
 
-            // Create the composite bitmap
+            // Create the composite bitmap. Recycled in finally so it never
+            // leaks if compression (bitmapToBase64) or anything else throws.
             Bitmap composite = Bitmap.createBitmap(outWidth, outHeight,
                     Bitmap.Config.ARGB_8888);
-            Canvas canvas = new Canvas(composite);
-            canvas.scale(scale, scale);
+            try {
+                Canvas canvas = new Canvas(composite);
+                canvas.scale(scale, scale);
 
-            // Draw each visible root view in order (bottom to top)
-            for (ViewInfo info : views) {
-                if (info.view.getVisibility() != View.VISIBLE) continue;
-                if (info.view.getWidth() <= 0 || info.view.getHeight() <= 0) continue;
+                // Draw each visible root view in order (bottom to top)
+                for (ViewInfo info : views) {
+                    if (info.view.getVisibility() != View.VISIBLE) continue;
+                    if (info.view.getWidth() <= 0 || info.view.getHeight() <= 0) continue;
 
-                canvas.save();
+                    canvas.save();
 
-                // Apply the window's position offset
-                canvas.translate(info.left, info.top);
+                    // Apply the window's position offset
+                    canvas.translate(info.left, info.top);
 
-                try {
-                    info.view.draw(canvas);
-                } catch (Exception e) {
-                    Log.w(TAG, "Failed to draw view: " + e.getMessage());
-                }
+                    try {
+                        info.view.draw(canvas);
+                    } catch (Exception e) {
+                        Log.w(TAG, "Failed to draw view: " + e.getMessage());
+                    }
 
-                canvas.restore();
-            }
-
-            // Compress to JPEG
-            String base64 = bitmapToBase64(composite);
-            composite.recycle();
+                    canvas.restore();
+                }
 
-            if (base64 == null) return null;
+                // Compress to JPEG
+                String base64 = bitmapToBase64(composite);
+                if (base64 == null) return null;
 
-            return new CaptureResult(base64, outWidth, outHeight);
+                return new CaptureResult(base64, outWidth, outHeight);
+            } finally {
+                composite.recycle();
+            }
 
         } catch (Exception e) {
             Log.w(TAG, "MultiWindowCapture failed: " + e.getMessage());
@@ -121,21 +128,23 @@ public class MultiWindowCapture {
      */
     private static CaptureResult captureDecorView(
             View decorView, int outWidth, int outHeight, float scale) {
+        Bitmap bitmap = null;
         try {
-            Bitmap bitmap = Bitmap.createBitmap(outWidth, outHeight,
+            bitmap = Bitmap.createBitmap(outWidth, outHeight,
                     Bitmap.Config.ARGB_8888);
             Canvas canvas = new Canvas(bitmap);
             canvas.scale(scale, scale);
             decorView.draw(canvas);
 
             String base64 = bitmapToBase64(bitmap);
-            bitmap.recycle();
-
             if (base64 == null) return null;
             return new CaptureResult(base64, outWidth, outHeight);
         } catch (Exception e) {
             Log.w(TAG, "DecorView capture failed: " + e.getMessage());
             return null;
+        } finally {
+            // Always recycle, even if bitmapToBase64 / draw threw.
+            if (bitmap != null) bitmap.recycle();
         }
     }
 
@@ -197,7 +206,10 @@ public class MultiWindowCapture {
             ByteArrayOutputStream baos = new ByteArrayOutputStream();
             bitmap.compress(Bitmap.CompressFormat.JPEG, JPEG_QUALITY, baos);
             return Base64.encodeToString(baos.toByteArray(), Base64.NO_WRAP);
-        } catch (Exception e) {
+        } catch (Throwable e) {
+            // Catch Throwable so OutOfMemoryError (not an Exception) is also
+            // surfaced rather than silently producing a null capture.
+            Log.w(TAG, "JPEG compression failed: " + e.getMessage());
             return null;
         }
     }

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

@@ -12,7 +12,6 @@ import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.bridge.WritableMap;
 
 /**
@@ -92,79 +91,4 @@ 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);
-            }
-        });
-    }
-
-    /**
-     * Perform a fast programmatic scroll-scan of the main ScrollView.
-     * Captures the entire content as viewport tiles in ~300-500ms.
-     * Invisible to the user (scroll is restored to original position).
-     *
-     * Returns: Array<{ image, width, height, scrollOffsetY, viewportHeight,
-     *                   contentHeight, format }>
-     */
-    @ReactMethod
-    public void scanFullContent(Promise promise) {
-        Activity activity = getCurrentActivity();
-        if (activity == null) {
-            promise.resolve(null);
-            return;
-        }
-
-        mainHandler.post(() -> {
-            try {
-                // Try PixelCopy (API 26+, captures from GPU framebuffer)
-                WritableArray tiles = PixelCopyScan.scan(activity);
-
-                // Fallback to View.draw scan
-                if (tiles == null || tiles.size() == 0) {
-                    tiles = ScrollScanCapture.scan(activity);
-                }
-
-                promise.resolve(tiles);
-            } catch (Exception e) {
-                Log.w(TAG, "scanFullContent failed: " + e.getMessage());
-                promise.resolve(null);
-            }
-        });
-    }
 }

package/dist/components/RepliqoScrollView.js

@@ -79,6 +79,10 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
     const scrollViewId = (0, react_1.useRef)(nextScrollViewId());
     const innerRef = (0, react_1.useRef)(null);
     const isMounted = (0, react_1.useRef)(true);
+    // Last measured window-relative top Y of the ScrollView — passed to
+    // captureScrollTile so the backend can crop each tile to just the
+    // scroll viewport area (no fixed header/footer duplication).
+    const lastViewportTop = (0, react_1.useRef)(null);
     const scrollState = (0, react_1.useRef)(null);
     // Forward the inner ref to the parent's ref (if provided).
     // IMPORTANT: do NOT clear innerRef on cleanup — RN sometimes calls the
@@ -112,6 +116,7 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
             // ignore those, the next onLayout/onScroll will re-measure.
             if (width <= 0 || height <= 0)
                 return;
+            lastViewportTop.current = y;
             try {
                 client_1.AppAnalytics.getInstance().registerScrollView(scrollViewId.current, {
                     x, y, width, height,
@@ -166,7 +171,8 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
         lastCaptureY.current = state.offsetY;
         initialCaptured.current = true;
         try {
-            client_1.AppAnalytics.getInstance().captureScrollTile(state.offsetY, state.viewportHeight, state.contentHeight);
+            const windowHeight = react_native_1.Dimensions.get('window').height;
+            client_1.AppAnalytics.getInstance().captureScrollTile(state.offsetY, state.viewportHeight, state.contentHeight, lastViewportTop.current ?? undefined, windowHeight);
         }
         catch { }
     };

package/dist/core/client.d.ts

@@ -85,16 +85,16 @@ export declare class AppAnalytics {
      * Capture the current viewport as a tile for collaborative screen
      * building. Called by RepliqoScrollView on scroll stops.
      *
-     * The tile includes the scrollOffsetY so the backend knows where
-     * in the full content this viewport belongs. Multiple users/sessions
-     * contribute tiles until the full content is covered.
+     * The tile includes:
+     *  - `scrollOffsetY`: where in the full content this viewport belongs
+     *  - `viewportTop`: Y position (window logical px) of the ScrollView's
+     *    top edge. Used by the backend to crop each tile to just the
+     *    scrollable area, removing fixed headers/footers that would
+     *    otherwise duplicate in the composite.
+     *  - `windowHeight`: window height in logical px, for image-to-logical
+     *    scale computation during backend cropping.
      */
-    captureScrollTile(scrollOffsetY: number, viewportHeight: number, contentHeight: number): void;
-    /**
-     * Programmatically scroll-scan the current ScrollView and upload all
-     * tiles to the backend. Invisible to the user (~300-500ms).
-     */
-    private autoScanScreen;
+    captureScrollTile(scrollOffsetY: number, viewportHeight: number, contentHeight: number, viewportTop?: number, windowHeight?: number): void;
     onScreenEnter(screenName: string): void;
     onScreenExit(screenName: string): void;
     flush(): Promise<void>;

package/dist/core/client.js

@@ -331,11 +331,16 @@ class AppAnalytics {
      * Capture the current viewport as a tile for collaborative screen
      * building. Called by RepliqoScrollView on scroll stops.
      *
-     * The tile includes the scrollOffsetY so the backend knows where
-     * in the full content this viewport belongs. Multiple users/sessions
-     * contribute tiles until the full content is covered.
+     * The tile includes:
+     *  - `scrollOffsetY`: where in the full content this viewport belongs
+     *  - `viewportTop`: Y position (window logical px) of the ScrollView's
+     *    top edge. Used by the backend to crop each tile to just the
+     *    scrollable area, removing fixed headers/footers that would
+     *    otherwise duplicate in the composite.
+     *  - `windowHeight`: window height in logical px, for image-to-logical
+     *    scale computation during backend cropping.
      */
-    captureScrollTile(scrollOffsetY, viewportHeight, contentHeight) {
+    captureScrollTile(scrollOffsetY, viewportHeight, contentHeight, viewportTop, windowHeight) {
         if (!this.sessionId || !this.currentScreen)
             return;
         if (viewportHeight <= 0)
@@ -350,38 +355,15 @@ class AppAnalytics {
                     return;
                 this.logger.log(`Scroll tile: "${screenName}" Y=${Math.round(scrollOffsetY)} ` +
                     `vp=${Math.round(viewportHeight)} content=${Math.round(contentHeight)} ` +
+                    `top=${viewportTop !== undefined ? Math.round(viewportTop) : '?'} ` +
                     `${Math.round(frame.image.length / 1024)}KB`);
-                await this.apiClient.uploadScreenTile(sessionId, screenName, frame.image, frame.width, frame.height, scrollOffsetY, viewportHeight, contentHeight);
+                await this.apiClient.uploadScreenTile(sessionId, screenName, frame.image, frame.width, frame.height, scrollOffsetY, viewportHeight, contentHeight, viewportTop, windowHeight);
             }
             catch (err) {
                 this.logger.warn('Scroll tile failed:', err);
             }
         })();
     }
-    /**
-     * Programmatically scroll-scan the current ScrollView and upload all
-     * tiles to the backend. Invisible to the user (~300-500ms).
-     */
-    autoScanScreen(screenName) {
-        (async () => {
-            try {
-                const tiles = await (0, NativeScreenCapture_1.scanFullContent)();
-                if (!tiles || tiles.length === 0) {
-                    this.logger.log(`Auto-scan: no ScrollView found for "${screenName}"`);
-                    return;
-                }
-                this.logger.log(`Auto-scan: "${screenName}" captured ${tiles.length} tiles ` +
-                    `(content=${tiles[0].contentHeight}px)`);
-                // Upload all tiles in parallel
-                const sessionId = this.sessionId;
-                await Promise.all(tiles.map((tile) => this.apiClient.uploadScreenTile(sessionId, screenName, tile.image, tile.width, tile.height, tile.scrollOffsetY, tile.viewportHeight, tile.contentHeight).catch(() => { })));
-                this.logger.log(`Auto-scan: "${screenName}" tiles uploaded`);
-            }
-            catch (err) {
-                this.logger.warn('Auto-scan failed:', err);
-            }
-        })();
-    }
     onScreenEnter(screenName) {
         this.currentScreen = screenName;
         this.currentScreenEnteredAt = new Date().toISOString();
@@ -390,14 +372,12 @@ class AppAnalytics {
         this.scrollViewRegistry.clear();
         this.errorTracker?.setCurrentScreen(screenName);
         this.snapshotCapture?.setCurrentScreen(screenName);
-        // 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.
+        // NOTE: full-content capture is NOT done via programmatic scroll +
+        // native capture. React Native does NOT render off-screen content to
+        // the GPU or view tree, so any programmatic-scroll approach produces
+        // blank tiles. Full-content heatmap backgrounds are built entirely
+        // from viewport tiles captured by RepliqoScrollView as the user
+        // naturally scrolls through the content.
         this.logger.log('Screen entered:', screenName);
     }
     onScreenExit(screenName) {

package/dist/index.d.ts

@@ -5,8 +5,7 @@ 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, captureFullContent, } from './snapshot/NativeScreenCapture';
-export type { FullContentResult } from './snapshot/NativeScreenCapture';
+export { isNativeScreenCaptureAvailable, captureNativeFrame, } 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';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.DEFAULT_CONFIG = exports.RepliqoScrollView = 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,7 +23,6 @@ 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; } });

package/dist/snapshot/NativeScreenCapture.d.ts

@@ -12,50 +12,12 @@ export declare function isNativeScreenCaptureAvailable(): boolean;
  *
  * No permissions required. No dialog. No foreground service.
  *
- * @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.
+ * This is the ONLY native capture path. Full-content capture of
+ * off-screen ScrollView content is NOT possible natively (React Native
+ * doesn't render off-screen content to the GPU/view tree) — full-content
+ * heatmap backgrounds are instead built collaboratively from viewport
+ * tiles captured as the user naturally scrolls (see RepliqoScrollView).
  *
  * @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>;
-export interface ScanTile {
-    image: string;
-    width: number;
-    height: number;
-    scrollOffsetY: number;
-    viewportHeight: number;
-    contentHeight: number;
-}
-/**
- * Perform a fast programmatic scroll-scan of the main ScrollView.
- * Captures the entire content as viewport tiles in ~300-500ms.
- *
- * The scan is invisible to the user — scroll position is saved and
- * restored. Returns an array of tiles covering the full content.
- *
- * @returns Array of tiles, or null if no ScrollView or not available
- */
-export declare function scanFullContent(): Promise<ScanTile[] | null>;
+export declare function captureNativeFrame(): Promise<NativeFrameResult | null>;

package/dist/snapshot/NativeScreenCapture.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isNativeScreenCaptureAvailable = isNativeScreenCaptureAvailable;
 exports.captureNativeFrame = captureNativeFrame;
-exports.captureFullContent = captureFullContent;
-exports.scanFullContent = scanFullContent;
 const react_native_1 = require("react-native");
 const NativeModule = react_native_1.Platform.OS === 'android'
     ? react_native_1.NativeModules.ScreenCaptureModule ?? null
@@ -18,6 +16,12 @@ function isNativeScreenCaptureAvailable() {
  *
  * No permissions required. No dialog. No foreground service.
  *
+ * This is the ONLY native capture path. Full-content capture of
+ * off-screen ScrollView content is NOT possible natively (React Native
+ * doesn't render off-screen content to the GPU/view tree) — full-content
+ * heatmap backgrounds are instead built collaboratively from viewport
+ * tiles captured as the user naturally scrolls (see RepliqoScrollView).
+ *
  * @returns NativeFrameResult or null if capture failed / not available
  */
 async function captureNativeFrame() {
@@ -38,65 +42,3 @@ 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;
-    }
-}
-/**
- * Perform a fast programmatic scroll-scan of the main ScrollView.
- * Captures the entire content as viewport tiles in ~300-500ms.
- *
- * The scan is invisible to the user — scroll position is saved and
- * restored. Returns an array of tiles covering the full content.
- *
- * @returns Array of tiles, or null if no ScrollView or not available
- */
-async function scanFullContent() {
-    if (!NativeModule)
-        return null;
-    try {
-        const tiles = await NativeModule.scanFullContent();
-        if (!tiles || !Array.isArray(tiles) || tiles.length === 0)
-            return null;
-        return tiles
-            .filter((t) => t && t.image)
-            .map((t) => ({
-            image: t.image,
-            width: t.width,
-            height: t.height,
-            scrollOffsetY: t.scrollOffsetY,
-            viewportHeight: t.viewportHeight,
-            contentHeight: t.contentHeight,
-        }));
-    }
-    catch {
-        return null;
-    }
-}

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

@@ -32,7 +32,14 @@ export declare class ApiClient {
      */
     /**
      * Upload a scroll tile for collaborative screen building.
+     *
+     * @param viewportTop Y position (window logical px) of the ScrollView's
+     *   top edge. Used by the backend to crop each tile to just the
+     *   scrollable area, removing fixed headers/footers that would
+     *   otherwise duplicate in the composite.
+     * @param windowHeight Window height (logical px) at capture time.
+     *   Used by the backend to compute image-to-logical scale for cropping.
      */
-    uploadScreenTile(sessionId: string, screenName: string, image: string, width: number, height: number, scrollOffsetY: number, viewportHeight: number, contentHeight: number): Promise<void>;
+    uploadScreenTile(sessionId: string, screenName: string, image: string, width: number, height: number, scrollOffsetY: number, viewportHeight: number, contentHeight: number, viewportTop?: number, windowHeight?: number): Promise<void>;
     uploadScreenCapture(screenName: string, image: string, width: number, height: number, isFullContent: boolean): Promise<void>;
 }

package/dist/transport/api.client.js

@@ -158,22 +158,36 @@ class ApiClient {
      */
     /**
      * Upload a scroll tile for collaborative screen building.
+     *
+     * @param viewportTop Y position (window logical px) of the ScrollView's
+     *   top edge. Used by the backend to crop each tile to just the
+     *   scrollable area, removing fixed headers/footers that would
+     *   otherwise duplicate in the composite.
+     * @param windowHeight Window height (logical px) at capture time.
+     *   Used by the backend to compute image-to-logical scale for cropping.
      */
-    async uploadScreenTile(sessionId, screenName, image, width, height, scrollOffsetY, viewportHeight, contentHeight) {
+    async uploadScreenTile(sessionId, screenName, image, width, height, scrollOffsetY, viewportHeight, contentHeight, viewportTop, windowHeight) {
         try {
+            const body = {
+                sessionId,
+                screenName,
+                image,
+                width,
+                height,
+                scrollOffsetY: Math.round(scrollOffsetY),
+                viewportHeight: Math.round(viewportHeight),
+                contentHeight: Math.round(contentHeight),
+            };
+            if (typeof viewportTop === 'number' && Number.isFinite(viewportTop)) {
+                body.viewportTop = Math.round(viewportTop);
+            }
+            if (typeof windowHeight === 'number' && Number.isFinite(windowHeight)) {
+                body.windowHeight = Math.round(windowHeight);
+            }
             const response = await fetch(`${this.baseUrl}/api/screen-tiles`, {
                 method: 'POST',
                 headers: this.getHeaders(),
-                body: JSON.stringify({
-                    sessionId,
-                    screenName,
-                    image,
-                    width,
-                    height,
-                    scrollOffsetY: Math.round(scrollOffsetY),
-                    viewportHeight: Math.round(viewportHeight),
-                    contentHeight: Math.round(contentHeight),
-                }),
+                body: JSON.stringify(body),
             });
             if (!response.ok) {
                 const text = await response.text();

package/package.json

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

@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useEffect } from 'react';
 import {
   ScrollView,
   Keyboard,
+  Dimensions,
   type ScrollViewProps,
   type NativeSyntheticEvent,
   type NativeScrollEvent,
@@ -54,6 +55,10 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
     const scrollViewId = useRef<string>(nextScrollViewId());
     const innerRef = useRef<ScrollView | null>(null);
     const isMounted = useRef(true);
+    // Last measured window-relative top Y of the ScrollView — passed to
+    // captureScrollTile so the backend can crop each tile to just the
+    // scroll viewport area (no fixed header/footer duplication).
+    const lastViewportTop = useRef<number | null>(null);
     const scrollState = useRef<{
       offsetY: number;
       viewportHeight: number;
@@ -88,6 +93,7 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
         // RN sometimes returns 0/0 dims before the view is positioned —
         // ignore those, the next onLayout/onScroll will re-measure.
         if (width <= 0 || height <= 0) return;
+        lastViewportTop.current = y;
         try {
           AppAnalytics.getInstance().registerScrollView(scrollViewId.current, {
             x, y, width, height,
@@ -141,10 +147,13 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
       initialCaptured.current = true;
 
       try {
+        const windowHeight = Dimensions.get('window').height;
         AppAnalytics.getInstance().captureScrollTile(
           state.offsetY,
           state.viewportHeight,
           state.contentHeight,
+          lastViewportTop.current ?? undefined,
+          windowHeight,
         );
       } catch {}
     };