react-native-inapp-inspector 2.3.14 → 2.3.15

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

@@ -13,7 +13,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, GlobeIcon, RequestIcon, ResponseIcon, HeadersIcon, AtomIcon, BoltIcon, ShieldAlertIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, LayersIcon, HeaderPauseIcon, ClockIcon, RequestIcon, ResponseIcon, AtomIcon, } from '../NetworkIcons';
 const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
@@ -135,85 +135,6 @@ const NetworkTab = React.memo(() => {
             color: '#E10098',
         },
     ], [quickCounts]);
-    const SEARCH_SCOPES = [
-        {
-            id: 'all',
-            label: 'All',
-            icon: color => <LayersIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'url',
-            label: 'URL / Path',
-            icon: color => <GlobeIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'reqBody',
-            label: 'Payload',
-            icon: color => <RequestIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'resBody',
-            label: 'Response',
-            icon: color => <ResponseIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'headers',
-            label: 'Headers',
-            icon: color => <HeadersIcon size={9.5} color={color}/>,
-        },
-    ];
-    const QUICK_API_QUERY_TAGS = useMemo(() => [
-        {
-            label: 'Failed',
-            query: 'is:error',
-            icon: (color) => <CircleXIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'Slow (>1s)',
-            query: 'slow:>1s',
-            icon: (color) => <ClockIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'POST',
-            query: 'm:POST',
-            icon: (color) => <RequestIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'GET',
-            query: 'm:GET',
-            icon: (color) => <ResponseIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'GraphQL',
-            query: 'is:graphql',
-            icon: (color) => <AtomIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'Axios',
-            query: 'client:axios',
-            icon: (color) => <BoltIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '200 OK',
-            query: 'status:200',
-            icon: (color) => <CircleCheckIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '404',
-            query: 'status:404',
-            icon: (color) => <CircleAlertIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '500',
-            query: 'status:500',
-            icon: (color) => <CircleXIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'HTTPS',
-            query: 'is:https',
-            icon: (color) => <ShieldAlertIcon size={9.5} color={color}/>,
-        },
-    ], []);
     const networkMetrics = useMemo(() => {
         if (!logs || logs.length === 0)
             return null;
@@ -359,61 +280,7 @@ const NetworkTab = React.memo(() => {
                 <SearchIcon color={isSearchFocused
                 ? AppColors.purple
                 : AppColors.grayTextWeak} size={15}/>
-                <TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-
-                
-                <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3,
-                marginRight: 2,
-            }}>
-                  <Pressable hitSlop={8} onPress={() => setIsCaseSensitive(prev => !prev)} style={{
-                paddingHorizontal: 4.5,
-                paddingVertical: 2,
-                borderRadius: 4,
-                backgroundColor: isCaseSensitive
-                    ? AppColors.purple
-                    : 'transparent',
-                borderWidth: 1,
-                borderColor: isCaseSensitive
-                    ? AppColors.purple
-                    : `${AppColors.grayBorderSecondary}`,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: isCaseSensitive
-                    ? AppColors.white
-                    : AppColors.grayTextWeak,
-            }}>
-                      Aa
-                    </Text>
-                  </Pressable>
-
-                  <Pressable hitSlop={8} onPress={() => setIsRegexSearch(prev => !prev)} style={{
-                paddingHorizontal: 4.5,
-                paddingVertical: 2,
-                borderRadius: 4,
-                backgroundColor: isRegexSearch
-                    ? AppColors.purple
-                    : 'transparent',
-                borderWidth: 1,
-                borderColor: isRegexSearch
-                    ? AppColors.purple
-                    : `${AppColors.grayBorderSecondary}`,
-            }}>
-                    <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: isRegexSearch
-                    ? AppColors.white
-                    : AppColors.grayTextWeak,
-            }}>
-                      .*
-                    </Text>
-                  </Pressable>
-                </View>
+                <TextInput placeholder="Search URL, status, method, headers, body..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
 
                 {search.length > 0 && (<View style={{
                     flexDirection: 'row',
@@ -489,94 +356,6 @@ const NetworkTab = React.memo(() => {
             </View>
 
             
-            <View style={{ paddingBottom: 4 }}>
-              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                paddingHorizontal: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 5,
-                paddingVertical: 2,
-            }}>
-                
-                {SEARCH_SCOPES.map(s => {
-                const isActive = searchScope === s.id;
-                return (<TouchableScale key={`scope_${s.id}`} onPress={() => setSearchScope(s.id)} hitSlop={6} style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 3.5,
-                        paddingHorizontal: 7.5,
-                        paddingVertical: 3.5,
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                            ? AppColors.purple
-                            : AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                            ? AppColors.purple
-                            : AppColors.grayBorderSecondary,
-                    }}>
-                      {s.icon(isActive ? AppColors.white : AppColors.grayTextWeak)}
-                      <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 10,
-                        color: isActive ? AppColors.white : AppColors.grayText,
-                    }}>
-                        {s.label}
-                      </Text>
-                    </TouchableScale>);
-            })}
-
-                <View style={{
-                width: 1,
-                height: 14,
-                backgroundColor: AppColors.dividerColor,
-                marginHorizontal: 3,
-            }}/>
-
-                
-                {QUICK_API_QUERY_TAGS.map(q => {
-                const isActive = search.includes(q.query);
-                return (<TouchableScale key={`quick_${q.query}`} onPress={() => {
-                        setSearch(prev => {
-                            if (prev.includes(q.query)) {
-                                return prev
-                                    .replace(q.query, '')
-                                    .replace(/\s+/g, ' ')
-                                    .trim();
-                            }
-                            return `${prev} ${q.query}`.trim();
-                        });
-                    }} hitSlop={6} style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 3.5,
-                        paddingHorizontal: 7.5,
-                        paddingVertical: 3.5,
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                            ? `${AppColors.purple}20`
-                            : AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                            ? AppColors.purple
-                            : AppColors.grayBorderSecondary,
-                    }}>
-                      {q.icon(isActive ? AppColors.purple : AppColors.grayTextWeak)}
-                      <Text style={{
-                        fontFamily: AppFonts.interMedium,
-                        fontSize: 10,
-                        color: isActive
-                            ? AppColors.purple
-                            : AppColors.grayText,
-                    }}>
-                        {q.label}
-                      </Text>
-                    </TouchableScale>);
-            })}
-              </ScrollView>
-            </View>
-
-            
             <View style={{ marginBottom: 8 }}>
               <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
                 paddingHorizontal: 12,
@@ -690,110 +469,6 @@ const NetworkTab = React.memo(() => {
             </View>
 
             
-            {(isSearchFocused || search.length > 0) && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingHorizontal: 12,
-                    marginBottom: 6,
-                    gap: 6,
-                }}>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.grayTextWeak,
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.5,
-                }}>
-                  Scope:
-                </Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                }}>
-                  {SEARCH_SCOPES.map(s => {
-                    const isSelected = searchScope === s.id;
-                    const iconColor = isSelected ? AppColors.white : AppColors.grayText;
-                    return (<TouchableScale key={s.id} onPress={() => setSearchScope(s.id)}>
-                        <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 7,
-                            paddingVertical: 2.5,
-                            borderRadius: 5,
-                            backgroundColor: isSelected
-                                ? AppColors.purple
-                                : `${AppColors.grayBorderSecondary}40`,
-                            borderWidth: 1,
-                            borderColor: isSelected
-                                ? AppColors.purple
-                                : AppColors.grayBorderSecondary,
-                        }}>
-                          {s.icon(iconColor)}
-                          <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isSelected
-                                ? AppColors.white
-                                : AppColors.grayText,
-                        }}>
-                            {s.label}
-                          </Text>
-                        </View>
-                      </TouchableScale>);
-                })}
-                </ScrollView>
-              </View>)}
-
-            
-            {(isSearchFocused || search.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 8, maxHeight: 28 }} contentContainerStyle={{
-                    paddingHorizontal: 12,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                }}>
-                {QUICK_API_QUERY_TAGS.map(item => {
-                    const isSelected = search.includes(item.query);
-                    return (<TouchableScale key={item.query} onPress={() => {
-                            if (isSelected) {
-                                setSearch(prev => prev.replace(item.query, '').trim());
-                            }
-                            else {
-                                setSearch(prev => prev ? `${prev} ${item.query}`.trim() : item.query);
-                            }
-                        }}>
-                      <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 7,
-                            paddingVertical: 2.5,
-                            borderRadius: 5,
-                            backgroundColor: isSelected
-                                ? AppColors.purple
-                                : `${AppColors.purple}14`,
-                            borderWidth: 1,
-                            borderColor: isSelected
-                                ? AppColors.purple
-                                : `${AppColors.purple}30`,
-                        }}>
-                        {item.icon(isSelected ? AppColors.white : AppColors.purple)}
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isSelected
-                                ? AppColors.white
-                                : AppColors.purple,
-                        }}>
-                          {item.label}
-                        </Text>
-                      </View>
-                    </TouchableScale>);
-                })}
-              </ScrollView>)}
-
-            
             {(quickFilter !== 'all' ||
                 search.trim().length > 0 ||
                 statusFilters.size > 0 ||
@@ -833,15 +508,6 @@ const NetworkTab = React.memo(() => {
                   </Text>
                 </TouchableScale>
               </View>)}
-
-            {(search ||
-                statusFilters.size > 0 ||
-                methodFilters.size > 0 ||
-                quickFilter !== 'all') && (<Text style={styles.resultCount}>
-                {filteredLogs.length === logs.length
-                    ? `${logs.length} requests`
-                    : `${filteredLogs.length} of ${logs.length} filtered requests`}
-              </Text>)}
           </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
                 methodFilters.size > 0 ||

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

@@ -148,10 +148,19 @@ const PerformanceTab = React.memo(() => {
     }, [isRecording]);
     const filteredEvents = useMemo(() => {
         return events.filter(e => {
-            const matchSearch = !search ||
-                e.label.toLowerCase().includes(search.toLowerCase()) ||
-                e.detail.toLowerCase().includes(search.toLowerCase()) ||
-                (e.source && e.source.toLowerCase().includes(search.toLowerCase()));
+            let matchSearch = true;
+            if (search && search.trim().length > 0) {
+                const queryTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
+                const corpus = [
+                    e.label || '',
+                    e.detail || '',
+                    e.source || '',
+                    e.category || '',
+                    e.severity || '',
+                    e.bottleneckThread || '',
+                ].join(' ').toLowerCase();
+                matchSearch = queryTokens.every(tok => corpus.includes(tok));
+            }
             const matchFilter = filterCategory === 'ALL'
                 ? true
                 : filterCategory === 'JANKY'
@@ -776,10 +785,27 @@ const PerformanceTab = React.memo(() => {
 
         {filteredEvents.length === 0 ? (<View style={perfStyles.emptyCard}>
             <BoltIcon color={AppColors.amber500} size={30}/>
-            <Text style={perfStyles.emptyTitle}>{t('performance.emptyTitle')}</Text>
+            <Text style={perfStyles.emptyTitle}>
+              {search.trim().length > 0 ? 'No Matching Events' : t('performance.emptyTitle')}
+            </Text>
             <Text style={perfStyles.emptySub}>
-              {t('performance.emptySubtitle')}
+              {search.trim().length > 0
+                ? `No performance events match "${search}"`
+                : t('performance.emptySubtitle')}
             </Text>
+            {search.trim().length > 0 && (<TouchableScale onPress={() => setSearch('')} style={{
+                    marginTop: 10,
+                    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>) : (filteredEvents.map(event => {
             const isOptimal = event.severity === 'optimal';
             const isWarning = event.severity === 'warning';

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

@@ -454,7 +454,9 @@ const ReduxTab = React.memo(() => {
       </View>
 
       
-      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
+                ? `No Redux slices match "${reduxSearch}"`
+                : 'Attach the Redux store or dispatch actions to see state slices.'}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

@@ -232,8 +232,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,13 +374,28 @@ 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={() => {

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