react-native-inapp-inspector 2.3.14 → 2.3.16

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,40 +586,36 @@ 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}} />}
           />
-
-          <TouchableScale
-            onPress={() => {
-              try {
-                listRef.current?.scrollToOffset({
-                  offset: 0,
-                  animated: true,
-                });
-              } catch {
-                try {
-                  listRef.current?.scrollToIndex({
-                    index: 0,
-                    animated: true,
-                  });
-                } catch {}
-              }
-            }}
-            hitSlop={12}
-            style={globalStyles.scrollTopBtn}>
-            <View style={{transform: [{rotate: '180deg'}]}}>
-              <ChevronIcon color={AppColors.white} size={18} />
-            </View>
-          </TouchableScale>
         </>
       )}
 

package/src/components/Inspector/TabBar.tsx

@@ -10,6 +10,7 @@ import {
 import {useInspector} from './InspectorContext';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
 import TouchableScale from '../TouchableScale';
 import {
   SignalIcon,
@@ -56,60 +57,70 @@ const TabBar = React.memo(() => {
         {(
           [
             {
+              id: 1,
               key: 'apis',
               label: 'APIs',
               count: logs.length,
               icon: 'apis',
             },
             {
+              id: 2,
               key: 'logs',
               label: 'Logs',
               count: consoleLogs.length,
               icon: 'logs',
             },
             {
+              id: 3,
               key: 'analytics',
               label: 'Analytics',
               count: analyticsEvents.length,
               icon: 'analytics',
             },
             {
+              id: 4,
               key: 'redux',
               label: 'Redux',
               count: 0,
               icon: 'redux',
             },
             {
-              key: 'bundle',
-              label: 'Bundle',
+              id: 5,
+              key: 'storage',
+              label: 'Storage',
               count: 0,
-              icon: 'bundle',
+              icon: 'storage',
             },
             {
-              key: 'performance',
-              label: 'Performance',
+              id: 6,
+              key: 'device',
+              label: 'Device',
               count: 0,
-              icon: 'performance',
+              icon: 'device',
             },
             {
+              id: 7,
               key: 'crash',
               label: 'Crash',
               count: crashRecords?.length || 0,
               icon: 'crash',
             },
             {
-              key: 'device',
-              label: 'Device',
+              id: 8,
+              key: 'bundle',
+              label: 'Bundle',
               count: 0,
-              icon: 'device',
+              icon: 'bundle',
             },
             {
-              key: 'storage',
-              label: 'Storage',
+              id: 9,
+              key: 'performance',
+              label: 'Performance',
               count: 0,
-              icon: 'storage',
+              icon: 'performance',
             },
             {
+              id: 10,
               key: 'debugging',
               label: 'Debugging',
               count: 0,
@@ -176,24 +187,50 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'redux' && (
                     <ReduxIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'bundle' && (
-                    <PackageIcon color={iconColor} size={14} />
+                  {tab.icon === 'storage' && (
+                    <DatabaseIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'performance' && (
-                    <PerformanceIcon color={iconColor} size={14} />
+                  {tab.icon === 'device' && (
+                    <SmartphoneIcon color={iconColor} size={14} />
                   )}
                   {tab.icon === 'crash' && (
                     <CrashIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'device' && (
-                    <SmartphoneIcon color={iconColor} size={14} />
+                  {tab.icon === 'bundle' && (
+                    <PackageIcon color={iconColor} size={14} />
                   )}
-                  {tab.icon === 'storage' && (
-                    <DatabaseIcon color={iconColor} size={14} />
+                  {tab.icon === 'performance' && (
+                    <PerformanceIcon color={iconColor} size={14} />
                   )}
                   {tab.icon === 'debugging' && (
                     <QrCodeIcon color={iconColor} size={14} />
                   )}
+                  <View
+                    style={{
+                      minWidth: 20,
+                      height: 20,
+                      paddingHorizontal: 4,
+                      borderRadius: 10,
+                      backgroundColor: isActive
+                        ? `${AppColors.white}33`
+                        : `${AppColors.purple}1F`,
+                      borderWidth: 1,
+                      borderColor: isActive
+                        ? `${AppColors.white}66`
+                        : `${AppColors.purple}40`,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9.5,
+                        lineHeight: 12,
+                        color: isActive ? AppColors.white : AppColors.purple,
+                      }}>
+                      #{tab.id}
+                    </Text>
+                  </View>
                   <Text
                     numberOfLines={1}
                     ellipsizeMode="tail"

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>
       );
     }