react-native-inapp-inspector 2.3.14 → 2.3.15

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

@@ -173,85 +173,6 @@ const NetworkTab = react_1.default.memo(() => {
             color: '#E10098',
         },
     ], [quickCounts]);
-    const SEARCH_SCOPES = [
-        {
-            id: 'all',
-            label: 'All',
-            icon: color => <NetworkIcons_1.LayersIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'url',
-            label: 'URL / Path',
-            icon: color => <NetworkIcons_1.GlobeIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'reqBody',
-            label: 'Payload',
-            icon: color => <NetworkIcons_1.RequestIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'resBody',
-            label: 'Response',
-            icon: color => <NetworkIcons_1.ResponseIcon size={9.5} color={color}/>,
-        },
-        {
-            id: 'headers',
-            label: 'Headers',
-            icon: color => <NetworkIcons_1.HeadersIcon size={9.5} color={color}/>,
-        },
-    ];
-    const QUICK_API_QUERY_TAGS = (0, react_1.useMemo)(() => [
-        {
-            label: 'Failed',
-            query: 'is:error',
-            icon: (color) => <NetworkIcons_1.CircleXIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'Slow (>1s)',
-            query: 'slow:>1s',
-            icon: (color) => <NetworkIcons_1.ClockIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'POST',
-            query: 'm:POST',
-            icon: (color) => <NetworkIcons_1.RequestIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'GET',
-            query: 'm:GET',
-            icon: (color) => <NetworkIcons_1.ResponseIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'GraphQL',
-            query: 'is:graphql',
-            icon: (color) => <NetworkIcons_1.AtomIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'Axios',
-            query: 'client:axios',
-            icon: (color) => <NetworkIcons_1.BoltIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '200 OK',
-            query: 'status:200',
-            icon: (color) => <NetworkIcons_1.CircleCheckIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '404',
-            query: 'status:404',
-            icon: (color) => <NetworkIcons_1.CircleAlertIcon size={9.5} color={color}/>,
-        },
-        {
-            label: '500',
-            query: 'status:500',
-            icon: (color) => <NetworkIcons_1.CircleXIcon size={9.5} color={color}/>,
-        },
-        {
-            label: 'HTTPS',
-            query: 'is:https',
-            icon: (color) => <NetworkIcons_1.ShieldAlertIcon size={9.5} color={color}/>,
-        },
-    ], []);
     const networkMetrics = (0, react_1.useMemo)(() => {
         if (!logs || logs.length === 0)
             return null;
@@ -397,61 +318,7 @@ const NetworkTab = react_1.default.memo(() => {
                 <NetworkIcons_1.SearchIcon color={isSearchFocused
                 ? AppColors_1.AppColors.purple
                 : AppColors_1.AppColors.grayTextWeak} size={15}/>
-                <react_native_1.TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-
-                
-                <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3,
-                marginRight: 2,
-            }}>
-                  <react_native_1.Pressable hitSlop={8} onPress={() => setIsCaseSensitive(prev => !prev)} style={{
-                paddingHorizontal: 4.5,
-                paddingVertical: 2,
-                borderRadius: 4,
-                backgroundColor: isCaseSensitive
-                    ? AppColors_1.AppColors.purple
-                    : 'transparent',
-                borderWidth: 1,
-                borderColor: isCaseSensitive
-                    ? AppColors_1.AppColors.purple
-                    : `${AppColors_1.AppColors.grayBorderSecondary}`,
-            }}>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9.5,
-                color: isCaseSensitive
-                    ? AppColors_1.AppColors.white
-                    : AppColors_1.AppColors.grayTextWeak,
-            }}>
-                      Aa
-                    </react_native_1.Text>
-                  </react_native_1.Pressable>
-
-                  <react_native_1.Pressable hitSlop={8} onPress={() => setIsRegexSearch(prev => !prev)} style={{
-                paddingHorizontal: 4.5,
-                paddingVertical: 2,
-                borderRadius: 4,
-                backgroundColor: isRegexSearch
-                    ? AppColors_1.AppColors.purple
-                    : 'transparent',
-                borderWidth: 1,
-                borderColor: isRegexSearch
-                    ? AppColors_1.AppColors.purple
-                    : `${AppColors_1.AppColors.grayBorderSecondary}`,
-            }}>
-                    <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 9.5,
-                color: isRegexSearch
-                    ? AppColors_1.AppColors.white
-                    : AppColors_1.AppColors.grayTextWeak,
-            }}>
-                      .*
-                    </react_native_1.Text>
-                  </react_native_1.Pressable>
-                </react_native_1.View>
+                <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
 
                 {search.length > 0 && (<react_native_1.View style={{
                     flexDirection: 'row',
@@ -527,94 +394,6 @@ const NetworkTab = react_1.default.memo(() => {
             </react_native_1.View>
 
             
-            <react_native_1.View style={{ paddingBottom: 4 }}>
-              <react_native_1.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_1.default 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_1.AppColors.purple
-                            : AppColors_1.AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                            ? AppColors_1.AppColors.purple
-                            : AppColors_1.AppColors.grayBorderSecondary,
-                    }}>
-                      {s.icon(isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextWeak)}
-                      <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 10,
-                        color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
-                    }}>
-                        {s.label}
-                      </react_native_1.Text>
-                    </TouchableScale_1.default>);
-            })}
-
-                <react_native_1.View style={{
-                width: 1,
-                height: 14,
-                backgroundColor: AppColors_1.AppColors.dividerColor,
-                marginHorizontal: 3,
-            }}/>
-
-                
-                {QUICK_API_QUERY_TAGS.map(q => {
-                const isActive = search.includes(q.query);
-                return (<TouchableScale_1.default 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_1.AppColors.purple}20`
-                            : AppColors_1.AppColors.grayBackground,
-                        borderWidth: 1,
-                        borderColor: isActive
-                            ? AppColors_1.AppColors.purple
-                            : AppColors_1.AppColors.grayBorderSecondary,
-                    }}>
-                      {q.icon(isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak)}
-                      <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interMedium,
-                        fontSize: 10,
-                        color: isActive
-                            ? AppColors_1.AppColors.purple
-                            : AppColors_1.AppColors.grayText,
-                    }}>
-                        {q.label}
-                      </react_native_1.Text>
-                    </TouchableScale_1.default>);
-            })}
-              </react_native_1.ScrollView>
-            </react_native_1.View>
-
-            
             <react_native_1.View style={{ marginBottom: 8 }}>
               <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
                 paddingHorizontal: 12,
@@ -728,110 +507,6 @@ const NetworkTab = react_1.default.memo(() => {
             </react_native_1.View>
 
             
-            {(isSearchFocused || search.length > 0) && (<react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingHorizontal: 12,
-                    marginBottom: 6,
-                    gap: 6,
-                }}>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.5,
-                }}>
-                  Scope:
-                </react_native_1.Text>
-                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                }}>
-                  {SEARCH_SCOPES.map(s => {
-                    const isSelected = searchScope === s.id;
-                    const iconColor = isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText;
-                    return (<TouchableScale_1.default key={s.id} onPress={() => setSearchScope(s.id)}>
-                        <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 7,
-                            paddingVertical: 2.5,
-                            borderRadius: 5,
-                            backgroundColor: isSelected
-                                ? AppColors_1.AppColors.purple
-                                : `${AppColors_1.AppColors.grayBorderSecondary}40`,
-                            borderWidth: 1,
-                            borderColor: isSelected
-                                ? AppColors_1.AppColors.purple
-                                : AppColors_1.AppColors.grayBorderSecondary,
-                        }}>
-                          {s.icon(iconColor)}
-                          <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isSelected
-                                ? AppColors_1.AppColors.white
-                                : AppColors_1.AppColors.grayText,
-                        }}>
-                            {s.label}
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                      </TouchableScale_1.default>);
-                })}
-                </react_native_1.ScrollView>
-              </react_native_1.View>)}
-
-            
-            {(isSearchFocused || search.length > 0) && (<react_native_1.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_1.default key={item.query} onPress={() => {
-                            if (isSelected) {
-                                setSearch(prev => prev.replace(item.query, '').trim());
-                            }
-                            else {
-                                setSearch(prev => prev ? `${prev} ${item.query}`.trim() : item.query);
-                            }
-                        }}>
-                      <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            paddingHorizontal: 7,
-                            paddingVertical: 2.5,
-                            borderRadius: 5,
-                            backgroundColor: isSelected
-                                ? AppColors_1.AppColors.purple
-                                : `${AppColors_1.AppColors.purple}14`,
-                            borderWidth: 1,
-                            borderColor: isSelected
-                                ? AppColors_1.AppColors.purple
-                                : `${AppColors_1.AppColors.purple}30`,
-                        }}>
-                        {item.icon(isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple)}
-                        <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isSelected
-                                ? AppColors_1.AppColors.white
-                                : AppColors_1.AppColors.purple,
-                        }}>
-                          {item.label}
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                    </TouchableScale_1.default>);
-                })}
-              </react_native_1.ScrollView>)}
-
-            
             {(quickFilter !== 'all' ||
                 search.trim().length > 0 ||
                 statusFilters.size > 0 ||
@@ -871,15 +546,6 @@ const NetworkTab = react_1.default.memo(() => {
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>)}
-
-            {(search ||
-                statusFilters.size > 0 ||
-                methodFilters.size > 0 ||
-                quickFilter !== 'all') && (<react_native_1.Text style={styles_1.default.resultCount}>
-                {filteredLogs.length === logs.length
-                    ? `${logs.length} requests`
-                    : `${filteredLogs.length} of ${logs.length} filtered requests`}
-              </react_native_1.Text>)}
           </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
                 methodFilters.size > 0 ||

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

@@ -186,10 +186,19 @@ const PerformanceTab = react_1.default.memo(() => {
     }, [isRecording]);
     const filteredEvents = (0, react_1.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'
@@ -814,10 +823,27 @@ const PerformanceTab = react_1.default.memo(() => {
 
         {filteredEvents.length === 0 ? (<react_native_1.View style={perfStyles.emptyCard}>
             <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500} size={30}/>
-            <react_native_1.Text style={perfStyles.emptyTitle}>{t('performance.emptyTitle')}</react_native_1.Text>
+            <react_native_1.Text style={perfStyles.emptyTitle}>
+              {search.trim().length > 0 ? 'No Matching Events' : t('performance.emptyTitle')}
+            </react_native_1.Text>
             <react_native_1.Text style={perfStyles.emptySub}>
-              {t('performance.emptySubtitle')}
+              {search.trim().length > 0
+                ? `No performance events match "${search}"`
+                : t('performance.emptySubtitle')}
             </react_native_1.Text>
+            {search.trim().length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')} style={{
+                    marginTop: 10,
+                    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>) : (filteredEvents.map(event => {
             const isOptimal = event.severity === 'optimal';
             const isWarning = event.severity === 'warning';

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

@@ -492,7 +492,9 @@ const ReduxTab = react_1.default.memo(() => {
       </react_native_1.View>
 
       
-      <react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+      <react_native_1.FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default 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_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

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

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