react-native-inapp-inspector 1.1.16 → 1.1.18

package/dist/esm/components/JsonViewer.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ScrollView, View, Text, StyleSheet } from 'react-native';
+import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { useTranslation } from 'react-i18next';
 // Components
 import TreeNode from './TreeNode';
@@ -10,10 +10,63 @@ import { PrettyIcon, RawIcon, TableIcon } from './NetworkIcons';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
+// ── Table Row Component with 3-Line Clamp & Show More/Less ───────────────────
+const JsonTableRow = React.memo(({ itemKey, val, search, }) => {
+    const [expanded, setExpanded] = useState(false);
+    const isObject = val !== null && typeof val === 'object';
+    let rawStr = '';
+    if (val === null) {
+        rawStr = 'null';
+    }
+    else if (val === undefined) {
+        rawStr = 'undefined';
+    }
+    else if (isObject) {
+        try {
+            rawStr = JSON.stringify(val, null, 2);
+        }
+        catch {
+            rawStr = String(val);
+        }
+    }
+    else {
+        rawStr = String(val);
+    }
+    const isMultiline = rawStr.includes('\n') || rawStr.length > 90;
+    return (<View style={localStyles.tableRow}>
+      <View style={{ flex: 2, paddingRight: 8 }}>
+        <HighlightText text={itemKey} search={search} style={localStyles.tableCellKey} highlightStyle={localStyles.highlight}/>
+        {isObject && (<Text style={localStyles.tableTypeBadge}>
+            {Array.isArray(val) ? `Array(${val.length})` : 'Object'}
+          </Text>)}
+      </View>
+
+      <View style={{ flex: 3 }}>
+        <HighlightText text={rawStr} search={search} style={[
+            localStyles.tableCellValue,
+            isObject && localStyles.tableCellRawCode,
+        ]} highlightStyle={localStyles.highlight} numberOfLines={expanded ? undefined : 3} selectable={true}/>
+        {isMultiline && (<TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={localStyles.showMoreBtn}>
+            <Text style={localStyles.showMoreText}>
+              {expanded ? 'Show less ▲' : 'Show more ▼'}
+            </Text>
+          </TouchableOpacity>)}
+      </View>
+    </View>);
+});
 // ── JsonViewer Component ─────────────────────────────────────────────────────
 const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
     const { t } = useTranslation();
-    const [mode, setMode] = useState(externalMode || 'pretty');
+    const [internalMode, setInternalMode] = useState('pretty');
+    const mode = externalMode ?? internalMode;
+    const setMode = (newMode) => {
+        if (onModeChange) {
+            onModeChange(newMode);
+        }
+        else {
+            setInternalMode(newMode);
+        }
+    };
     const rawText = React.useMemo(() => {
         if (typeof data === 'string') {
             return data;
@@ -27,12 +80,9 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
     }, [data]);
     useEffect(() => {
         if (externalMode) {
-            setMode(externalMode);
+            setInternalMode(externalMode);
         }
     }, [externalMode]);
-    useEffect(() => {
-        onModeChange?.(mode);
-    }, [mode, onModeChange]);
     const contentWrapperStyle = [
         localStyles.contentWrapper,
         { backgroundColor: AppColors.contentBg },
@@ -45,7 +95,9 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
     ];
     // Determine type and size details
     const isObject = typeof data === 'object' && data !== null;
-    const isEmpty = isObject && Object.keys(data).length === 0;
+    const isEmpty = data === null ||
+        data === undefined ||
+        (isObject && Object.keys(data).length === 0);
     // Render Table view (Key-Value flat table for root keys)
     const renderTableMode = () => {
         if (!isObject) {
@@ -65,28 +117,7 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
           <Text style={[localStyles.tableHeaderCell, { flex: 2 }]}>{t('network.jsonViewer.key')}</Text>
           <Text style={[localStyles.tableHeaderCell, { flex: 3 }]}>{t('network.jsonViewer.value')}</Text>
         </View>
-        {keys.map((key) => {
-                const val = data[key];
-                let displayVal = '';
-                if (val === null) {
-                    displayVal = 'null';
-                }
-                else if (val === undefined) {
-                    displayVal = 'undefined';
-                }
-                else if (typeof val === 'object') {
-                    displayVal = Array.isArray(val) ? `[Array(${val.length})]` : '{Object}';
-                }
-                else {
-                    displayVal = String(val);
-                }
-                return (<View key={key} style={localStyles.tableRow}>
-              <Text style={[localStyles.tableCellKey, { flex: 2 }]}>{key}</Text>
-              <Text style={[localStyles.tableCellValue, { flex: 3 }]} numberOfLines={2}>
-                {displayVal}
-              </Text>
-            </View>);
-            })}
+        {keys.map((key) => (<JsonTableRow key={key} itemKey={key} val={data[key]} search={search}/>))}
       </View>);
     };
     // Tree View Content
@@ -220,11 +251,36 @@ const localStyles = StyleSheet.create({
         fontSize: 12.5,
         color: AppColors.purple,
     },
+    tableTypeBadge: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 9.5,
+        color: AppColors.slate400,
+        marginTop: 2,
+    },
     tableCellValue: {
         fontFamily: AppFonts.interRegular,
-        fontSize: 12.5,
+        fontSize: 12,
         color: AppColors.primaryBlack,
-        lineHeight: 18,
+        lineHeight: 17,
+    },
+    tableCellRawCode: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors.slate700,
+        backgroundColor: `${AppColors.slate100}80`,
+        padding: 6,
+        borderRadius: 6,
+    },
+    showMoreBtn: {
+        alignSelf: 'flex-start',
+        marginTop: 4,
+        paddingVertical: 2,
+        paddingHorizontal: 4,
+    },
+    showMoreText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors.purple,
     },
     emptyTable: {
         padding: 24,
@@ -236,5 +292,10 @@ const localStyles = StyleSheet.create({
         fontSize: 12.5,
         color: AppColors.slate400,
     },
+    highlight: {
+        backgroundColor: '#FEF08A',
+        color: '#854D0E',
+        fontFamily: AppFonts.interBold,
+    },
 });
 export default JsonViewer;

package/dist/esm/components/LogCard.js

@@ -39,9 +39,8 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
     }, [isNew]);
     const path = getPath(item.url);
     const baseUrl = getBaseUrl(item.url) || item.url;
-    const cleanHost = baseUrl.replace(/^https?:\/\//, '');
     const slug = path && path !== '/' ? path : item.url;
-    const showSlug = slug !== cleanHost;
+    const showSlug = slug !== baseUrl && slug !== item.url;
     const triggeredAt = formatDateTime(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale onPress={onPress} style={[
@@ -52,7 +51,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             },
         ]}>
       <View style={styles.cardBody}>
-        {/* Row 1: Header (Checkbox, Serial, Method Badge, Base URL / Host, Status Pill) */}
+        {/* Row 1: Header (Checkbox, Serial, Method Badge, Base URL / Host with HTTPS, Status Pill) */}
         <View style={styles.cardHeaderRow}>
           <View style={styles.cardHeaderLeft}>
             <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
@@ -72,7 +71,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
               </Text>
             </View>
 
-            <HighlightText text={cleanHost || item.url} search={searchStr} style={styles.cardHostText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
+            <HighlightText text={baseUrl || item.url} search={searchStr} style={styles.cardHostText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
           </View>
 
           <View style={[

package/dist/esm/components/NetworkIcons.d.ts

@@ -57,3 +57,12 @@ export declare const SortIcon: ({ ascending, color, size, }: any) => React.JSX.E
 export declare const PrettyIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const RawIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TableIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PackageIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ForwardChevronIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const BundleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LiveStateIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TimelineIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const StorageIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const MetadataIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ReduxIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PerformanceIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Svg, { Circle, Line, Path, Rect } from 'react-native-svg';
+import Svg, { Circle, Ellipse, Line, Path, Rect } from 'react-native-svg';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 export const EmptyRadarIcon = ({ color = AppColors.purple, size = 32 }) => {
@@ -348,3 +348,57 @@ export const TableIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
       <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
     </Svg>);
 };
+export const PackageIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M16.5 9.4 7.55 4.24a1.78 1.78 0 0 0-2.5 1.55v12.42a1.78 1.78 0 0 0 .86 1.52l8.95 5.16a1.78 1.78 0 0 0 1.78 0l8.95-5.16a1.78 1.78 0 0 0 .86-1.52V5.79a1.78 1.78 0 0 0-2.5-1.55L16.5 9.4z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M3.29 7 12 12.01 20.71 7M12 22.08V12" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const ForwardChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M9 18l6-6-6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const BundleIcon = PackageIcon;
+export const LiveStateIcon = ({ color = AppColors.purple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Circle cx="12" cy="12" r="3.5" stroke={color} strokeWidth="1.8" fill={`${color}22`}/>
+      <Circle cx="12" cy="12" r="1.5" fill={color}/>
+    </Svg>);
+};
+export const TimelineIcon = ({ color = AppColors.purple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
+      <Path d="M12 7.5v4.5l3 2" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const StorageIcon = ({ color = AppColors.purple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Ellipse cx="12" cy="6" rx="8" ry="2.8" stroke={color} strokeWidth="1.8"/>
+      <Path d="M20 12c0 1.55-3.58 2.8-8 2.8s-8-1.25-8-2.8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Path d="M4 6v12c0 1.55 3.58 2.8 8 2.8s8-1.25 8-2.8V6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </Svg>);
+};
+export const MetadataIcon = ({ color = AppColors.purple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
+      <Path d="M12 16v-4M12 8.2h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const ReduxIcon = ({ color = AppColors.purple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="4" stroke={color} strokeWidth="1.8"/>
+      <Path d="M12 3a9 9 0 0 1 9 9M12 21a9 9 0 0 1-9-9" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Circle cx="21" cy="12" r="1.5" fill={color}/>
+      <Circle cx="3" cy="12" r="1.5" fill={color}/>
+    </Svg>);
+};
+export const PerformanceIcon = ({ color = AppColors.purple, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 3v2M5.636 5.636l1.414 1.414M18.364 5.636l-1.414 1.414M3 12h2M19 12h2" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Path d="M12 19a7 7 0 1 0-7-7c0 1.93.784 3.68 2.05 4.95" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <Path d="M12 12l3.5-3.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Circle cx="12" cy="12" r="1.5" fill={color}/>
+    </Svg>);
+};

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.16";
+export declare const LIB_VERSION = "1.1.18";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '1.1.16';
+export const LIB_VERSION = '1.1.18';

package/dist/esm/customHooks/consoleLogger.js

@@ -63,6 +63,16 @@ const symbolicateStack = async (stackString) => {
     catch { }
     return null;
 };
+const isLoggerInternal = (line) => {
+    const l = line.toLowerCase();
+    return (l.includes('getstackdetails') ||
+        l.includes('addlog') ||
+        l.includes('consolelogger') ||
+        l.includes('setupconsolelogger') ||
+        l.includes('formatargs') ||
+        l.includes('react-native-inapp-inspector') ||
+        l.trim() === 'error');
+};
 const getStackDetails = (args) => {
     try {
         let errorStack;
@@ -89,11 +99,7 @@ const getStackDetails = (args) => {
         let fallbackCaller;
         for (let i = 0; i < lines.length; i++) {
             const line = lines[i];
-            if (!line ||
-                line.includes('consoleLogger') ||
-                line.includes('setupConsoleLogger') ||
-                line.includes('react-native-inapp-inspector') ||
-                line.trim() === 'Error') {
+            if (!line || isLoggerInternal(line)) {
                 continue;
             }
             const isInternal = line.includes('react-native/Libraries') ||
@@ -110,10 +116,7 @@ const getStackDetails = (args) => {
                 break;
             }
         }
-        const cleanedStack = lines
-            .filter(l => !l.includes('consoleLogger') &&
-            !l.includes('setupConsoleLogger'))
-            .join('\n');
+        const cleanedStack = lines.filter(l => !isLoggerInternal(l)).join('\n');
         const caller = userCaller || fallbackCaller || 'Unknown';
         return { caller, stack: cleanedStack || stackToUse, errorStack, stackToUse };
     }
@@ -159,6 +162,31 @@ const addLog = (type, args, sourceMethod) => {
         logs.unshift(newLog);
         logs = logs.slice(0, MAX_LOGS);
         notify();
+        // Asynchronously symbolicate stack trace via Metro in development
+        if (newLog.stack && typeof __DEV__ !== 'undefined' && __DEV__) {
+            symbolicateStack(newLog.stack)
+                .then(symbolicatedFrames => {
+                if (symbolicatedFrames && symbolicatedFrames.length > 0) {
+                    const validFrames = symbolicatedFrames.filter(f => f.file &&
+                        !f.file.includes('react-native/Libraries') &&
+                        !f.file.includes('node_modules') &&
+                        !isLoggerInternal(f.file) &&
+                        !isLoggerInternal(f.methodName || ''));
+                    const topFrame = validFrames[0] || symbolicatedFrames[0];
+                    if (topFrame) {
+                        const cleanMethod = topFrame.methodName || 'anonymous';
+                        const cleanFile = topFrame.file.split('/').pop() || topFrame.file;
+                        newLog.caller = `${cleanMethod} (${cleanFile}:${topFrame.lineNumber || 1}:${topFrame.column || 1})`;
+                    }
+                    newLog.stack = symbolicatedFrames
+                        .filter(f => !isLoggerInternal(f.file || '') && !isLoggerInternal(f.methodName || ''))
+                        .map(f => `    at ${f.methodName || 'anonymous'} (${f.file}:${f.lineNumber || 1}:${f.column || 1})`)
+                        .join('\n');
+                    notify();
+                }
+            })
+                .catch(() => { });
+        }
         // Asynchronously symbolicate stack trace using Metro in DEV mode
         if (stackToUse && typeof __DEV__ !== 'undefined' && __DEV__) {
             const currentLogId = newLog.id;

package/dist/esm/customHooks/reduxLogger.js

@@ -67,7 +67,8 @@ function recordAction(action, prevState, nextState) {
     const payload = action && typeof action === 'object' && action.payload !== undefined
         ? action.payload
         : null;
-    const timestamp = new Date().toLocaleTimeString();
+    const now = Date.now();
+    const timestamp = new Date(now).toLocaleTimeString();
     const affectedSlices = [];
     if (prevState &&
         nextState &&
@@ -75,7 +76,7 @@ function recordAction(action, prevState, nextState) {
         typeof nextState === 'object') {
         Object.keys(nextState).forEach(key => {
             if (prevState[key] !== nextState[key]) {
-                lastActionForReducer[key] = { type, payload, timestamp };
+                lastActionForReducer[key] = { type, payload, timestamp, updatedAt: now };
                 affectedSlices.push(key);
             }
         });
@@ -85,6 +86,7 @@ function recordAction(action, prevState, nextState) {
         type,
         payload,
         timestamp,
+        updatedAt: now,
         affectedSlices,
         prevState,
         nextState,

package/dist/esm/helpers/index.js

@@ -458,10 +458,14 @@ export const parseStackLine = (rawLine, isOrigin = false) => {
         columnNumber = locMatch[3];
     }
     // Clean file name (remove query strings, packager urls, and parent paths)
-    let cleanPath = fullPath.split('?')[0].split('&')[0].replace(/[)]+$/, '');
+    let cleanPath = fullPath
+        .split('?')[0]
+        .split('&')[0]
+        .replace(/[)]+$/, '')
+        .replace(/\/\/+$/, '');
     // Remove protocol prefixes
     cleanPath = cleanPath.replace(/^(?:https?:\/\/[^\/]+\/|file:\/\/\/|webpack:\/\/\/?)/, '');
-    const fileName = cleanPath.split('/').pop() || cleanPath;
+    const fileName = cleanPath.split('/').filter(Boolean).pop() || cleanPath;
     // Determine file extension (.tsx, .jsx, .ts, .js)
     const extMatch = fileName.match(/\.([a-z0-9]+)$/i);
     const ext = extMatch ? extMatch[1].toLowerCase() : '';

package/dist/esm/index.js

@@ -22,7 +22,7 @@ import { getReduxState, subscribeReduxState, setReduxAutoRefresh, getLastActionF
 import { LIB_VERSION } from './constants';
 // Stylesheet
 import { toggleGlobalTheme } from './styles';
-const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigationRef, }) => {
+const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigationRef, appIcon, environment, }) => {
     // Set custom storage synchronously during render phase
     setCustomStorage(storage || null);
     const [isDark, setIsDark] = useState(false);
@@ -41,6 +41,9 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     const [search, setSearch] = useState('');
     const [detailSearch, setDetailSearch] = useState('');
     const [reduxSearch, setReduxSearch] = useState('');
+    const [selectedReduxSlice, setSelectedReduxSlice] = useState(null);
+    const [selectedReduxAction, setSelectedReduxAction] = useState(null);
+    const [reduxActiveSubTab, setReduxActiveSubTab] = useState('state');
     const [apiDetailActiveTab, setApiDetailActiveTab] = useState('response');
     useEffect(() => {
         LogBox.ignoreAllLogs(enabled);
@@ -147,6 +150,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         logs: true,
         analytics: true,
         redux: false,
+        bundle: false,
+        performance: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = useState(100);
     const [reduxAutoRefresh, setReduxAutoRefreshState] = useState(true);
@@ -165,6 +170,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             logs: true,
             analytics: true,
             redux: false,
+            bundle: false,
+            performance: false,
         });
         setDefaultTab('apis');
         setMaxNetworkLogs(100);
@@ -222,6 +229,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                         logs: true,
                         analytics: true,
                         redux: false,
+                        bundle: false,
+                        performance: false,
                     },
                     ...(saved.tabVisibility || {}),
                     apis: true,
@@ -1089,6 +1098,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         closeModal,
         isReady,
         isEnabled,
+        appIcon,
+        environment,
         modalHeightPercent,
         setModalHeightPercent,
         modalAnimationType,
@@ -1197,6 +1208,12 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         reduxLastActionMap,
         reduxSearch,
         setReduxSearch,
+        selectedReduxSlice,
+        setSelectedReduxSlice,
+        selectedReduxAction,
+        setSelectedReduxAction,
+        reduxActiveSubTab,
+        setReduxActiveSubTab,
         // ─── Settings ───────────────────────────────────────────────────────
         settingsActiveSubTab,
         setSettingsActiveSubTab,