react-native-inapp-inspector 2.3.12 → 2.3.14

package/dist/esm/components/Inspector/MainScreen.js

@@ -26,6 +26,7 @@ import Toast from '../Toast';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
+import { isLocalDebugEnvironment } from '../../helpers';
 const MainScreen = () => {
     const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, enabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
@@ -119,7 +120,9 @@ const MainScreen = () => {
                       {activeTab === 'crash' && <CrashTab />}
                       {activeTab === 'device' && <DeviceInfoTab />}
                       {activeTab === 'storage' && <StorageTab />}
-                      {activeTab === 'debugging' && <DebuggingTab />}
+                      {Platform.OS === 'android' &&
+                    isLocalDebugEnvironment() &&
+                    activeTab === 'debugging' && <DebuggingTab />}
                     </Animated.View>
 
                     

package/dist/esm/components/Inspector/NetworkDetail.js

@@ -298,7 +298,7 @@ const NetworkDetail = React.memo(() => {
                     letterSpacing: 0.4,
                     textTransform: 'uppercase',
                 }}>
-                        ENDPOINT URL ↗
+                        ENDPOINT URL
                       </Text>
                     </View>
 
@@ -333,7 +333,7 @@ const NetworkDetail = React.memo(() => {
                     fontSize: 9,
                     color: AppColors.sky600,
                 }}>
-                          Open ↗
+                          Open
                         </Text>
                       </View>
                     </View>

package/dist/esm/components/Inspector/NetworkFilterModal.js

@@ -5,7 +5,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { METHOD_COLORS } from '../../constants';
-import { FilterIcon, CloseWhite, CircleCheckIcon, CircleAlertIcon, CircleXIcon, LayersIcon, RepeatIcon, ShieldAlertIcon, } from '../NetworkIcons';
+import { FilterIcon, CloseWhite, ClockIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, LayersIcon, RepeatIcon, ShieldAlertIcon, BoltIcon, GlobeIcon, LockIcon, UnlockIcon, RocketIcon, TurtleIcon, HourglassIcon, PackageIcon, } from '../NetworkIcons';
 import TouchableScale from '../TouchableScale';
 export const DEFAULT_NETWORK_FILTERS = {
     statusCodes: new Set(['all']),
@@ -330,12 +330,13 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Speeds', color: AppColors.purple },
-            { key: 'fast', label: '⚡ Fast (<200ms)', color: AppColors.greenColor, count: counts.fastCount },
-            { key: 'normal', label: '⏱️ Normal (200-500ms)', color: AppColors.skyBlue, count: counts.normalCount },
-            { key: 'slow', label: '⚠️ Slow (>500ms)', color: AppColors.errorColor, count: counts.slowCount },
+            { key: 'all', label: 'All Speeds', color: AppColors.purple, icon: LayersIcon },
+            { key: 'fast', label: 'Fast (<200ms)', color: AppColors.greenColor, icon: BoltIcon, count: counts.fastCount },
+            { key: 'normal', label: 'Normal (200-500ms)', color: AppColors.skyBlue, icon: ClockIcon, count: counts.normalCount },
+            { key: 'slow', label: 'Slow (>500ms)', color: AppColors.errorColor, icon: CircleAlertIcon, count: counts.slowCount },
         ].map(item => {
             const isSelected = draft.latency === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, latency: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -343,6 +344,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts.interBold },
@@ -364,11 +366,12 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>PROTOCOL</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Protocols', color: AppColors.purple },
-            { key: 'https', label: '🔒 HTTPS Secure', color: AppColors.mintGreenText, count: counts.httpsCount },
-            { key: 'http', label: '🔓 HTTP Insecure', color: AppColors.amber700, count: counts.httpCount },
+            { key: 'all', label: 'All Protocols', color: AppColors.purple, icon: GlobeIcon },
+            { key: 'https', label: 'HTTPS Secure', color: AppColors.mintGreenText, icon: LockIcon, count: counts.httpsCount },
+            { key: 'http', label: 'HTTP Insecure', color: AppColors.amber700, icon: UnlockIcon, count: counts.httpCount },
         ].map(item => {
             const isSelected = draft.protocol === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, protocol: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -376,6 +379,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts.interBold },
@@ -397,13 +401,14 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>SORT BY</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'time_desc', label: '⏱️ Newest First (Default)' },
-            { key: 'time_asc', label: '⌛ Oldest First' },
-            { key: 'duration_desc', label: '🐢 Slowest Response' },
-            { key: 'duration_asc', label: '🚀 Fastest Response' },
-            { key: 'size_desc', label: '📦 Largest Response Size' },
+            { key: 'time_desc', label: 'Newest First (Default)', icon: ClockIcon },
+            { key: 'time_asc', label: 'Oldest First', icon: HourglassIcon },
+            { key: 'duration_desc', label: 'Slowest Response', icon: TurtleIcon },
+            { key: 'duration_asc', label: 'Fastest Response', icon: RocketIcon },
+            { key: 'size_desc', label: 'Largest Response Size', icon: PackageIcon },
         ].map(item => {
             const isSelected = draft.sortBy === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, sortBy: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -411,6 +416,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: AppColors.purple,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? AppColors.purple : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: AppColors.purple, fontFamily: AppFonts.interBold },

package/dist/esm/components/Inspector/SettingsPanel.js

@@ -19,7 +19,7 @@ import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
-import { copyToClipboard } from '../../helpers';
+import { copyToClipboard, isLocalDebugEnvironment } from '../../helpers';
 import { showToast } from '../../helpers/toast';
 import { pruneAllLogs } from '../../helpers/memoryManager';
 const SettingsPanel = () => {
@@ -33,7 +33,7 @@ const SettingsPanel = () => {
     const isPersistent = isPersistentStorageAvailable();
     const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight || 24 : 44;
     const headerTopPadding = modalHeightPercent >= 95 ? statusBarHeight : 0;
-    const allModules = [
+    const allModules = useMemo(() => [
         {
             key: 'apis',
             label: 'APIs (Network)',
@@ -104,7 +104,9 @@ const SettingsPanel = () => {
             icon: 'debugging',
             desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
         },
-    ];
+    ].filter(m => m.key === 'debugging'
+        ? Platform.OS === 'android' && isLocalDebugEnvironment()
+        : true), []);
     const [stagedTabVisibility, setStagedTabVisibility] = useState(() => ({
         apis: true,
         logs: Boolean(tabVisibility?.logs),
@@ -115,7 +117,7 @@ const SettingsPanel = () => {
         crash: Boolean(tabVisibility?.crash),
         device: Boolean(tabVisibility?.device),
         storage: Boolean(tabVisibility?.storage),
-        debugging: Boolean(tabVisibility?.debugging ?? true),
+        debugging: Boolean(tabVisibility?.debugging),
     }));
     useEffect(() => {
         setStagedTabVisibility({
@@ -128,7 +130,7 @@ const SettingsPanel = () => {
             crash: Boolean(tabVisibility?.crash),
             device: Boolean(tabVisibility?.device),
             storage: Boolean(tabVisibility?.storage),
-            debugging: Boolean(tabVisibility?.debugging ?? true),
+            debugging: Boolean(tabVisibility?.debugging),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = useMemo(() => {

package/dist/esm/components/Inspector/StorageTab.js

@@ -5,7 +5,7 @@ import globalStyles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
-import { DatabaseIcon, SearchIcon, ClearIcon, PlusIcon, PencilIcon, TrashIcon, CopyIcon, CheckIcon, LayersIcon, ResetIcon, ChevronIcon, } from '../NetworkIcons';
+import { DatabaseIcon, SearchIcon, ClearIcon, PlusIcon, PencilIcon, TrashIcon, CopyIcon, CheckIcon, LayersIcon, ResetIcon, ChevronIcon, WarningTriangleIcon, } from '../NetworkIcons';
 import { fetchStorageEntries, setStorageEntry, removeStorageEntry, clearStorageDriver, isAsyncStorageConnected, isMMKVConnected, getRegisteredMMKVInstanceIds, subscribeToStorageChanges, } from '../../customHooks/storageInspector';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
@@ -88,9 +88,12 @@ const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpande
         <Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable={isExpanded}>
           {displayValue}
         </Text>
-        {entry.value.length > 80 && (<Text style={styles.expandHint}>
-            {isExpanded ? '▲ Collapse' : '▼ Expand'}
-          </Text>)}
+        {entry.value.length > 80 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 4 }}>
+            <Text style={styles.expandHint}>
+              {isExpanded ? 'Collapse' : 'Expand'}
+            </Text>
+            <ChevronIcon direction={isExpanded ? 'up' : 'down'} size={10} color={AppColors.purple}/>
+          </View>)}
       </TouchableScale>
     </View>);
 });
@@ -465,7 +468,10 @@ export const StorageTab = React.memo(() => {
                 : editType === 'boolean'
                     ? 'true'
                     : 'String value...'} placeholderTextColor={AppColors.grayTextWeak} style={[styles.textInput, styles.textAreaInput]} multiline textAlignVertical="top" autoCapitalize="none"/>
-              {jsonError && (<Text style={styles.errorText}>⚠️ {jsonError}</Text>)}
+              {jsonError && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 4 }}>
+                  <WarningTriangleIcon size={12} color={AppColors.errorColor}/>
+                  <Text style={styles.errorText}>{jsonError}</Text>
+                </View>)}
             </View>
 
             

package/dist/esm/components/Inspector/TabBar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated, ScrollView, Text, View } from 'react-native';
+import { Animated, Platform, ScrollView, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
@@ -7,6 +7,7 @@ import TouchableScale from '../TouchableScale';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
+import { isLocalDebugEnvironment } from '../../helpers';
 const TabBar = React.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
     const isReduxAvail = isReduxConnected();
@@ -76,8 +77,11 @@ const TabBar = React.memo(() => {
             },
         ]
             .filter(tab => {
-            if (tab.key === 'debugging')
-                return true;
+            if (tab.key === 'debugging') {
+                return (Platform.OS === 'android' &&
+                    isLocalDebugEnvironment() &&
+                    Boolean(tabVisibility?.debugging));
+            }
             if (!tabVisibility?.[tab.key])
                 return false;
             if (tab.key === 'redux' && !isReduxAvail)

package/dist/esm/components/JsonViewer.js

@@ -5,7 +5,7 @@ import TreeNode from './TreeNode';
 import SegmentedTabs from './SegmentedTabs';
 import HighlightText from './HighlightText';
 import CopyButton from './CopyButton';
-import { PrettyIcon, RawIcon, TableIcon } from './NetworkIcons';
+import { PrettyIcon, RawIcon, TableIcon, ChevronIcon } from './NetworkIcons';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
@@ -44,10 +44,11 @@ const JsonTableRow = React.memo(({ itemKey, val, search, }) => {
             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}>
+        {isMultiline && (<TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={[localStyles.showMoreBtn, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
             <Text style={localStyles.showMoreText}>
-              {expanded ? 'Show less ▲' : 'Show more ▼'}
+              {expanded ? 'Show less' : 'Show more'}
             </Text>
+            <ChevronIcon direction={expanded ? 'up' : 'down'} size={10} color={AppColors.purple}/>
           </TouchableOpacity>)}
       </View>
     </View>);

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

@@ -37,7 +37,7 @@ export declare const SignalIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 export declare const DiffIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const GlobeIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const SortArrowIcon: ({ color, size, direction, }: IconProps) => React.JSX.Element;
-export declare const ChevronIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ChevronIcon: ({ color, size, direction, }: IconProps) => React.JSX.Element;
 export declare const FilterIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const DownloadIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const CloseWhite: ({ color, size }: IconProps) => React.JSX.Element;
@@ -135,3 +135,6 @@ export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const QrCodeIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const UnlockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const RocketIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const TurtleIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -167,9 +167,16 @@ export const SortArrowIcon = ({ color = AppColors.primaryLight, size = 20, direc
         </>)}
     </Svg>);
 };
-export const ChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+export const ChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, direction = 'down', }) => {
+    let path = 'M6 9l6 6 6-6';
+    if (direction === 'up')
+        path = 'M18 15l-6-6-6 6';
+    else if (direction === 'right')
+        path = 'M9 18l6-6-6-6';
+    else if (direction === 'left')
+        path = 'M15 18l-6-6 6-6';
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d={path} stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
 export const FilterIcon = ({ color = AppColors.grayTextWeak, size = 18, }) => {
@@ -740,3 +747,16 @@ export const QrCodeIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<
     <Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
     <Path d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z" fill={color}/>
   </Svg>);
+export const UnlockIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M7 11V7a5 5 0 0 1 9.9-1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const RocketIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6.05 11a22.35 22.35 0 0 1-3.95 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M9 12l-4 4M15 6l-3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const TurtleIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Ellipse cx="12" cy="14" rx="7" ry="5" stroke={color} strokeWidth="2"/>
+    <Circle cx="12" cy="6" r="3" stroke={color} strokeWidth="2"/>
+    <Path d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </Svg>);

package/dist/esm/components/QRCodeView.js

@@ -6,7 +6,7 @@ import { AppColors } from '../styles/AppColors';
 export const QRCodeView = ({ value, size = 200, color = '#000000', backgroundColor = '#FFFFFF', }) => {
     const matrix = useMemo(() => generateQRMatrix(value || 'http://localhost:8081'), [value]);
     const numCells = matrix.length || 21;
-    const margin = 3;
+    const margin = 4;
     const totalCells = numCells + margin * 2;
     const cellSize = size / totalCells;
     return (<View style={[

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.12";
+export declare const LIB_VERSION = "2.3.14";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.12';
+export const LIB_VERSION = '2.3.14';

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

@@ -1,6 +1,7 @@
 import { NetworkLog, RouteInfo, DiffResult, JsonContent, StackFrameType } from '../types';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export declare const isLocalDebugEnvironment: () => boolean;
 export declare const getDomainColor: (domain: string) => string;
 export declare const formatDateTime: (timestamp: number) => string;
 export declare const formatTimestamp: (timestamp: number) => string;

package/dist/esm/helpers/index.js

@@ -5,6 +5,15 @@ import { AppColors } from '../styles/AppColors';
 import { DOMAIN_COLORS, DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export const isLocalDebugEnvironment = () => {
+    const isDev = typeof __DEV__ !== 'undefined' && Boolean(__DEV__);
+    const scriptURL = NativeModules.SourceCode?.scriptURL || '';
+    const hasDevServer = scriptURL.startsWith('http://') ||
+        scriptURL.startsWith('https://') ||
+        scriptURL.includes(':8081') ||
+        scriptURL.includes(':8082');
+    return isDev || hasDevServer;
+};
 export const getDomainColor = (domain) => {
     if (!domain)
         return DOMAIN_COLORS[0];

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

@@ -1,2 +1,3 @@
 export type QRECC = 'L' | 'M' | 'Q' | 'H';
 export declare function generateQRMatrix(text: string, ecc?: QRECC): boolean[][];
+export default generateQRMatrix;