react-native-inapp-inspector 2.3.14 → 2.3.15

package/src/components/Inspector/MainScreen.tsx

@@ -113,8 +113,8 @@ const MainScreen = () => {
         visible={visible}
         animationType={modalAnimationType}
         transparent
-        statusBarTranslucent={true}>
-      {visible && (
+        statusBarTranslucent={true}
+        onRequestClose={closeModal}>
         <ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
             <Pressable
@@ -246,7 +246,6 @@ const MainScreen = () => {
             </View>
           </View>
         </ErrorBoundary>
-      )}
       {hasNavigationContext && (
         <NavigationTracker onStateChange={setNavState} />
       )}

package/src/components/Inspector/NetworkTab.tsx

@@ -227,94 +227,6 @@ const NetworkTab = React.memo(() => {
     [quickCounts],
   );
 
-  const SEARCH_SCOPES: Array<{
-    id: SearchScope;
-    label: string;
-    icon: (color: string) => React.JSX.Element;
-  }> = [
-    {
-      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: string) => <CircleXIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'Slow (>1s)',
-        query: 'slow:>1s',
-        icon: (color: string) => <ClockIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'POST',
-        query: 'm:POST',
-        icon: (color: string) => <RequestIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'GET',
-        query: 'm:GET',
-        icon: (color: string) => <ResponseIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'GraphQL',
-        query: 'is:graphql',
-        icon: (color: string) => <AtomIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'Axios',
-        query: 'client:axios',
-        icon: (color: string) => <BoltIcon size={9.5} color={color} />,
-      },
-      {
-        label: '200 OK',
-        query: 'status:200',
-        icon: (color: string) => <CircleCheckIcon size={9.5} color={color} />,
-      },
-      {
-        label: '404',
-        query: 'status:404',
-        icon: (color: string) => <CircleAlertIcon size={9.5} color={color} />,
-      },
-      {
-        label: '500',
-        query: 'status:500',
-        icon: (color: string) => <CircleXIcon size={9.5} color={color} />,
-      },
-      {
-        label: 'HTTPS',
-        query: 'is:https',
-        icon: (color: string) => <ShieldAlertIcon size={9.5} color={color} />,
-      },
-    ],
-    [],
-  );
-
   const networkMetrics = useMemo(() => {
     if (!logs || logs.length === 0) return null;
     let successCount = 0;
@@ -523,7 +435,7 @@ const NetworkTab = React.memo(() => {
                   size={15}
                 />
                 <TextInput
-                  placeholder="Search url, body, is:error, slow:>1s..."
+                  placeholder="Search URL, status, method, headers, body..."
                   placeholderTextColor={AppColors.grayTextWeak}
                   value={search}
                   onChangeText={setSearch}
@@ -534,69 +446,6 @@ const NetworkTab = React.memo(() => {
                   autoCapitalize="none"
                 />
 
-                {/* Match Case (Aa) & Regex (.*) Quick Toggles */}
-                <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>
-
                 {search.length > 0 && (
                   <View
                     style={{
@@ -721,113 +570,6 @@ const NetworkTab = React.memo(() => {
               </View>
             </View>
 
-            {/* Quick Search Scope & Filter Tags Row */}
-            <View style={{paddingBottom: 4}}>
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                contentContainerStyle={{
-                  paddingHorizontal: 12,
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  gap: 5,
-                  paddingVertical: 2,
-                }}>
-                {/* Search Scopes */}
-                {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 Query Suggestions */}
-                {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>
-
             {/* Quick Filter Horizontal Chips Bar with Live Counts */}
             <View style={{marginBottom: 8}}>
               <ScrollView
@@ -967,138 +709,6 @@ const NetworkTab = React.memo(() => {
               </ScrollView>
             </View>
 
-            {/* Search Scope Selector Bar (Visible on search or focus) */}
-            {(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>
-            )}
-
-            {/* Advanced Search Quick Query Suggestions Bar */}
-            {(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>
-            )}
-
             {/* Active Filter Helper Status Bar */}
             {(quickFilter !== 'all' ||
               search.trim().length > 0 ||
@@ -1145,17 +755,6 @@ const NetworkTab = React.memo(() => {
                 </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={

package/src/components/Inspector/PerformanceTab.tsx

@@ -248,11 +248,19 @@ const PerformanceTab = React.memo(() => {
   // Filtered Events
   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'
@@ -1052,10 +1060,31 @@ 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 => {

package/src/components/Inspector/ReduxTab.tsx

@@ -670,7 +670,15 @@ const ReduxTab = React.memo(() => {
         renderToHardwareTextureAndroid={true}
         ListEmptyComponent={
           <EmptyState
-            isSearch={reduxSearch.length > 0}
+            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={

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,13 +586,32 @@ 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}} />}

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