react-native-inapp-inspector 1.1.28 → 1.1.31

package/dist/esm/helpers/index.js

@@ -1,4 +1,6 @@
-import { Clipboard, Platform, ToastAndroid, Alert, NativeModules, Linking, TurboModuleRegistry, } from 'react-native';
+import { Platform, ToastAndroid, Alert, NativeModules, Linking, } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { showToast } from './toast';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 // Constants
@@ -23,6 +25,19 @@ export const formatDateTime = (timestamp) => {
     const seconds = pad(date.getSeconds());
     return `${day}/${month}/${year}  ${hours}:${minutes}:${seconds}`;
 };
+export const formatTimestamp = (timestamp) => {
+    try {
+        const date = new Date(timestamp);
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        const ms = date.getMilliseconds().toString().padStart(3, '0');
+        return `${hours}:${minutes}:${seconds}.${ms}`;
+    }
+    catch {
+        return '—';
+    }
+};
 export const getStatusColor = (status) => {
     if (!status || status === 0)
         return AppColors.errorColor;
@@ -52,104 +67,43 @@ export const getSize = (data) => {
         return '—';
     }
 };
-// Safely detect and load clipboard natively without static require() calls that Metro fails on
-const getClipboardModule = () => {
-    // 1. Check our built-in native module (NetworkInspectorModule)
-    try {
-        const tmReg = TurboModuleRegistry || globalThis.__turboModuleProxy;
-        const inspectorMod = NativeModules?.NetworkInspectorModule ||
-            (tmReg?.get ? tmReg.get('NetworkInspectorModule') : null);
-        if (inspectorMod && typeof inspectorMod.copyToClipboard === 'function') {
-            return {
-                setString: (str) => inspectorMod.copyToClipboard(str),
-                setStringAsync: (str) => inspectorMod.copyToClipboard(str),
-            };
-        }
+export const copyToClipboard = (value, label) => {
+    const resolved = typeof value === 'function' ? value() : value;
+    let textToCopy = '';
+    if (typeof resolved === 'string') {
+        textToCopy = resolved;
     }
-    catch { }
-    // 2. Check TurboModuleRegistry (TurboModules / New Architecture)
-    try {
-        const tmReg = TurboModuleRegistry || globalThis.__turboModuleProxy;
-        if (tmReg?.get) {
-            const tm = tmReg.get('RNCClipboard') ||
-                tmReg.get('NativeClipboard') ||
-                tmReg.get('ExpoClipboard');
-            if (tm &&
-                (typeof tm.setString === 'function' ||
-                    typeof tm.setStringAsync === 'function')) {
-                return tm;
-            }
+    else {
+        try {
+            textToCopy = JSON.stringify(resolved, null, 2);
+        }
+        catch {
+            textToCopy = String(resolved);
         }
     }
-    catch { }
-    // 3. Check legacy NativeModules table (Bridge / Old Architecture)
+    // Use @react-native-clipboard/clipboard npm package
     try {
-        if (NativeModules?.RNCClipboard &&
-            typeof NativeModules.RNCClipboard.setString === 'function') {
-            return NativeModules.RNCClipboard;
+        if (typeof Clipboard?.setString === 'function') {
+            Clipboard.setString(textToCopy);
         }
-        if (NativeModules?.ExpoClipboard &&
-            typeof NativeModules.ExpoClipboard.setStringAsync === 'function') {
-            return NativeModules.ExpoClipboard;
-        }
-        if (NativeModules?.Clipboard &&
-            typeof NativeModules.Clipboard.setString === 'function') {
-            return NativeModules.Clipboard;
+        else if (typeof Clipboard?.default?.setString === 'function') {
+            Clipboard.default.setString(textToCopy);
         }
     }
-    catch { }
-    // 4. Check legacy React Native core Clipboard
-    try {
-        if (Clipboard && typeof Clipboard.setString === 'function') {
-            return Clipboard;
+    catch (err) {
+        if (__DEV__) {
+            console.warn('[NetworkInspector] Clipboard.setString failed:', err);
         }
     }
-    catch { }
-    return null;
-};
-export const copyToClipboard = (value, label) => {
-    const resolved = typeof value === 'function' ? value() : value;
-    const text = typeof resolved === 'string' ? resolved : JSON.stringify(resolved, null, 2);
-    const textToCopy = text ?? '';
-    let copied = false;
+    // Trigger floating in-app bottom toast notification
     try {
-        const cb = getClipboardModule();
-        if (cb) {
-            if (typeof cb.setStringAsync === 'function') {
-                cb.setStringAsync(textToCopy);
-                copied = true;
-            }
-            else if (typeof cb.setString === 'function') {
-                cb.setString(textToCopy);
-                copied = true;
-            }
-        }
+        showToast(label ? `${label} copied to clipboard` : 'Copied to clipboard');
     }
     catch { }
-    // Built-in native module direct invocation
-    if (!copied) {
-        try {
-            const inspectorMod = NativeModules?.NetworkInspectorModule;
-            if (inspectorMod && typeof inspectorMod.copyToClipboard === 'function') {
-                inspectorMod.copyToClipboard(textToCopy);
-                copied = true;
-            }
-        }
-        catch { }
-    }
-    if (!copied) {
-        try {
-            if (typeof navigator !== 'undefined' && navigator?.clipboard?.writeText) {
-                navigator.clipboard.writeText(textToCopy);
-                copied = true;
-            }
-        }
-        catch { }
-    }
-    // Visual toast feedback on Android if ToastAndroid exists
+    // Native Android Toast fallback
     try {
         if (Platform.OS === 'android' && ToastAndroid?.show) {
-            ToastAndroid.show(`${label} copied`, ToastAndroid.SHORT);
+            ToastAndroid.show(label ? `${label} copied to clipboard` : 'Copied to clipboard', ToastAndroid.SHORT);
         }
     }
     catch { }
@@ -535,11 +489,16 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
         (functionName === 'next' && isNative);
     const isDependency = cleanPath.includes('node_modules') ||
         cleanPath.includes('react-native/Libraries') ||
-        (cleanPath.includes('react-native-inapp-inspector') && !cleanPath.includes('/example/'));
+        (cleanPath.includes('react-native-inapp-inspector') &&
+            !cleanPath.includes('/example/'));
     const isUserCode = !isNative &&
         !isInternalBytecode &&
         !isDependency &&
-        (fileExt === 'tsx' || fileExt === 'jsx' || fileExt === 'ts' || fileExt === 'js' || !fileName.includes('.bundle'));
+        (fileExt === 'tsx' ||
+            fileExt === 'jsx' ||
+            fileExt === 'ts' ||
+            fileExt === 'js' ||
+            !fileName.includes('.bundle'));
     const frameType = isUserCode
         ? 'app'
         : isDependency
@@ -547,7 +506,10 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
             : isNative
                 ? 'native'
                 : 'runtime';
-    const isRuntimeNoise = isInternalBytecode || isNative || functionName === 'asyncGeneratorStep' || functionName === '_next';
+    const isRuntimeNoise = isInternalBytecode ||
+        isNative ||
+        functionName === 'asyncGeneratorStep' ||
+        functionName === '_next';
     // Format clean relative project path
     let relativePath = cleanPath;
     if (relativePath.includes('/example/')) {
@@ -567,6 +529,7 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
         functionName,
         fileName,
         fullPath: relativePath,
+        rawFilePath: fullPath,
         fileExt,
         frameType,
         isUserCode,
@@ -577,6 +540,46 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
         copyableLocation,
     };
 };
+/** Opens a file and line number directly in VS Code / system editor */
+export const openInVSCode = (filePath, lineNumber, columnNumber) => {
+    const numLine = lineNumber ? Number(lineNumber) : 1;
+    const numCol = columnNumber ? Number(columnNumber) : 1;
+    const line = lineNumber ? `:${lineNumber}` : '';
+    const col = columnNumber ? `:${columnNumber}` : '';
+    const cleanPath = filePath.replace(/^file:\/\//, '');
+    // 1. Notify Metro dev server on host to launch editor directly on local system
+    const metroHosts = [
+        'http://localhost:8081',
+        'http://127.0.0.1:8081',
+        'http://10.0.2.2:8081',
+    ];
+    metroHosts.forEach(host => {
+        try {
+            fetch(`${host}/open-stack-frame`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file: cleanPath,
+                    lineNumber: numLine,
+                    column: numCol,
+                }),
+            }).catch(() => { });
+        }
+        catch { }
+    });
+    // 2. Also invoke native URL scheme handlers
+    const vscodeUrl = `vscode://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    const cursorUrl = `cursor://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    const vscodeInsidersUrl = `vscode-insiders://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    Linking.openURL(vscodeUrl).catch(() => {
+        Linking.openURL(cursorUrl).catch(() => {
+            Linking.openURL(vscodeInsidersUrl).catch(() => {
+                // Fallback: Copy to clipboard so user can jump immediately
+                copyToClipboard(`${cleanPath}${line}${col}`, 'Location');
+            });
+        });
+    });
+};
 // ─── Analytics Helpers ────────────────────────────────────────────────────────
 export const ANALYTICS_EVENT_PALETTE = [
     AppColors.googleBlue,
@@ -631,7 +634,11 @@ export const getCategoryColors = (category) => {
 export const getRuntimeDiagnostics = () => {
     const isHermes = typeof global.HermesInternal !== 'undefined';
     const isV8 = typeof global._v8runtime !== 'undefined';
-    const engineType = isHermes ? 'hermes' : isV8 ? 'v8' : 'jsc';
+    const engineType = isHermes
+        ? 'hermes'
+        : isV8
+            ? 'v8'
+            : 'jsc';
     const isFabric = typeof global.nativeFabricUIManager !== 'undefined' ||
         Boolean(global.__turboModuleProxy);
     const archType = isFabric ? 'fabric' : 'paper';
@@ -641,11 +648,14 @@ export const getRuntimeDiagnostics = () => {
         const hermesStats = global.HermesInternal?.getInstrumentedStats?.();
         if (hermesStats?.js_heap_size) {
             usedHeapMb = Number((hermesStats.js_heap_size / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) / (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) /
+                (1024 * 1024)).toFixed(1));
         }
         else if (global.performance?.memory?.usedJSHeapSize) {
-            usedHeapMb = Number((global.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number((global.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1));
+            usedHeapMb = Number((global.performance.memory.usedJSHeapSize /
+                (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number((global.performance.memory.totalJSHeapSize /
+                (1024 * 1024)).toFixed(1));
         }
     }
     catch { }

package/dist/esm/helpers/toast.d.ts

@@ -0,0 +1,4 @@
+type ToastListener = (message: string) => void;
+export declare const showToast: (message: string) => void;
+export declare const subscribeToast: (listener: ToastListener) => () => void;
+export {};

package/dist/esm/helpers/toast.js

@@ -0,0 +1,15 @@
+const listeners = new Set();
+export const showToast = (message) => {
+    listeners.forEach(fn => {
+        try {
+            fn(message);
+        }
+        catch { }
+    });
+};
+export const subscribeToast = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};

package/dist/esm/i18n/locales/en.json

@@ -15,7 +15,10 @@
         "expandAll": "Expand All",
         "viewOnNpm": "View on NPM",
         "later": "Later",
-        "source": "SOURCE"
+        "source": "SOURCE",
+        "open": "Open",
+        "openInBrowser": "Open in Browser",
+        "openInBrowserPrompt": "Are you sure you want to open this URL in your external browser?"
     },
     "header": {
         "updateAvailableTitle": "Update Available",
@@ -279,7 +282,19 @@
         "timeNow": "NOW",
         "selectedBucket": "Bucket: {{time}} ({{count}} events)",
         "totalRevenue": "Revenue",
-        "activeDistribution": "Category Split"
+        "activeDistribution": "Category Split",
+        "allCategory": "All",
+        "screensCategory": "Screens",
+        "overviewTab": "Overview",
+        "jsonTreeTab": "JSON Tree",
+        "rawPayloadTab": "Raw Payload",
+        "sessionContext": "Session Context",
+        "userPropertiesSnapshot": "User Properties Snapshot",
+        "parameterKeys": "Parameters ({{count}})",
+        "searchParameters": "Search parameters...",
+        "noParamsFound": "No parameters match your search",
+        "sourceFirebase": "FIREBASE GA4",
+        "sourceCustom": "CUSTOM / MANUAL"
     },
     "redux": {
         "title": "Redux",
@@ -305,7 +320,38 @@
         "connectionStatus": "Connected",
         "connectionStatusNone": "Not connected",
         "autoRefresh": "Auto-refresh",
-        "paused": "Paused"
+        "paused": "Paused",
+        "liveState": "Live State",
+        "timeline": "Timeline",
+        "persisted": "Persisted",
+        "storage": "Storage",
+        "metadata": "Metadata",
+        "inMemory": "In-Memory",
+        "slice": "SLICE",
+        "rootKeys": "Root Keys",
+        "size": "Size",
+        "actions": "actions",
+        "keys": "Keys",
+        "last": "Last",
+        "live": "Live",
+        "loading": "Loading",
+        "error": "Error",
+        "empty": "Empty",
+        "payload": "Payload",
+        "actionPayload": "Action Payload:",
+        "stateChangesDiff": "State Changes (Diff):",
+        "tapToInspectAction": "Tap to inspect action payload & diff changes",
+        "noDispatchedActions": "No dispatched actions recorded for this slice yet.",
+        "sliceJson": "Slice JSON",
+        "originSaga": "SAGA",
+        "originThunk": "THUNK",
+        "originUi": "UI",
+        "originDirect": "DIRECT",
+        "originListener": "LISTENER",
+        "triggeredFrom": "Triggered From:",
+        "openInEditor": "Open in Editor",
+        "callStack": "Call Stack Trace",
+        "sliceOrigin": "Slice / Origin"
     },
     "performance": {
         "title": "Performance",

package/dist/esm/styles/AppColors.d.ts

@@ -124,6 +124,9 @@ declare const LightColors: {
     emerald700: string;
     pink100: string;
     sky100: string;
+    teal100: string;
+    teal700: string;
+    purple700: string;
     indigo50: string;
     gray100: string;
     gray200: string;
@@ -279,6 +282,9 @@ export declare const getThemeColors: (isDark: boolean) => {
     emerald700: string;
     pink100: string;
     sky100: string;
+    teal100: string;
+    teal700: string;
+    purple700: string;
     indigo50: string;
     gray100: string;
     gray200: string;

package/dist/esm/styles/AppColors.js

@@ -130,6 +130,9 @@ const LightColors = {
     emerald700: '#047857',
     pink100: '#FCE7F3',
     sky100: '#E0F2FE',
+    teal100: '#CCFBF1',
+    teal700: '#0F766E',
+    purple700: '#6D28D9',
     indigo50: '#EEF2FF',
     gray100: '#F3F4F6',
     gray200: '#E5E7EB',
@@ -300,6 +303,9 @@ const DarkColors = {
     emerald700: '#34D399',
     pink100: '#341626',
     sky100: '#0C2744',
+    teal100: '#134E4A',
+    teal700: '#2DD4BF',
+    purple700: '#8B5CF6',
     indigo50: '#1E1B3A',
     gray100: '#2A2438',
     gray200: '#362C4E',

package/dist/esm/styles/index.d.ts

@@ -20,17 +20,22 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     };
     headerLeft: {
         flex: number;
+        minWidth: number;
         alignItems: string;
     };
     headerCenter: {
         flex: number;
+        minWidth: number;
         alignItems: string;
+        justifyContent: string;
+        paddingHorizontal: number;
     };
     headerRight: {
-        flex: number;
+        flexShrink: number;
         flexDirection: string;
         alignItems: string;
         justifyContent: string;
+        gap: number;
     };
     headerTitle: {
         fontFamily: string;
@@ -176,6 +181,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         justifyContent: string;
         borderWidth: number;
         borderColor: string;
+        overflow: string;
     };
     fabWrapper: {
         position: string;
@@ -250,6 +256,13 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         gap: number;
     };
     toolbarBtn: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
         width: number;
         height: number;
         borderRadius: number;
@@ -258,14 +271,16 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         backgroundColor: string;
         borderWidth: number;
         borderColor: string;
-        shadowColor: string;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
+    } | {
         elevation: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
     };
     toolbarBtnActive: {
         borderColor: string;
@@ -412,6 +427,12 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         borderWidth: number;
         borderColor: string;
     };
+    domainHeaderCardExpanded: {
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        borderBottomWidth: number;
+        marginBottom: number;
+    };
     domainHeaderTopRow: {
         flexDirection: string;
         alignItems: string;
@@ -421,6 +442,8 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         flexDirection: string;
         alignItems: string;
         flex: number;
+        minWidth: number;
+        marginRight: number;
         gap: number;
     };
     domainIconWrap: {
@@ -452,21 +475,42 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         fontFamily: string;
         fontSize: number;
     };
+    domainProgressSection: {
+        marginTop: number;
+        gap: number;
+        width: string;
+    };
     domainProgressTrack: {
         flexDirection: string;
         height: number;
         borderRadius: number;
         overflow: string;
         backgroundColor: string;
-        marginTop: number;
         width: string;
     };
     domainProgressSegment: {
         height: string;
     };
+    domainProgressLabelsRow: {
+        flexDirection: string;
+        alignItems: string;
+        justifyContent: string;
+        paddingHorizontal: number;
+    };
+    domainProgressRateText: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+    };
+    domainProgressSummaryText: {
+        fontFamily: string;
+        fontSize: number;
+        color: string;
+    };
     domainStatsGroup: {
         flexDirection: string;
         alignItems: string;
+        flexShrink: number;
         gap: number;
     };
     domainStatPill: {
@@ -487,8 +531,20 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
     treeNodeRow: {
         flexDirection: string;
         alignItems: string;
-        paddingLeft: number;
+        marginHorizontal: number;
         paddingRight: number;
+        paddingLeft: number;
+        backgroundColor: string;
+        borderLeftWidth: number;
+        borderRightWidth: number;
+        borderColor: string;
+    };
+    treeNodeRowLast: {
+        borderBottomWidth: number;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        marginBottom: number;
+        paddingBottom: number;
     };
     treeLines: {
         width: number;
@@ -580,11 +636,6 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         fontSize: number;
     };
     methodBadge: {
-        paddingHorizontal: number;
-        paddingVertical: number;
-        borderRadius: number;
-        alignItems: string;
-        justifyContent: string;
         shadowColor: string;
         shadowOffset: {
             width: number;
@@ -592,12 +643,28 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
         };
         shadowOpacity: number;
         shadowRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+        borderWidth: number;
+        borderColor: string;
+    } | {
         elevation: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        alignItems: string;
+        justifyContent: string;
+        borderWidth: number;
+        borderColor: string;
     };
     methodBadgeText: {
         fontFamily: string;
         fontSize: number;
         letterSpacing: number;
+        color: string;
     };
     cardHostText: {
         fontFamily: string;