@repliqo/sdk-react-native 0.1.1 → 0.1.2

package/dist/trackers/touch.tracker.d.ts

@@ -4,5 +4,21 @@ interface TouchTrackerProps {
     screenName?: string;
     enabled?: boolean;
 }
+/**
+ * Transparent wrapper that captures touch coordinates for heatmaps
+ * WITHOUT interfering with the app's gesture/button handling.
+ *
+ * Uses `onTouchStart` (a passive event) instead of the Gesture
+ * Responder System (`onStartShouldSetResponderCapture`). This means:
+ *  - Buttons, TouchableOpacity, Pressable all work normally
+ *  - Navigation gestures (swipe back) are unaffected
+ *  - ScrollViews scroll as expected
+ *  - No responder conflicts with modals or bottom sheets
+ *
+ * Usage:
+ *   <TouchTracker>
+ *     <App />
+ *   </TouchTracker>
+ */
 export declare const TouchTracker: React.FC<TouchTrackerProps>;
 export {};

package/dist/trackers/touch.tracker.js

@@ -7,11 +7,26 @@ exports.TouchTracker = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const client_1 = require("../core/client");
+/**
+ * Transparent wrapper that captures touch coordinates for heatmaps
+ * WITHOUT interfering with the app's gesture/button handling.
+ *
+ * Uses `onTouchStart` (a passive event) instead of the Gesture
+ * Responder System (`onStartShouldSetResponderCapture`). This means:
+ *  - Buttons, TouchableOpacity, Pressable all work normally
+ *  - Navigation gestures (swipe back) are unaffected
+ *  - ScrollViews scroll as expected
+ *  - No responder conflicts with modals or bottom sheets
+ *
+ * Usage:
+ *   <TouchTracker>
+ *     <App />
+ *   </TouchTracker>
+ */
 const TouchTracker = ({ children, screenName, enabled = true, }) => {
-    const handleTouchCapture = react_1.default.useCallback((event) => {
-        if (!enabled) {
-            return false;
-        }
+    const handleTouch = react_1.default.useCallback((event) => {
+        if (!enabled)
+            return;
         try {
             const analytics = client_1.AppAnalytics.getInstance();
             const { pageX, pageY } = event.nativeEvent;
@@ -20,10 +35,8 @@ const TouchTracker = ({ children, screenName, enabled = true, }) => {
         catch {
             // AppAnalytics not initialized, silently ignore
         }
-        // Return false so touches pass through to children
-        return false;
     }, [enabled, screenName]);
-    return (<react_native_1.View style={{ flex: 1 }} onStartShouldSetResponderCapture={handleTouchCapture}>
+    return (<react_native_1.View style={{ flex: 1 }} onTouchStart={handleTouch} pointerEvents="box-none">
       {children}
     </react_native_1.View>);
 };

package/package.json

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, GestureResponderEvent } from 'react-native';
+import { View, type GestureResponderEvent } from 'react-native';
 import { AppAnalytics } from '../core/client';
 
 interface TouchTrackerProps {
@@ -8,16 +8,30 @@ interface TouchTrackerProps {
   enabled?: boolean;
 }
 
+/**
+ * Transparent wrapper that captures touch coordinates for heatmaps
+ * WITHOUT interfering with the app's gesture/button handling.
+ *
+ * Uses `onTouchStart` (a passive event) instead of the Gesture
+ * Responder System (`onStartShouldSetResponderCapture`). This means:
+ *  - Buttons, TouchableOpacity, Pressable all work normally
+ *  - Navigation gestures (swipe back) are unaffected
+ *  - ScrollViews scroll as expected
+ *  - No responder conflicts with modals or bottom sheets
+ *
+ * Usage:
+ *   <TouchTracker>
+ *     <App />
+ *   </TouchTracker>
+ */
 export const TouchTracker: React.FC<TouchTrackerProps> = ({
   children,
   screenName,
   enabled = true,
 }) => {
-  const handleTouchCapture = React.useCallback(
-    (event: GestureResponderEvent): boolean => {
-      if (!enabled) {
-        return false;
-      }
+  const handleTouch = React.useCallback(
+    (event: GestureResponderEvent) => {
+      if (!enabled) return;
 
       try {
         const analytics = AppAnalytics.getInstance();
@@ -26,9 +40,6 @@ export const TouchTracker: React.FC<TouchTrackerProps> = ({
       } catch {
         // AppAnalytics not initialized, silently ignore
       }
-
-      // Return false so touches pass through to children
-      return false;
     },
     [enabled, screenName],
   );
@@ -36,7 +47,8 @@ export const TouchTracker: React.FC<TouchTrackerProps> = ({
   return (
     <View
       style={{ flex: 1 }}
-      onStartShouldSetResponderCapture={handleTouchCapture}
+      onTouchStart={handleTouch}
+      pointerEvents="box-none"
     >
       {children}
     </View>