react-native-inapp-inspector 2.3.13 → 2.3.15

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

@@ -356,10 +356,11 @@ export const StorageTab = React.memo(() => {
   // Filter entries
   const filteredEntries = useMemo(() => {
     if (!search.trim()) return entries;
-    const q = search.toLowerCase().trim();
-    return entries.filter(
-      e => e.key.toLowerCase().includes(q) || e.value.toLowerCase().includes(q),
-    );
+    const tokens = search.toLowerCase().trim().split(/\s+/).filter(Boolean);
+    return entries.filter(e => {
+      const corpus = `${e.key} ${e.value}`.toLowerCase();
+      return tokens.every(tok => corpus.includes(tok));
+    });
   }, [entries, search]);
 
   const totalBytes = useMemo(() => {
@@ -585,13 +586,32 @@ export const StorageTab = React.memo(() => {
                   <DatabaseIcon size={28} color={AppColors.grayTextWeak} />
                 </View>
                 <Text style={styles.emptyTitle}>
-                  {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+                  {search.trim().length > 0
+                    ? 'No matching keys found'
+                    : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
                 </Text>
                 <Text style={styles.emptySubtitle}>
-                  {search
-                    ? 'Try modifying your search query'
+                  {search.trim().length > 0
+                    ? `No keys or values match "${search}"`
                     : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
                 </Text>
+                {search.trim().length > 0 && (
+                  <TouchableScale
+                    onPress={() => setSearch('')}
+                    style={{
+                      marginTop: 12,
+                      paddingHorizontal: 14,
+                      paddingVertical: 6,
+                      borderRadius: 8,
+                      backgroundColor: AppColors.grayBackground,
+                      borderWidth: 1,
+                      borderColor: AppColors.grayBorderSecondary,
+                    }}>
+                    <Text style={{color: AppColors.brandPurple, fontSize: 12, fontFamily: AppFonts.interBold}}>
+                      Clear Search
+                    </Text>
+                  </TouchableScale>
+                )}
               </View>
             }
             ListFooterComponent={<View style={{height: 60}} />}

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

@@ -186,11 +186,24 @@ const JsonViewer = React.memo(({
       );
     }
 
-    const keys = Object.keys(data as object);
+    let keys = Object.keys(data as object);
+    if (search && search.trim().length > 0) {
+      const q = search.trim().toLowerCase();
+      keys = keys.filter(key => {
+        const val = (data as any)[key];
+        const valStr = typeof val === 'object' && val !== null ? JSON.stringify(val) : String(val);
+        return key.toLowerCase().includes(q) || valStr.toLowerCase().includes(q);
+      });
+    }
+
     if (keys.length === 0) {
       return (
         <View style={localStyles.emptyTable}>
-          <Text style={localStyles.emptyTableText}>{t('network.jsonViewer.emptyTable')}</Text>
+          <Text style={localStyles.emptyTableText}>
+            {search && search.trim().length > 0
+              ? 'No matching keys or values found'
+              : t('network.jsonViewer.emptyTable')}
+          </Text>
         </View>
       );
     }