@scalebun-release/react-native 2.5.0

package/src/features/replay/integrations/alert/alertInstrumentation.ts

@@ -0,0 +1,277 @@
+/**
+ * Session Replay SDK — Native Alert Instrumentation
+ *
+ * Why this exists
+ * ---------------
+ * React Native `Alert.alert` / `Alert.prompt` render a NATIVE dialog:
+ *   - iOS   → a `UIAlertController` in a separate `.alert`-level `UIWindow`.
+ *   - Android → an `AlertDialog` in its own dialog `Window`.
+ *
+ * Neither surface is part of the React view tree, so:
+ *   1. The JS touch responder in `ReplayRoot`/`ScaleBunDebugRoot` never sees the
+ *      OK/Cancel taps (the responder only covers the app's React root view).
+ *   2. The native touch trackers attach to the app/activity window, not the
+ *      alert/dialog window, so they miss those taps too.
+ *
+ * The frame-level visibility of the alert is solved natively (Android already
+ * composites extra windows; iOS now composites all windows in
+ * ScreenshotCaptureManager). This module solves the INTERACTION + LIFECYCLE
+ * half in one cross-platform place by wrapping the `Alert` API:
+ *   - records `alert_shown` when an alert is presented,
+ *   - records `alert_action` (with the pressed button label) at press time,
+ *   - records `alert_dismissed` after the dialog closes,
+ *   - triggers frames so the timeline shows the screen with the alert visible
+ *     and the screen right after it is dismissed.
+ *
+ * Everything routes through the unified `SessionManager` (the same pipeline all
+ * other gestures use). `SessionManager.onUserAction` / `captureManualFrame`
+ * already no-op when recording is OFF, so this is inert outside an active
+ * session. Install is reversible and idempotent.
+ *
+ * OS limitation (documented): exact touch COORDINATES inside the native dialog
+ * are not available to JS or to the app-window touch tracker. We record the
+ * semantic button identity (text + style) instead, which is more accurate for
+ * the timeline than a guessed coordinate would be. Alerts presented purely from
+ * native code (not via RN `Alert`) are out of scope.
+ */
+
+import { Alert, Platform } from 'react-native';
+import { logger } from '../../core/logger/logger';
+
+/**
+ * Delay before capturing the "settled" frame for a present/dismiss transition.
+ *
+ * This is NOT arbitrary timing magic: a native alert is presented and dismissed
+ * with an enter/exit animation (UIAlertController ~0.4s, Android Dialog ~0.3s).
+ * Capturing immediately would snapshot a mid-animation / pre-present frame. We
+ * wait one animation's worth so the captured frame reflects the settled UI —
+ * the alert fully on screen, or the screen fully restored after dismissal.
+ */
+const ALERT_SETTLE_MS = 350;
+
+type AlertButtonStyle = 'default' | 'cancel' | 'destructive';
+
+interface AlertButtonLike {
+    text?: string;
+    onPress?: (value?: string) => void;
+    style?: AlertButtonStyle;
+    isPreferred?: boolean;
+}
+
+type AlertFn = typeof Alert.alert;
+type PromptFn = typeof Alert.prompt;
+
+export interface AlertInstrumentationOptions {
+    /** Emit verbose `[AlertCapture]` debug logs. Default: false. */
+    debug?: boolean;
+}
+
+let installed = false;
+let debugLogs = false;
+let originalAlert: AlertFn | null = null;
+let originalPrompt: PromptFn | null = null;
+
+/**
+ * Lazily resolve the unified SessionManager. Lazy require avoids pulling native
+ * module dependencies in at module-load time (matches ScaleBunDebugRoot's pattern)
+ * and keeps this integration decoupled from the session feature.
+ */
+function getSessionManager(): any | null {
+    try {
+        const { SessionManager } = require('../../../session/SessionManager');
+        return SessionManager.getExistingInstance?.() ?? null;
+    } catch {
+        return null;
+    }
+}
+
+function record(subtype: string, payload: Record<string, unknown>): void {
+    const enriched = {
+        ...payload,
+        platform: Platform.OS,
+        timestamp: Date.now(),
+        source: 'native-alert',
+    };
+    const sm = getSessionManager();
+    try {
+        // onUserAction records the event AND triggers a composited frame; it is a
+        // no-op when no session is recording.
+        sm?.onUserAction?.(subtype, enriched);
+    } catch {
+        /* no-throw: instrumentation must never break the host app */
+    }
+    if (debugLogs) {
+        try { logger.debug?.(`[AlertCapture] ${subtype} ${safeJson(enriched)}`); } catch { /* no-throw */ }
+    }
+}
+
+/** Capture a frame once the present/dismiss animation has settled. */
+function captureSettledFrame(): void {
+    setTimeout(() => {
+        const sm = getSessionManager();
+        try { sm?.captureManualFrame?.(); } catch { /* no-throw */ }
+    }, ALERT_SETTLE_MS);
+}
+
+/** Record an event once the dismiss animation has settled. */
+function recordSettled(subtype: string, payload: Record<string, unknown>): void {
+    setTimeout(() => record(subtype, payload), ALERT_SETTLE_MS);
+}
+
+function buttonLabels(buttons?: AlertButtonLike[]): string[] {
+    return (buttons ?? [])
+        .map((b) => b?.text ?? '')
+        .filter((t) => t.length > 0);
+}
+
+interface AlertContext {
+    title?: string;
+    message?: string;
+}
+
+/**
+ * Wrap a single button's `onPress`. Records `alert_button_press` with the full
+ * semantic identity (text, index, style, alert title/message, platform), runs
+ * the app's original handler unchanged, then records `alert_dismissed` once the
+ * native dialog has closed. The original callback is always invoked exactly once
+ * and its exceptions are NOT swallowed.
+ */
+function wrapOnPress(
+    ctx: AlertContext,
+    text: string,
+    index: number,
+    style: AlertButtonStyle | undefined,
+    original?: (value?: string) => void,
+): (value?: string) => void {
+    return (value?: string) => {
+        record('alert_button_press', {
+            buttonText: text,
+            buttonIndex: index,
+            buttonStyle: style,
+            alertTitle: ctx.title,
+            alertMessage: ctx.message,
+            value,
+        });
+        try {
+            original?.(value);
+        } finally {
+            // The button handler dismisses the dialog; capture the settled
+            // post-dismiss screen and mark the dismissal.
+            recordSettled('alert_dismissed', {
+                alertTitle: ctx.title,
+                buttonText: text,
+                buttonIndex: index,
+                reason: 'button',
+            });
+        }
+    };
+}
+
+function wrapButtons(
+    ctx: AlertContext,
+    buttons?: AlertButtonLike[],
+): AlertButtonLike[] {
+    // RN normalizes a missing button list to a single default "OK". Synthesize
+    // the same so the dismiss is still captured. Button ORDER is preserved.
+    if (!buttons || buttons.length === 0) {
+        return [{ text: 'OK', onPress: wrapOnPress(ctx, 'OK', 0, 'default', undefined) }];
+    }
+    return buttons.map((b, i) => ({
+        ...b,
+        onPress: wrapOnPress(ctx, b?.text ?? '', i, b?.style, b?.onPress),
+    }));
+}
+
+/**
+ * Wrap `options.onDismiss` (Android cancelable alerts dismissed via back button
+ * or outside tap — no button press fires). Records `alert_dismissed` and runs
+ * the app's original handler.
+ */
+function wrapOptions(ctx: AlertContext, options: any): any {
+    if (!options || typeof options !== 'object') return options;
+    const originalOnDismiss = options.onDismiss;
+    if (typeof originalOnDismiss !== 'function') return options;
+    return {
+        ...options,
+        onDismiss: () => {
+            recordSettled('alert_dismissed', { alertTitle: ctx.title, reason: 'cancelable' });
+            originalOnDismiss();
+        },
+    };
+}
+
+function safeJson(value: unknown): string {
+    try { return JSON.stringify(value); } catch { return '[unserializable]'; }
+}
+
+/**
+ * Patch `Alert.alert` / `Alert.prompt`. Idempotent and reversible.
+ */
+export function installAlertInstrumentation(opts: AlertInstrumentationOptions = {}): void {
+    if (installed) return;
+    debugLogs = opts.debug === true;
+
+    // Keep the exact original reference (no bind) so uninstall restores it
+    // identically. RN's Alert.alert/prompt are static and do not depend on `this`.
+    originalAlert = Alert.alert;
+    Alert.alert = ((
+        title?: string,
+        message?: string,
+        buttons?: AlertButtonLike[],
+        options?: unknown,
+    ) => {
+        const ctx: AlertContext = { title, message };
+        try {
+            record('alert_shown', {
+                alertTitle: title,
+                alertMessage: message,
+                buttons: buttonLabels(buttons),
+            });
+            captureSettledFrame();
+        } catch { /* no-throw */ }
+        const wrapped = wrapButtons(ctx, buttons);
+        return (originalAlert as any)(title, message, wrapped, wrapOptions(ctx, options));
+    }) as AlertFn;
+
+    if (typeof Alert.prompt === 'function') {
+        originalPrompt = Alert.prompt;
+        Alert.prompt = ((
+            title?: string,
+            message?: string,
+            callbackOrButtons?: unknown,
+            ...rest: unknown[]
+        ) => {
+            const ctx: AlertContext = { title, message };
+            try {
+                record('alert_shown', { alertTitle: title, alertMessage: message, prompt: true });
+                captureSettledFrame();
+            } catch { /* no-throw */ }
+            // prompt accepts either a single callback or an array of buttons.
+            // Only the array form carries per-button onPress handlers to wrap;
+            // the callback form is passed through untouched.
+            const handled = Array.isArray(callbackOrButtons)
+                ? wrapButtons(ctx, callbackOrButtons as AlertButtonLike[])
+                : callbackOrButtons;
+            return (originalPrompt as any)(title, message, handled, ...rest);
+        }) as PromptFn;
+    }
+
+    installed = true;
+    if (debugLogs) {
+        try { logger.debug?.('[AlertCapture] installed'); } catch { /* no-throw */ }
+    }
+}
+
+/** Restore the original `Alert` API. Safe to call when not installed. */
+export function uninstallAlertInstrumentation(): void {
+    if (!installed) return;
+    if (originalAlert) Alert.alert = originalAlert;
+    if (originalPrompt) Alert.prompt = originalPrompt;
+    originalAlert = null;
+    originalPrompt = null;
+    installed = false;
+}
+
+export function isAlertInstrumentationInstalled(): boolean {
+    return installed;
+}

package/src/features/replay/integrations/logs/consoleIntegration.ts

@@ -0,0 +1,136 @@
+/**
+ * Session Replay SDK — Console Log Integration
+ *
+ * Patches console.log/warn/error to capture log breadcrumbs.
+ * Can be enabled/disabled at runtime.
+ */
+
+import { breadcrumbCollector } from '../../replay/breadcrumbs/breadcrumbCollector';
+import { logger } from '../../core/logger/logger';
+import { SessionManager } from '../../../session/SessionManager';
+
+let _installed = false;
+let _enabled = true;
+
+/**
+ * Map a patched console method to the neutral log `level` carried on the
+ * platform-agnostic logs lane. console.info collapses to 'info'; everything else maps
+ * 1:1. Kept here (the JS producer) so the lane/backend never learn console method names.
+ */
+const CONSOLE_LEVEL: Record<string, string> = {
+    log: 'log',
+    info: 'info',
+    warn: 'warn',
+    error: 'error',
+    debug: 'debug',
+};
+
+/**
+ * Prefixes that identify a log line as SDK-internal. These still print to the real
+ * console (developers may want to see them in dev), but they must NEVER be routed
+ * into the customer-facing logs lane or replay breadcrumbs — otherwise SDK self-noise
+ * (e.g. one [TapDiag] per tap, or internal [ScaleBun:*]/[perf.*] diagnostics) buries
+ * the customer's own logs in Diagnose → Logs. `[ReplaySdk]` is handled separately and
+ * suppressed entirely (it also trips the RN/Expo error overlay).
+ */
+const SDK_INTERNAL_LOG_PREFIXES = ['[TapDiag]', '[TapAccuracy]', '[ScaleBun', '[perf.'];
+
+/** True when a console line is an SDK-internal diagnostic that must not reach customer surfaces. */
+function isSdkInternalLog(firstArg: unknown): boolean {
+    return typeof firstArg === 'string'
+        && SDK_INTERNAL_LOG_PREFIXES.some(prefix => firstArg.startsWith(prefix));
+}
+
+/**
+ * First producer into the logs lane: forward this console call to the backend logs
+ * queue (source='console', platform='js'). Additive to the existing breadcrumb capture
+ * — never throws, no-ops cleanly when no SaaS backend transport is attached. A future
+ * native producer feeds the SAME queue with its own source/platform.
+ */
+function forwardToLogsLane(method: string, message: string): void {
+    try {
+        const transport = SessionManager.getExistingInstance()?.getBackendTransport();
+        if (!transport) return;
+        transport.queueLog({
+            level: CONSOLE_LEVEL[method] ?? method,
+            message,
+            source: 'console',
+            platform: 'js',
+            timestamp: new Date().toISOString(),
+        });
+    } catch {
+        // Never crash in console interceptor.
+    }
+}
+
+const _originals = {
+    log: console.log,
+    info: console.info,
+    warn: console.warn,
+    error: console.error,
+    debug: console.debug,
+};
+
+/**
+ * Install console interceptors.
+ * Safe to call multiple times — only installs once.
+ */
+export function installConsoleIntegration(): void {
+    if (_installed) return;
+    _installed = true;
+
+    const methods: Array<keyof typeof _originals> = ['log', 'info', 'warn', 'error', 'debug'];
+
+    for (const method of methods) {
+        const original = _originals[method];
+        (console as any)[method] = (...args: any[]) => {
+            // Skip SDK-internal logs before calling original to prevent the
+            // Expo/RN error overlay from triggering on SDK-internal errors.
+            const firstArg = args[0];
+            if (typeof firstArg === 'string' && firstArg.startsWith('[ReplaySdk]')) return;
+
+            // Always call original for non-SDK logs
+            original.apply(console, args);
+
+            // Print SDK-internal diagnostics to the console (dev visibility) but never
+            // forward them to the customer-facing logs lane / breadcrumbs.
+            if (isSdkInternalLog(firstArg)) return;
+
+            if (_enabled) {
+                try {
+                    const message = args.map(a => {
+                        if (typeof a === 'string') return a;
+                        try { return JSON.stringify(a); }
+                        catch { return String(a); }
+                    }).join(' ');
+
+                    const truncated = message.slice(0, 1024);
+                    breadcrumbCollector.addConsoleBreadcrumb(method, truncated).catch(() => { });
+                    // Additive: same tap also feeds the platform-agnostic logs lane.
+                    forwardToLogsLane(method, truncated);
+                } catch {
+                    // Never crash in console interceptor
+                }
+            }
+        };
+    }
+}
+
+/**
+ * Remove console interceptors and restore originals.
+ */
+export function uninstallConsoleIntegration(): void {
+    if (!_installed) return;
+    _installed = false;
+
+    console.log = _originals.log;
+    console.info = _originals.info;
+    console.warn = _originals.warn;
+    console.error = _originals.error;
+    console.debug = _originals.debug;
+}
+
+/** Enable/disable console breadcrumb capture at runtime */
+export function setConsoleEnabled(enabled: boolean): void {
+    _enabled = enabled;
+}

package/src/features/replay/integrations/network/networkAdapter.ts

@@ -0,0 +1,73 @@
+/**
+ * Session Replay SDK — Network Adapter
+ *
+ * Provides network breadcrumb integration via adapter pattern.
+ * Does NOT monkey-patch XMLHttpRequest or fetch.
+ * Instead, provides a report function that users or other interceptors can call.
+ *
+ * Usage:
+ *   import { reportNetworkRequest } from '@scalebun/replay-sdk';
+ *
+ *   // After your network request completes:
+ *   reportNetworkRequest({
+ *       method: 'GET',
+ *       url: 'https://api.example.com/data',
+ *       statusCode: 200,
+ *       durationMs: 150,
+ *       requestSizeBytes: 0,
+ *       responseSizeBytes: 1024,
+ *       error: false,
+ *       startTimestamp: Date.now() - 150,
+ *   });
+ */
+
+import type { NetworkRequestSummary } from '../../public/types';
+import { breadcrumbCollector } from '../../replay/breadcrumbs/breadcrumbCollector';
+import { logger } from '../../core/logger/logger';
+
+let _enabled = true;
+let _urlFilter: ((url: string) => boolean) | null = null;
+
+/**
+ * Report a completed network request as a replay breadcrumb.
+ * Safe to call from anywhere — no-throw.
+ */
+export function reportNetworkRequest(request: NetworkRequestSummary): void {
+    if (!_enabled) return;
+
+    try {
+        // Apply URL filter
+        if (_urlFilter && !_urlFilter(request.url)) return;
+
+        // Sanitize URL (strip query params with sensitive data patterns)
+        const sanitized: NetworkRequestSummary = {
+            ...request,
+            url: sanitizeUrl(request.url),
+        };
+
+        breadcrumbCollector.addNetworkBreadcrumb(sanitized).catch(() => { });
+    } catch (err: any) {
+        __DEV__ && logger.debug(`Network breadcrumb failed: ${err?.message}`);
+    }
+}
+
+/** Enable/disable network breadcrumb collection */
+export function setNetworkEnabled(enabled: boolean): void {
+    _enabled = enabled;
+}
+
+/** Basic URL sanitization: mask tokens/keys in query params */
+function sanitizeUrl(url: string): string {
+    try {
+        const u = new URL(url);
+        const sensitiveKeys = ['token', 'key', 'apikey', 'api_key', 'secret', 'password', 'auth'];
+        for (const key of u.searchParams.keys()) {
+            if (sensitiveKeys.some(s => key.toLowerCase().includes(s))) {
+                u.searchParams.set(key, '***');
+            }
+        }
+        return u.toString();
+    } catch {
+        return url.slice(0, 2048);
+    }
+}

package/src/features/replay/integrations/react-navigation/navigationIntegration.ts

@@ -0,0 +1,89 @@
+/**
+ * Session Replay SDK — React Navigation Integration
+ *
+ * Listens to React Navigation route changes and reports them
+ * as screen views to the native replay module.
+ *
+ * Usage:
+ *   import { useReplayNavigation } from '@scalebun/replay-sdk';
+ *   const navigationRef = useNavigationContainerRef();
+ *   useReplayNavigation(navigationRef);
+ */
+
+import { useEffect, useRef } from 'react';
+import { bridgeAdapter } from '../../bridge/adapters/bridgeAdapter';
+import { sessionOrchestrator } from '../../replay/session/sessionOrchestrator';
+import { logger } from '../../core/logger/logger';
+import { fireAndForget } from '../../core/errors/safeCall';
+
+/** Extract the current route name from a React Navigation ref */
+function getActiveRouteName(state: any): string | undefined {
+    if (!state) return undefined;
+    const route = state.routes?.[state.index ?? 0];
+    if (!route) return undefined;
+    if (route.state) return getActiveRouteName(route.state);
+    return route.name;
+}
+
+/**
+ * React hook to integrate React Navigation with Session Replay.
+ *
+ * Automatically tracks screen changes and triggers frame captures.
+ *
+ * @param navigationRef - The navigation container ref from React Navigation
+ */
+export function useReplayNavigation(navigationRef: any): void {
+    const routeNameRef = useRef<string | undefined>(undefined);
+
+    useEffect(() => {
+        if (!navigationRef?.current) return;
+
+        const nav = navigationRef.current;
+
+        // Get initial route
+        const initialState = nav.getRootState?.();
+        routeNameRef.current = getActiveRouteName(initialState);
+        if (routeNameRef.current) {
+            fireAndForget('initial-screen', () =>
+                sessionOrchestrator.setCurrentScreen(routeNameRef.current!),
+            );
+        }
+
+        // Listen to state changes
+        const unsubscribe = nav.addListener?.('state', (event: any) => {
+            const previousRouteName = routeNameRef.current;
+            const currentRouteName = getActiveRouteName(event?.data?.state) ?? getActiveRouteName(nav.getRootState?.());
+
+            if (currentRouteName && currentRouteName !== previousRouteName) {
+                routeNameRef.current = currentRouteName;
+
+                fireAndForget('screen-change', async () => {
+                    await sessionOrchestrator.setCurrentScreen(currentRouteName);
+                    // Trigger capture on navigation change (all modes capture on nav)
+                    if (sessionOrchestrator.isRecording) {
+                        await bridgeAdapter.captureFrame('navigation');
+                    }
+                });
+
+                __DEV__ && logger.debug(`Screen: ${previousRouteName ?? '(none)'} → ${currentRouteName}`);
+            }
+        });
+
+        return () => {
+            unsubscribe?.();
+        };
+    }, [navigationRef]);
+}
+
+/**
+ * Manual screen tracking for apps not using React Navigation.
+ * Call this whenever the user navigates to a new screen.
+ */
+export function trackScreen(screenName: string): void {
+    fireAndForget('track-screen', async () => {
+        await sessionOrchestrator.setCurrentScreen(screenName);
+        if (sessionOrchestrator.isRecording) {
+            await bridgeAdapter.captureFrame('navigation');
+        }
+    });
+}

package/src/features/replay/integrations/touch/ReplayRoot.tsx

@@ -0,0 +1,114 @@
+/**
+ * Session Replay SDK — ReplayRoot Component
+ *
+ * Root wrapper component for touch/interaction tracking.
+ * Wrap your app root with this to enable automatic interaction detection.
+ *
+ * Usage:
+ *   import { ReplayRoot } from '@scalebun/replay-sdk';
+ *
+ *   function App() {
+ *     return (
+ *       <ReplayRoot>
+ *         <NavigationContainer>...</NavigationContainer>
+ *       </ReplayRoot>
+ *     );
+ *   }
+ */
+
+import React, { useRef, useCallback, type ReactNode } from 'react';
+import { View, type GestureResponderEvent } from 'react-native';
+import { bridgeAdapter } from '../../bridge/adapters/bridgeAdapter';
+import { sessionOrchestrator } from '../../replay/session/sessionOrchestrator';
+import { logger } from '../../core/logger/logger';
+
+interface ReplayRootProps {
+    children: ReactNode;
+    /** Disable interaction tracking. Default: false */
+    disableInteractionTracking?: boolean;
+}
+
+interface TouchState {
+    x: number;
+    y: number;
+    timestamp: number;
+}
+
+const SCROLL_THRESHOLD = 20; // pixels
+const SWIPE_THRESHOLD = 80;
+const LONG_PRESS_THRESHOLD = 500; // ms
+const INTERACTION_DEBOUNCE_MS = 300;
+
+export function ReplayRoot({ children, disableInteractionTracking = false }: ReplayRootProps) {
+    const touchStartRef = useRef<TouchState | null>(null);
+    const lastInteractionRef = useRef<number>(0);
+
+    const handleTouchStart = useCallback((event: GestureResponderEvent) => {
+        if (disableInteractionTracking) return;
+        const touch = event.nativeEvent;
+        touchStartRef.current = {
+            x: touch.pageX,
+            y: touch.pageY,
+            timestamp: Date.now(),
+        };
+    }, [disableInteractionTracking]);
+
+    const handleTouchEnd = useCallback((event: GestureResponderEvent) => {
+        if (disableInteractionTracking || !touchStartRef.current) return;
+        if (!sessionOrchestrator.isRecording) return;
+
+        const now = Date.now();
+        // Debounce
+        if (now - lastInteractionRef.current < INTERACTION_DEBOUNCE_MS) return;
+        lastInteractionRef.current = now;
+
+        const touch = event.nativeEvent;
+        const start = touchStartRef.current;
+        touchStartRef.current = null;
+
+        const dx = touch.pageX - start.x;
+        const dy = touch.pageY - start.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const duration = now - start.timestamp;
+
+        let interactionType: string;
+        if (duration >= LONG_PRESS_THRESHOLD && distance < SCROLL_THRESHOLD) {
+            interactionType = 'long_press';
+        } else if (distance >= SWIPE_THRESHOLD) {
+            interactionType = Math.abs(dx) > Math.abs(dy) ? 'swipe' : 'scroll';
+        } else if (distance >= SCROLL_THRESHOLD) {
+            interactionType = 'scroll';
+        } else {
+            interactionType = 'tap';
+        }
+
+        // Fire and forget — never block the UI
+        bridgeAdapter.reportInteraction({
+            type: interactionType,
+            x: Math.round(touch.pageX),
+            y: Math.round(touch.pageY),
+            timestamp: now,
+            duration,
+            screenName: sessionOrchestrator.currentScreen,
+        }).catch(() => { });
+
+        // Also trigger a frame capture for interaction modes
+        bridgeAdapter.captureFrame('interaction').catch(() => { });
+
+        __DEV__ && logger.debug(`Interaction: ${interactionType} at (${Math.round(touch.pageX)}, ${Math.round(touch.pageY)})`);
+    }, [disableInteractionTracking]);
+
+    return (
+        <View
+            style={{ flex: 1 }}
+            onStartShouldSetResponder={() => true}
+            onStartShouldSetResponderCapture={() => false}
+            onMoveShouldSetResponder={() => false}
+            onResponderGrant={handleTouchStart}
+            onResponderRelease={handleTouchEnd}
+            collapsable={false}
+        >
+            {children}
+        </View>
+    );
+}