react-native-inapp-inspector 2.3.14 → 2.3.16

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { View, Text, ScrollView, FlatList, TextInput, Modal, Alert, StyleSheet, ActivityIndicator, Platform, } from 'react-native';
 import TouchableScale from '../TouchableScale';
-import globalStyles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
@@ -232,8 +231,11 @@ export const StorageTab = React.memo(() => {
     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(() => {
         return entries.reduce((sum, e) => sum + e.byteSize, 0);
@@ -371,36 +373,29 @@ 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/dist/esm/components/Inspector/TabBar.js

@@ -3,6 +3,7 @@ import { Animated, Platform, ScrollView, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
 import TouchableScale from '../TouchableScale';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
@@ -16,60 +17,70 @@ const TabBar = React.memo(() => {
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
             {
+                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,
@@ -119,12 +130,36 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'logs' && (<TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'storage' && (<DatabaseIcon 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" style={[
                     styles.contentTabButtonText,
                     isActive &&

package/dist/esm/components/JsonViewer.js

@@ -111,10 +111,22 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1
           <Text style={localStyles.tableCellValue}>{String(data)}</Text>
         </View>);
         }
-        const keys = Object.keys(data);
+        let keys = Object.keys(data);
+        if (search && search.trim().length > 0) {
+            const q = search.trim().toLowerCase();
+            keys = keys.filter(key => {
+                const val = data[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>);
         }
         return (<View style={localStyles.tableView}>