@repliqo/sdk-react-native 0.1.2 → 0.1.3

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

@@ -11,6 +11,7 @@ export declare class AppAnalytics {
     private sessionId;
     private currentScreen;
     private currentScreenEnteredAt;
+    private scrollOffsetY;
     private logger;
     private appStateSubscription;
     private constructor();
@@ -23,6 +24,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

@@ -17,6 +17,7 @@ class AppAnalytics {
         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);
@@ -163,10 +164,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,9 +215,19 @@ 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; // Reset scroll on screen change
         this.errorTracker?.setCurrentScreen(screenName);
         this.snapshotCapture?.setCurrentScreen(screenName);
         this.logger.log('Screen entered:', screenName);

package/dist/index.d.ts

@@ -11,5 +11,6 @@ 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.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,9 @@ 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; } });
+// 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/package.json

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

@@ -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

@@ -28,6 +28,7 @@ export class AppAnalytics {
   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;
 
@@ -246,10 +247,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,9 +312,20 @@ 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; // Reset scroll on screen change
     this.errorTracker?.setCurrentScreen(screenName);
     this.snapshotCapture?.setCurrentScreen(screenName);
     this.logger.log('Screen entered:', screenName);

package/src/index.ts

@@ -42,6 +42,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';