@repliqo/sdk-react-native 0.3.1 → 0.3.3

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

@@ -0,0 +1,279 @@
+package com.repliqo.screencapture;
+
+import android.app.Activity;
+import android.graphics.Bitmap;
+import android.graphics.Rect;
+import android.os.Build;
+import android.os.Handler;
+import android.os.HandlerThread;
+import android.util.Base64;
+import android.util.Log;
+import android.view.PixelCopy;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.Window;
+import android.widget.ScrollView;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
+
+import java.io.ByteArrayOutputStream;
+import java.lang.reflect.Field;
+import java.util.ArrayList;
+import java.util.concurrent.CountDownLatch;
+import java.util.concurrent.TimeUnit;
+
+/**
+ * Captures the FULL content of a ScrollView using PixelCopy API +
+ * programmatic scrolling.
+ *
+ * Unlike View.draw() which only renders what the view tree has laid out,
+ * PixelCopy captures directly from the GPU's Surface — it sees exactly
+ * what's on screen, including content that React Native has rendered
+ * but that View.draw() misses.
+ *
+ * Flow:
+ *   1. Find the main ScrollView
+ *   2. Save scroll position
+ *   3. For each viewport-sized step:
+ *      a. scrollTo(y) — instant
+ *      b. Wait 2 frames for RN to render
+ *      c. PixelCopy the Window surface (captures what's actually visible)
+ *      d. Crop to the ScrollView's bounds on screen
+ *   4. Restore scroll position
+ *   5. Return all tiles
+ *
+ * Requires API 26+ (Android 8.0). Falls back to MultiWindowCapture on older.
+ */
+public class PixelCopyScan {
+    private static final String TAG = "RepliqoCapture";
+    private static final int TARGET_WIDTH = 390;
+    private static final int JPEG_QUALITY = 45;
+    private static final int FRAME_WAIT_MS = 50; // Wait for RN to render
+
+    /**
+     * Scan the ScrollView content using PixelCopy + programmatic scroll.
+     * Must be called on the UI thread. Blocks for ~100ms per tile.
+     *
+     * @return WritableArray of tiles, or null on failure
+     */
+    public static WritableArray scan(Activity activity) {
+        if (activity == null || activity.isFinishing()) return null;
+
+        // PixelCopy requires API 26+
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
+            Log.d(TAG, "PixelCopy not available (API < 26), using fallback");
+            return null;
+        }
+
+        try {
+            View scrollView = findVerticalScrollView(activity);
+            if (scrollView == null) {
+                Log.d(TAG, "No ScrollView found for PixelCopy scan");
+                return null;
+            }
+
+            View contentView = getContentChild(scrollView);
+            if (contentView == null) return null;
+
+            int viewportHeight = scrollView.getHeight();
+            int contentHeight = contentView.getHeight();
+            int viewportWidth = scrollView.getWidth();
+
+            if (viewportWidth <= 0 || viewportHeight <= 0 || contentHeight <= 0) {
+                return null;
+            }
+
+            // Get ScrollView position on screen (for cropping)
+            int[] scrollViewLoc = new int[2];
+            scrollView.getLocationOnScreen(scrollViewLoc);
+            Rect scrollViewBounds = new Rect(
+                scrollViewLoc[0], scrollViewLoc[1],
+                scrollViewLoc[0] + viewportWidth,
+                scrollViewLoc[1] + viewportHeight
+            );
+
+            Window window = activity.getWindow();
+            int originalScrollY = scrollView.getScrollY();
+
+            WritableArray tiles = Arguments.createArray();
+            int step = (int) (viewportHeight * 0.75); // 25% overlap
+
+            // Create a handler thread for PixelCopy callbacks
+            HandlerThread handlerThread = new HandlerThread("PixelCopyThread");
+            handlerThread.start();
+            Handler handler = new Handler(handlerThread.getLooper());
+
+            try {
+                int y = 0;
+                while (y < contentHeight) {
+                    int scrollTarget = Math.min(y, contentHeight - viewportHeight);
+                    if (scrollTarget < 0) scrollTarget = 0;
+
+                    // Scroll to position
+                    scrollView.scrollTo(0, scrollTarget);
+
+                    // Wait for React Native to render the new content
+                    Thread.sleep(FRAME_WAIT_MS);
+
+                    // Capture using PixelCopy
+                    WritableMap tile = captureWithPixelCopy(
+                        window, scrollViewBounds, handler,
+                        scrollTarget, viewportWidth, viewportHeight, contentHeight
+                    );
+
+                    if (tile != null) {
+                        tiles.pushMap(tile);
+                    }
+
+                    if (y >= contentHeight - viewportHeight) break;
+                    y += step;
+                    if (y > contentHeight - viewportHeight) {
+                        y = contentHeight - viewportHeight;
+                    }
+                }
+            } finally {
+                // Restore scroll position
+                scrollView.scrollTo(0, originalScrollY);
+                handlerThread.quitSafely();
+            }
+
+            Log.d(TAG, "PixelCopy scan: " + tiles.size() + " tiles, " +
+                    "content=" + contentHeight + "px");
+
+            return tiles;
+
+        } catch (Exception e) {
+            Log.w(TAG, "PixelCopyScan failed: " + e.getMessage());
+            return null;
+        }
+    }
+
+    /**
+     * Capture a tile using PixelCopy, cropping to the ScrollView's bounds.
+     */
+    private static WritableMap captureWithPixelCopy(
+            Window window, Rect cropBounds, Handler handler,
+            int scrollY, int viewportWidth, int viewportHeight, int contentHeight) {
+
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) return null;
+
+        try {
+            // Create bitmap for the crop area
+            Bitmap bitmap = Bitmap.createBitmap(
+                cropBounds.width(), cropBounds.height(),
+                Bitmap.Config.ARGB_8888
+            );
+
+            CountDownLatch latch = new CountDownLatch(1);
+            final int[] resultCode = new int[]{-1};
+
+            PixelCopy.request(window, cropBounds, bitmap, (result) -> {
+                resultCode[0] = result;
+                latch.countDown();
+            }, handler);
+
+            // Wait for PixelCopy to complete (max 1 second)
+            if (!latch.await(1, TimeUnit.SECONDS)) {
+                bitmap.recycle();
+                return null;
+            }
+
+            if (resultCode[0] != PixelCopy.SUCCESS) {
+                bitmap.recycle();
+                return null;
+            }
+
+            // Scale to target width
+            float scale = (float) TARGET_WIDTH / viewportWidth;
+            int outWidth = TARGET_WIDTH;
+            int outHeight = Math.round(viewportHeight * scale);
+
+            Bitmap scaled = Bitmap.createScaledBitmap(bitmap, outWidth, outHeight, true);
+            bitmap.recycle();
+
+            // Compress to JPEG
+            ByteArrayOutputStream baos = new ByteArrayOutputStream();
+            scaled.compress(Bitmap.CompressFormat.JPEG, JPEG_QUALITY, baos);
+            String base64 = Base64.encodeToString(baos.toByteArray(), Base64.NO_WRAP);
+            scaled.recycle();
+
+            WritableMap tile = Arguments.createMap();
+            tile.putString("image", base64);
+            tile.putInt("width", outWidth);
+            tile.putInt("height", outHeight);
+            tile.putInt("scrollOffsetY", scrollY);
+            tile.putInt("viewportHeight", viewportHeight);
+            tile.putInt("contentHeight", contentHeight);
+            tile.putString("format", "jpeg");
+            return tile;
+
+        } catch (Exception e) {
+            Log.w(TAG, "PixelCopy at Y=" + scrollY + " failed: " + e.getMessage());
+            return null;
+        }
+    }
+
+    // --- View finders (same as ScrollScanCapture) ---
+
+    @SuppressWarnings("unchecked")
+    private static View findVerticalScrollView(Activity activity) {
+        View decorView = activity.getWindow().getDecorView();
+        View found = findInTree(decorView);
+        if (found != null) return found;
+        try {
+            Class<?> wmgClass = Class.forName("android.view.WindowManagerGlobal");
+            Object wmg = wmgClass.getMethod("getInstance").invoke(null);
+            Field viewsField = wmgClass.getDeclaredField("mViews");
+            viewsField.setAccessible(true);
+            ArrayList<View> views = (ArrayList<View>) viewsField.get(wmg);
+            if (views != null) {
+                for (View root : views) {
+                    if (root == decorView) continue;
+                    found = findInTree(root);
+                    if (found != null) return found;
+                }
+            }
+        } catch (Exception e) { }
+        return null;
+    }
+
+    private static View findInTree(View view) {
+        if (view == null) return null;
+        if (isVerticalScroll(view) && 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 = findInTree(group.getChildAt(i));
+                if (found != null) return found;
+            }
+        }
+        return null;
+    }
+
+    private static boolean isVerticalScroll(View view) {
+        if (view instanceof ScrollView) return true;
+        Class<?> clazz = view.getClass();
+        while (clazz != null && clazz != View.class) {
+            String name = clazz.getName();
+            if (name.contains("Horizontal")) return false;
+            if (name.contains("NestedScrollView") ||
+                name.contains("ReactScrollView") ||
+                name.endsWith("ScrollView")) return true;
+            clazz = clazz.getSuperclass();
+        }
+        return false;
+    }
+
+    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

@@ -152,7 +152,14 @@ public class ScreenCaptureModule extends ReactContextBaseJavaModule {
 
         mainHandler.post(() -> {
             try {
-                WritableArray tiles = ScrollScanCapture.scan(activity);
+                // 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());

package/dist/components/RepliqoScrollView.js

@@ -38,11 +38,11 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const client_1 = require("../core/client");
 /** Minimum scroll delta (px) to trigger a new tile capture. */
-const MIN_DELTA_PX = 50;
+const MIN_DELTA_PX = 20;
 /** Debounce: wait this long after scroll stops before capturing. */
-const DEBOUNCE_MS = 500;
+const DEBOUNCE_MS = 300;
 /** Throttle: minimum time between tile captures. */
-const THROTTLE_MS = 3000;
+const THROTTLE_MS = 500;
 /**
  * Drop-in replacement for React Native's ScrollView that:
  *
@@ -51,7 +51,7 @@ const THROTTLE_MS = 3000;
  *     screen building — the backend composites these into a
  *     full-content image over time from multiple user sessions
  */
-exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumScrollEnd, onLayout, ...props }, ref) => {
+exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumScrollEnd, onScrollEndDrag, onLayout, ...props }, ref) => {
     const debounceTimer = (0, react_1.useRef)(null);
     const lastCaptureTime = (0, react_1.useRef)(0);
     const lastCaptureY = (0, react_1.useRef)(-999);
@@ -109,12 +109,17 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
         }
         onScroll?.(event);
     }, [onScroll]);
+    const handleScrollEndDrag = (0, react_1.useCallback)((event) => {
+        // User lifted finger — capture immediately
+        doCapture();
+        onScrollEndDrag?.(event);
+    }, [onScrollEndDrag]);
     const handleMomentumEnd = (0, react_1.useCallback)((event) => {
         if (debounceTimer.current) {
             clearTimeout(debounceTimer.current);
             debounceTimer.current = null;
         }
-        setTimeout(doCapture, 200);
+        doCapture();
         onMomentumScrollEnd?.(event);
     }, [onMomentumScrollEnd]);
     const handleLayout = (0, react_1.useCallback)((event) => {
@@ -130,6 +135,6 @@ exports.RepliqoScrollView = react_1.default.forwardRef(({ onScroll, onMomentumSc
         }
         onLayout?.(event);
     }, [onLayout]);
-    return (<react_native_1.ScrollView ref={ref} {...props} onScroll={handleScroll} onMomentumScrollEnd={handleMomentumEnd} onLayout={handleLayout} scrollEventThrottle={props.scrollEventThrottle ?? 16}/>);
+    return (<react_native_1.ScrollView ref={ref} {...props} onScroll={handleScroll} onScrollEndDrag={handleScrollEndDrag} onMomentumScrollEnd={handleMomentumEnd} onLayout={handleLayout} scrollEventThrottle={props.scrollEventThrottle ?? 16}/>);
 });
 exports.RepliqoScrollView.displayName = 'RepliqoScrollView';

package/dist/core/client.js

@@ -284,14 +284,15 @@ class AppAnalytics {
         this.scrollOffsetY = 0;
         this.errorTracker?.setCurrentScreen(screenName);
         this.snapshotCapture?.setCurrentScreen(screenName);
-        // Auto-scan: programmatically scroll the ScrollView and capture
-        // all viewport tiles in ~300ms. Fire-and-forget, invisible to user.
+        // 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);
-            }, 1500); // Wait for screen to fully render
+            }, 2000);
         }
         this.logger.log('Screen entered:', screenName);
     }

package/package.json

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

@@ -9,11 +9,11 @@ import {
 import { AppAnalytics } from '../core/client';
 
 /** Minimum scroll delta (px) to trigger a new tile capture. */
-const MIN_DELTA_PX = 50;
+const MIN_DELTA_PX = 20;
 /** Debounce: wait this long after scroll stops before capturing. */
-const DEBOUNCE_MS = 500;
+const DEBOUNCE_MS = 300;
 /** Throttle: minimum time between tile captures. */
-const THROTTLE_MS = 3000;
+const THROTTLE_MS = 500;
 
 /**
  * Drop-in replacement for React Native's ScrollView that:
@@ -24,7 +24,7 @@ const THROTTLE_MS = 3000;
  *     full-content image over time from multiple user sessions
  */
 export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
-  ({ onScroll, onMomentumScrollEnd, onLayout, ...props }, ref) => {
+  ({ onScroll, onMomentumScrollEnd, onScrollEndDrag, onLayout, ...props }, ref) => {
     const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
     const lastCaptureTime = useRef(0);
     const lastCaptureY = useRef(-999);
@@ -99,13 +99,22 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
       [onScroll],
     );
 
+    const handleScrollEndDrag = useCallback(
+      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        // User lifted finger — capture immediately
+        doCapture();
+        onScrollEndDrag?.(event);
+      },
+      [onScrollEndDrag],
+    );
+
     const handleMomentumEnd = useCallback(
       (event: NativeSyntheticEvent<NativeScrollEvent>) => {
         if (debounceTimer.current) {
           clearTimeout(debounceTimer.current);
           debounceTimer.current = null;
         }
-        setTimeout(doCapture, 200);
+        doCapture();
         onMomentumScrollEnd?.(event);
       },
       [onMomentumScrollEnd],
@@ -133,6 +142,7 @@ export const RepliqoScrollView = React.forwardRef<ScrollView, ScrollViewProps>(
         ref={ref}
         {...props}
         onScroll={handleScroll}
+        onScrollEndDrag={handleScrollEndDrag}
         onMomentumScrollEnd={handleMomentumEnd}
         onLayout={handleLayout}
         scrollEventThrottle={props.scrollEventThrottle ?? 16}

package/src/core/client.ts

@@ -416,13 +416,14 @@ export class AppAnalytics {
     this.scrollOffsetY = 0;
     this.errorTracker?.setCurrentScreen(screenName);
     this.snapshotCapture?.setCurrentScreen(screenName);
-    // Auto-scan: programmatically scroll the ScrollView and capture
-    // all viewport tiles in ~300ms. Fire-and-forget, invisible to user.
+    // 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);
-      }, 1500); // Wait for screen to fully render
+      }, 2000);
     }
 
     this.logger.log('Screen entered:', screenName);