react-native-inapp-inspector 2.3.12 → 2.3.14

package/src/components/Inspector/MainScreen.tsx

@@ -36,6 +36,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 {
@@ -171,7 +172,9 @@ const MainScreen = () => {
                       {activeTab === 'crash' && <CrashTab />}
                       {activeTab === 'device' && <DeviceInfoTab />}
                       {activeTab === 'storage' && <StorageTab />}
-                      {activeTab === 'debugging' && <DebuggingTab />}
+                      {Platform.OS === 'android' &&
+                        isLocalDebugEnvironment() &&
+                        activeTab === 'debugging' && <DebuggingTab />}
                     </Animated.View>
 
                     {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}

package/src/components/Inspector/NetworkDetail.tsx

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

package/src/components/Inspector/NetworkFilterModal.tsx

@@ -27,6 +27,11 @@ import {
   BoltIcon,
   GlobeIcon,
   LockIcon,
+  UnlockIcon,
+  RocketIcon,
+  TurtleIcon,
+  HourglassIcon,
+  PackageIcon,
 } from '../NetworkIcons';
 import TouchableScale from '../TouchableScale';
 
@@ -405,12 +410,13 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'all' as const, label: 'All Speeds', color: AppColors.purple},
-                  {key: 'fast' as const, label: '⚡ Fast (<200ms)', color: AppColors.greenColor, count: counts.fastCount},
-                  {key: 'normal' as const, label: '⏱️ Normal (200-500ms)', color: AppColors.skyBlue, count: counts.normalCount},
-                  {key: 'slow' as const, label: '⚠️ Slow (>500ms)', color: AppColors.errorColor, count: counts.slowCount},
+                  {key: 'all' as const, label: 'All Speeds', color: AppColors.purple, icon: LayersIcon},
+                  {key: 'fast' as const, label: 'Fast (<200ms)', color: AppColors.greenColor, icon: BoltIcon, count: counts.fastCount},
+                  {key: 'normal' as const, label: 'Normal (200-500ms)', color: AppColors.skyBlue, icon: ClockIcon, count: counts.normalCount},
+                  {key: 'slow' as const, 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}
@@ -423,6 +429,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: item.color,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? item.color : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,
@@ -448,11 +458,12 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>PROTOCOL</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'all' as const, label: 'All Protocols', color: AppColors.purple},
-                  {key: 'https' as const, label: '🔒 HTTPS Secure', color: AppColors.mintGreenText, count: counts.httpsCount},
-                  {key: 'http' as const, label: '🔓 HTTP Insecure', color: AppColors.amber700, count: counts.httpCount},
+                  {key: 'all' as const, label: 'All Protocols', color: AppColors.purple, icon: GlobeIcon},
+                  {key: 'https' as const, label: 'HTTPS Secure', color: AppColors.mintGreenText, icon: LockIcon, count: counts.httpsCount},
+                  {key: 'http' as const, 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}
@@ -465,6 +476,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: item.color,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? item.color : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,
@@ -490,13 +505,14 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>SORT BY</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'time_desc' as const, label: '⏱️ Newest First (Default)'},
-                  {key: 'time_asc' as const, label: '⌛ Oldest First'},
-                  {key: 'duration_desc' as const, label: '🐢 Slowest Response'},
-                  {key: 'duration_asc' as const, label: '🚀 Fastest Response'},
-                  {key: 'size_desc' as const, label: '📦 Largest Response Size'},
+                  {key: 'time_desc' as const, label: 'Newest First (Default)', icon: ClockIcon},
+                  {key: 'time_asc' as const, label: 'Oldest First', icon: HourglassIcon},
+                  {key: 'duration_desc' as const, label: 'Slowest Response', icon: TurtleIcon},
+                  {key: 'duration_asc' as const, label: 'Fastest Response', icon: RocketIcon},
+                  {key: 'size_desc' as const, label: 'Largest Response Size', icon: PackageIcon},
                 ].map(item => {
                   const isSelected = draft.sortBy === item.key;
+                  const IconComp = item.icon;
                   return (
                     <TouchableOpacity
                       key={item.key}
@@ -509,6 +525,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: AppColors.purple,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? AppColors.purple : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,

package/src/components/Inspector/SettingsPanel.tsx

@@ -59,7 +59,7 @@ import {
   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';
 
@@ -131,78 +131,88 @@ const SettingsPanel = () => {
     Platform.OS === 'android' ? StatusBar.currentHeight || 24 : 44;
   const headerTopPadding = modalHeightPercent >= 95 ? statusBarHeight : 0;
 
-  const allModules = [
-    {
-      key: 'apis',
-      label: 'APIs (Network)',
-      category: 'core',
-      icon: 'apis',
-      desc: 'HTTP/HTTPS requests, GraphQL, Axios & WebSocket inspector',
-    },
-    {
-      key: 'logs',
-      label: 'Console Logs',
-      category: 'core',
-      icon: 'logs',
-      desc: 'Terminal console logs, warnings, errors & stack traces',
-    },
-    {
-      key: 'performance',
-      label: 'Performance Tracker',
-      category: 'diagnostic',
-      icon: 'performance',
-      desc: '60 FPS monitor, Hermes memory telemetry & re-render profiler',
-    },
-    {
-      key: 'bundle',
-      label: 'Bundle Analyzer',
-      category: 'diagnostic',
-      icon: 'bundle',
-      desc: 'Metro packager dependencies, source maps & asset breakdown',
-    },
-    {
-      key: 'crash',
-      label: 'Crash Protection',
-      category: 'diagnostic',
-      icon: 'crash',
-      desc: 'Runtime exception guard, breadcrumbs & memory snapshot',
-    },
-    {
-      key: 'analytics',
-      label: 'Analytics Logger',
-      category: 'telemetry',
-      icon: 'analytics',
-      desc: 'Firebase & custom analytics events, user properties & params',
-    },
-    {
-      key: 'redux',
-      label: 'Redux Inspector',
-      category: 'telemetry',
-      icon: 'redux',
-      desc: 'Store state diffing, action history & reducer timeline',
-    },
-    {
-      key: 'device',
-      label: 'Device Info',
-      category: 'diagnostic',
-      icon: 'device',
-      desc: 'Hardware specs, IP address, screen metrics, UDID & runtime stats',
-    },
-    {
-      key: 'storage',
-      label: 'Storage Inspector',
-      category: 'telemetry',
-      icon: 'storage',
-      desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
-    },
-    {
-      key: 'debugging',
-      label: 'Multi-Device Debugging',
-      category: 'diagnostic',
-      icon: 'debugging',
-      desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
-    },
-  ] as const;
+  const allModules = useMemo(
+    () =>
+      (
+        [
+          {
+            key: 'apis',
+            label: 'APIs (Network)',
+            category: 'core',
+            icon: 'apis',
+            desc: 'HTTP/HTTPS requests, GraphQL, Axios & WebSocket inspector',
+          },
+          {
+            key: 'logs',
+            label: 'Console Logs',
+            category: 'core',
+            icon: 'logs',
+            desc: 'Terminal console logs, warnings, errors & stack traces',
+          },
+          {
+            key: 'performance',
+            label: 'Performance Tracker',
+            category: 'diagnostic',
+            icon: 'performance',
+            desc: '60 FPS monitor, Hermes memory telemetry & re-render profiler',
+          },
+          {
+            key: 'bundle',
+            label: 'Bundle Analyzer',
+            category: 'diagnostic',
+            icon: 'bundle',
+            desc: 'Metro packager dependencies, source maps & asset breakdown',
+          },
+          {
+            key: 'crash',
+            label: 'Crash Protection',
+            category: 'diagnostic',
+            icon: 'crash',
+            desc: 'Runtime exception guard, breadcrumbs & memory snapshot',
+          },
+          {
+            key: 'analytics',
+            label: 'Analytics Logger',
+            category: 'telemetry',
+            icon: 'analytics',
+            desc: 'Firebase & custom analytics events, user properties & params',
+          },
+          {
+            key: 'redux',
+            label: 'Redux Inspector',
+            category: 'telemetry',
+            icon: 'redux',
+            desc: 'Store state diffing, action history & reducer timeline',
+          },
+          {
+            key: 'device',
+            label: 'Device Info',
+            category: 'diagnostic',
+            icon: 'device',
+            desc: 'Hardware specs, IP address, screen metrics, UDID & runtime stats',
+          },
+          {
+            key: 'storage',
+            label: 'Storage Inspector',
+            category: 'telemetry',
+            icon: 'storage',
+            desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
+          },
+          {
+            key: 'debugging',
+            label: 'Multi-Device Debugging',
+            category: 'diagnostic',
+            icon: 'debugging',
+            desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
+          },
+        ] as const
+      ).filter(m =>
+        m.key === 'debugging'
+          ? Platform.OS === 'android' && isLocalDebugEnvironment()
+          : true,
+      ),
+    [],
+  );
 
   // Staged selection state for checkboxes before clicking "Save Changes"
   const [stagedTabVisibility, setStagedTabVisibility] = useState<
@@ -217,7 +227,7 @@ const SettingsPanel = () => {
     crash: Boolean(tabVisibility?.crash),
     device: Boolean(tabVisibility?.device),
     storage: Boolean(tabVisibility?.storage),
-    debugging: Boolean(tabVisibility?.debugging ?? true),
+    debugging: Boolean(tabVisibility?.debugging),
   }));
 
   // Synchronize staged state with tabVisibility when tabVisibility updates
@@ -232,7 +242,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]);
 

package/src/components/Inspector/StorageTab.tsx

@@ -30,6 +30,7 @@ import {
   LayersIcon,
   ResetIcon,
   ChevronIcon,
+  WarningTriangleIcon,
 } from '../NetworkIcons';
 import {
   fetchStorageEntries,
@@ -162,9 +163,16 @@ const StorageEntryCard = React.memo(function StorageEntryCard({
           {displayValue}
         </Text>
         {entry.value.length > 80 && (
-          <Text style={styles.expandHint}>
-            {isExpanded ? '▲ Collapse' : '▼ Expand'}
-          </Text>
+          <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>
@@ -710,7 +718,10 @@ export const StorageTab = React.memo(() => {
                 autoCapitalize="none"
               />
               {jsonError && (
-                <Text style={styles.errorText}>⚠️ {jsonError}</Text>
+                <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/src/components/Inspector/TabBar.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import {Animated, ScrollView, Text, TouchableOpacity, View} from 'react-native';
+import {
+  Animated,
+  Platform,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {useInspector} from './InspectorContext';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
@@ -20,6 +27,7 @@ import {
 import {isReduxConnected} from '../../customHooks/reduxLogger';
 import {isAnalyticsConnected} from '../../customHooks/analyticsLogger';
 import {triggerNativeHaptic} from '../../native/NativeInspector';
+import {isLocalDebugEnvironment} from '../../helpers';
 
 const TabBar = React.memo(() => {
   const {
@@ -110,7 +118,13 @@ const TabBar = React.memo(() => {
           ] as const
         )
           .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) return false;
             if (tab.key === 'analytics' && !isAnalyticsAvail) return false;

package/src/components/JsonViewer.tsx

@@ -7,7 +7,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';
 
 // Styles
 import {AppColors} from '../styles/AppColors';
@@ -77,10 +77,15 @@ const JsonTableRow = React.memo(({
           <TouchableOpacity
             onPress={() => setExpanded(prev => !prev)}
             hitSlop={6}
-            style={localStyles.showMoreBtn}>
+            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>

package/src/components/NetworkIcons.tsx

@@ -570,11 +570,16 @@ export const SortArrowIcon = ({
 export const ChevronIcon = ({
   color = AppColors.grayTextWeak,
   size = 14,
+  direction = 'down',
 }: IconProps) => {
+  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"
+        d={path}
         stroke={color}
         strokeWidth="2.5"
         strokeLinecap="round"
@@ -2285,3 +2290,68 @@ export const QrCodeIcon = ({
   </Svg>
 );
 
+export const UnlockIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <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,
+}: IconProps) => (
+  <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,
+}: IconProps) => (
+  <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/src/components/QRCodeView.tsx

@@ -19,8 +19,8 @@ export const QRCodeView: React.FC<QRCodeViewProps> = ({
 }) => {
   const matrix = useMemo(() => generateQRMatrix(value || 'http://localhost:8081'), [value]);
   const numCells = matrix.length || 21;
-  // Add a 3-module quiet zone (white border) required by QR scanners
-  const margin = 3;
+  // Standard 4-module quiet zone (white border) for 100% instant phone camera / Google Lens recognition
+  const margin = 4;
   const totalCells = numCells + margin * 2;
   const cellSize = size / totalCells;
 

package/src/constants/version.ts

@@ -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 = '2.3.12';
+export const LIB_VERSION = '2.3.14';

package/src/helpers/index.ts

@@ -25,6 +25,21 @@ import {
 export * from './searchQueryParser';
 export * from './memoryManager';
 
+/**
+ * Returns true if running in local debug environment (connected to Metro/dev server, __DEV__ is true).
+ * Returns false in standalone release / signed APKs.
+ */
+export const isLocalDebugEnvironment = (): boolean => {
+  const isDev = typeof __DEV__ !== 'undefined' && Boolean(__DEV__);
+  const scriptURL: string = NativeModules.SourceCode?.scriptURL || '';
+  const hasDevServer =
+    scriptURL.startsWith('http://') ||
+    scriptURL.startsWith('https://') ||
+    scriptURL.includes(':8081') ||
+    scriptURL.includes(':8082');
+  return isDev || hasDevServer;
+};
+
 export const getDomainColor = (domain: string): string => {
   if (!domain) return DOMAIN_COLORS[0];
   let hash = 0;