react-native-inapp-inspector 2.3.14 → 2.3.16

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

@@ -40,7 +40,6 @@ exports.StorageTab = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const i18n_1 = require("../../i18n");
@@ -271,8 +270,11 @@ exports.StorageTab = react_1.default.memo(() => {
     const filteredEntries = (0, react_1.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 = (0, react_1.useMemo)(() => {
         return entries.reduce((sum, e) => sum + e.byteSize, 0);
@@ -410,36 +412,29 @@ exports.StorageTab = react_1.default.memo(() => {
                   <NetworkIcons_1.DatabaseIcon size={28} color={AppColors_1.AppColors.grayTextWeak}/>
                 </react_native_1.View>
                 <react_native_1.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`}
                 </react_native_1.Text>
                 <react_native_1.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!`}
                 </react_native_1.Text>
+                {search.trim().length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} style={{
+                        marginTop: 12,
+                        paddingHorizontal: 14,
+                        paddingVertical: 6,
+                        borderRadius: 8,
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderWidth: 1,
+                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                    <react_native_1.Text style={{ color: AppColors_1.AppColors.brandPurple, fontSize: 12, fontFamily: AppFonts_1.AppFonts.interBold }}>
+                      Clear Search
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>)}
               </react_native_1.View>} ListFooterComponent={<react_native_1.View style={{ height: 60 }}/>}/>
-
-          <TouchableScale_1.default onPress={() => {
-                try {
-                    listRef.current?.scrollToOffset({
-                        offset: 0,
-                        animated: true,
-                    });
-                }
-                catch {
-                    try {
-                        listRef.current?.scrollToIndex({
-                            index: 0,
-                            animated: true,
-                        });
-                    }
-                    catch { }
-                }
-            }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
-            <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
-              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
-            </react_native_1.View>
-          </TouchableScale_1.default>
         </>)}
 
       

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

@@ -8,6 +8,7 @@ const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const NetworkIcons_1 = require("../NetworkIcons");
 const reduxLogger_1 = require("../../customHooks/reduxLogger");
@@ -21,60 +22,70 @@ const TabBar = react_1.default.memo(() => {
       <react_native_1.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,
@@ -124,12 +135,36 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'debugging' && (<NetworkIcons_1.QrCodeIcon color={iconColor} size={14}/>)}
+                  <react_native_1.View style={{
+                    minWidth: 20,
+                    height: 20,
+                    paddingHorizontal: 4,
+                    borderRadius: 10,
+                    backgroundColor: isActive
+                        ? `${AppColors_1.AppColors.white}33`
+                        : `${AppColors_1.AppColors.purple}1F`,
+                    borderWidth: 1,
+                    borderColor: isActive
+                        ? `${AppColors_1.AppColors.white}66`
+                        : `${AppColors_1.AppColors.purple}40`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    lineHeight: 12,
+                    color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
+                }}>
+                      #{tab.id}
+                    </react_native_1.Text>
+                  </react_native_1.View>
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&

package/dist/commonjs/components/JsonViewer.js

@@ -149,10 +149,22 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
           <react_native_1.Text style={localStyles.tableCellValue}>{String(data)}</react_native_1.Text>
         </react_native_1.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 (<react_native_1.View style={localStyles.emptyTable}>
-          <react_native_1.Text style={localStyles.emptyTableText}>{t('network.jsonViewer.emptyTable')}</react_native_1.Text>
+          <react_native_1.Text style={localStyles.emptyTableText}>
+            {search && search.trim().length > 0
+                    ? 'No matching keys or values found'
+                    : t('network.jsonViewer.emptyTable')}
+          </react_native_1.Text>
         </react_native_1.View>);
         }
         return (<react_native_1.View style={localStyles.tableView}>