react-native-inapp-inspector 2.2.9 → 2.3.1

package/src/components/Inspector/CrashTab.tsx

@@ -433,9 +433,27 @@ const CrashTab = React.memo(() => {
                   autoCorrect={false}
                 />
                 {searchQuery.length > 0 && (
-                  <TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
-                    <ClearIcon color={AppColors.grayTextWeak} size={14} />
-                  </TouchableOpacity>
+                  <View style={{flexDirection: 'row', alignItems: 'center', gap: 4}}>
+                    <View
+                      style={{
+                        backgroundColor: `${AppColors.purple}20`,
+                        borderRadius: 10,
+                        paddingHorizontal: 6,
+                        paddingVertical: 1.5,
+                      }}>
+                      <Text
+                        style={{
+                          color: AppColors.purple,
+                          fontSize: 9.5,
+                          fontFamily: AppFonts.interBold,
+                        }}>
+                        {filteredList.length}
+                      </Text>
+                    </View>
+                    <TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
+                      <ClearIcon color={AppColors.grayTextWeak} size={14} />
+                    </TouchableOpacity>
+                  </View>
                 )}
               </View>
 
@@ -539,6 +557,26 @@ const CrashTab = React.memo(() => {
               ? t('crash.emptySearchSubtitle')
               : t('crash.emptySubtitle')}
           </Text>
+          {searchQuery.length > 0 && (
+            <TouchableScale
+              onPress={() => setSearchQuery('')}
+              style={{
+                marginTop: 10,
+                paddingHorizontal: 14,
+                paddingVertical: 7,
+                borderRadius: 8,
+                backgroundColor: AppColors.purple,
+              }}>
+              <Text
+                style={{
+                  fontFamily: AppFonts.interBold,
+                  fontSize: 11.5,
+                  color: AppColors.white,
+                }}>
+                Clear Search
+              </Text>
+            </TouchableScale>
+          )}
         </ScrollView>
       ) : (
         <FlatList

package/src/components/Inspector/DeviceInfoTab.tsx

@@ -86,9 +86,9 @@ const InfoRow = React.memo(
           styles.infoRow,
           isLast && {borderBottomWidth: 0},
         ]}>
-        <View style={{flex: 1, paddingRight: 8}}>
-          <View style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
-            <Text style={styles.infoLabel}>{label}</Text>
+        <View style={{flex: 1, paddingRight: 8, minWidth: 0}}>
+          <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6}}>
+            <Text style={styles.infoLabel} numberOfLines={2}>{label}</Text>
             {badge && (
               <View
                 style={[
@@ -101,9 +101,17 @@ const InfoRow = React.memo(
               </View>
             )}
           </View>
-          {subtext && <Text style={styles.infoSubtext}>{subtext}</Text>}
+          {subtext && <Text style={styles.infoSubtext} numberOfLines={2}>{subtext}</Text>}
         </View>
-        <View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            flexShrink: 0,
+            maxWidth: '58%',
+            justifyContent: 'flex-end',
+          }}>
           <Text
             style={[
               styles.infoValue,
@@ -111,7 +119,7 @@ const InfoRow = React.memo(
                 color: value ? AppColors.emerald500 : AppColors.errorColor,
               },
             ]}
-            numberOfLines={2}
+            numberOfLines={3}
             selectable>
             {displayValue}
           </Text>
@@ -446,6 +454,16 @@ export const DeviceInfoTab = React.memo(() => {
     return text.toLowerCase().includes(search.toLowerCase().trim());
   };
 
+  const hasAnyMatch = useMemo(() => {
+    if (!search.trim()) return true;
+    const query = search.toLowerCase().trim();
+    return (
+      JSON.stringify(fullDeviceData).toLowerCase().includes(query) ||
+      ipAddress.toLowerCase().includes(query) ||
+      pseudoUDID.toLowerCase().includes(query)
+    );
+  }, [search, fullDeviceData, ipAddress, pseudoUDID]);
+
   return (
     <View style={styles.container}>
       {/* ─── Top Sub-Tabs Navigation Bar ─── */}
@@ -527,11 +545,11 @@ export const DeviceInfoTab = React.memo(() => {
                 <AndroidIcon size={20} color={AppColors.white} />
               )}
             </View>
-            <View style={{flex: 1}}>
-              <Text style={styles.heroTitle}>
+            <View style={{flex: 1, minWidth: 0}}>
+              <Text style={styles.heroTitle} numberOfLines={1} ellipsizeMode="tail">
                 {deviceMetrics?.deviceModel || (Platform.constants as any)?.Model || (Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
               </Text>
-              <Text style={styles.heroSubtitle}>
+              <Text style={styles.heroSubtitle} numberOfLines={1} ellipsizeMode="tail">
                 {Platform.OS === 'ios' ? `iOS ${Platform.Version}` : `Android ${Platform.Version} (API ${deviceMetrics?.apiLevel || Platform.Version})`}
               </Text>
             </View>
@@ -544,22 +562,22 @@ export const DeviceInfoTab = React.memo(() => {
           {/* Quick Metrics Strip */}
           <View style={styles.heroMetricsStrip}>
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>IP ADDRESS</Text>
-              <Text style={styles.heroMetricValue} numberOfLines={1}>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">IP ADDRESS</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {ipAddress}
               </Text>
             </View>
             <View style={styles.heroMetricDivider} />
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>RAM (USED/TOTAL)</Text>
-              <Text style={styles.heroMetricValue}>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">RAM (USED/TOTAL)</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">
                 {usedRamMb}/{totalRamMb} MB
               </Text>
             </View>
             <View style={styles.heroMetricDivider} />
             <View style={styles.heroMetricItem}>
-              <Text style={styles.heroMetricLabel}>UPTIME</Text>
-              <Text style={styles.heroMetricValue}>{deviceUptime}</Text>
+              <Text style={styles.heroMetricLabel} numberOfLines={1} ellipsizeMode="tail">UPTIME</Text>
+              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">{deviceUptime}</Text>
             </View>
           </View>
         </View>
@@ -947,6 +965,22 @@ export const DeviceInfoTab = React.memo(() => {
           </View>
         )}
 
+        {/* Empty search results state */}
+        {search.trim().length > 0 && !hasAnyMatch && (
+          <View style={styles.emptySearchCard}>
+            <SearchIcon size={26} color={AppColors.grayTextWeak} />
+            <Text style={styles.emptySearchTitle}>No matching device specifications</Text>
+            <Text style={styles.emptySearchSubtitle}>
+              No properties matched &ldquo;{search}&rdquo;
+            </Text>
+            <TouchableScale
+              onPress={() => setSearch('')}
+              style={styles.clearSearchBtn}>
+              <Text style={styles.clearSearchBtnText}>Clear Search</Text>
+            </TouchableScale>
+          </View>
+        )}
+
         <View style={{height: 48}} />
       </ScrollView>
     </View>
@@ -1120,6 +1154,8 @@ const styles = StyleSheet.create({
   heroMetricItem: {
     flex: 1,
     alignItems: 'center',
+    paddingHorizontal: 2,
+    minWidth: 0,
   },
   heroMetricLabel: {
     fontFamily: AppFonts.interBold,
@@ -1191,7 +1227,7 @@ const styles = StyleSheet.create({
     fontFamily: AppFonts.interBold,
     fontSize: 12,
     color: AppColors.primaryBlack,
-    maxWidth: 180,
+    flexShrink: 1,
     textAlign: 'right',
   },
   rowCopyBtn: {
@@ -1199,6 +1235,41 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: AppColors.grayBackground,
   },
+  emptySearchCard: {
+    backgroundColor: AppColors.primaryLight,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    padding: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    marginTop: 8,
+  },
+  emptySearchTitle: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 13.5,
+    color: AppColors.primaryBlack,
+    textAlign: 'center',
+  },
+  emptySearchSubtitle: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 11.5,
+    color: AppColors.grayTextWeak,
+    textAlign: 'center',
+  },
+  clearSearchBtn: {
+    marginTop: 6,
+    paddingHorizontal: 14,
+    paddingVertical: 6.5,
+    borderRadius: 8,
+    backgroundColor: AppColors.purple,
+  },
+  clearSearchBtnText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 11,
+    color: AppColors.white,
+  },
 });
 
 export default DeviceInfoTab;

package/src/components/Inspector/InspectorHeader.tsx

@@ -18,7 +18,14 @@ import {AppFonts} from '../../styles/AppFonts';
 import {METHOD_COLORS} from '../../constants';
 import {LIB_VERSION} from '../../constants';
 import {Method} from '../../types';
-import {getStatusColor, getAppName, formatTime, getSize} from '../../helpers';
+import {
+  getStatusColor,
+  getAppName,
+  formatTime,
+  getSize,
+  getAppVersionAndBuild,
+} from '../../helpers';
+import {getNativeDeviceMetrics} from '../../native/NativeInspector';
 import {UpdateAvailableModal} from './UpdateAvailableModal';
 import {
   WhiteBackNavigation,
@@ -71,6 +78,21 @@ const InspectorHeader = React.memo(() => {
   } = useInspector();
 
   const [showUpdateModal, setShowUpdateModal] = React.useState<boolean>(false);
+  const [appVersionString, setAppVersionString] = React.useState<string>(() => {
+    return getAppVersionAndBuild().formatted;
+  });
+
+  React.useEffect(() => {
+    getNativeDeviceMetrics()
+      .then(metrics => {
+        if (metrics?.appVersion) {
+          const v = metrics.appVersion;
+          const b = metrics.appBuild || '1';
+          setAppVersionString(`${v} (${b})`);
+        }
+      })
+      .catch(() => {});
+  }, []);
 
   const envConfig = useMemo(() => {
     const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
@@ -375,9 +397,7 @@ const InspectorHeader = React.memo(() => {
                           letterSpacing: 0.1,
                         }}
                         numberOfLines={1}>
-                        {Platform.OS === 'ios'
-                          ? `iOS ${Platform.Version}`
-                          : `Android ${Platform.Version}`}
+                        {appVersionString}
                       </Text>
                     </View>
 

package/src/components/Inspector/MainScreen.tsx

@@ -21,6 +21,7 @@ import LogDetail from './LogDetail';
 import ConsoleTab from './ConsoleTab';
 import AnalyticsTab from './AnalyticsTab';
 import AnalyticsDetail from '../AnalyticsDetail';
+import SkeletonPlaceholder from '../SkeletonPlaceholder';
 import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';
@@ -51,7 +52,7 @@ const MainScreen = () => {
     settingsPage,
     activeTab,
     isReady,
-    isEnabled,
+    enabled,
     useNativeFab,
     hasNavigationContext,
     setNavState,
@@ -104,7 +105,7 @@ const MainScreen = () => {
   return (
     <>
       {(Platform.OS === 'ios' || Platform.OS === 'android') &&
-        isEnabled &&
+        enabled &&
         !visible &&
         !useNativeFab && <FabLauncher />}
       <Modal
@@ -137,11 +138,11 @@ const MainScreen = () => {
               <InspectorHeader />
 
               <View style={{flex: 1}}>
+                {/* ─── Horizontal Scrollable Tab Bar inside Content (Always visible) ─── */}
+                {!isDetailActive && <TabBar />}
+
                 {isReady ? (
                   <View style={{flex: 1}}>
-                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-                    {!isDetailActive && <TabBar />}
-
                     {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
                     <Animated.View
                       style={[
@@ -207,12 +208,7 @@ const MainScreen = () => {
                     )}
                   </View>
                 ) : (
-                  <View style={styles.empty}>
-                    <ActivityIndicator size="large" color={AppColors.purple} />
-                    <Text style={[styles.emptySub, {marginTop: 12}]}>
-                      Loading logs...
-                    </Text>
-                  </View>
+                  <SkeletonPlaceholder />
                 )}
 
                 {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}

package/src/components/Inspector/NetworkDetail.tsx

@@ -568,10 +568,10 @@ const NetworkDetail = React.memo(() => {
             />
 
             {(() => {
-              const routeInfo = logRouteMapRef.current.get(
-                selected.id,
-              );
-              if (!routeInfo || routeInfo.path === 'Navigators')
+              const routeInfo =
+                logRouteMapRef.current.get(selected.id) ||
+                (selected as any)?.routeInfo;
+              if (!routeInfo || !routeInfo.path || routeInfo.path === 'Navigators')
                 return null;
               return <SourcePageCard routeInfo={routeInfo} />;
             })()}

package/src/components/Inspector/NetworkTab.tsx

@@ -665,7 +665,7 @@ const NetworkTab = React.memo(() => {
                       style={{
                         backgroundColor: `${AppColors.purple}20`,
                         borderRadius: 10,
-                        paddingHorizontal: 5,
+                        paddingHorizontal: 6,
                         paddingVertical: 1.5,
                       }}>
                       <Text
@@ -759,19 +759,130 @@ const NetworkTab = React.memo(() => {
                       styles.toolbarBtnActive,
                   ]}
                   onPress={filtersAccordion.toggleOpen}
-                  hitSlop={10}>
+                  hitSlop={6}>
                   <FilterIcon
                     color={
                       filtersAccordion.isOpen
                         ? AppColors.purple
                         : AppColors.grayTextStrong
                     }
-                    size={18}
+                    size={16}
                   />
+                  {(statusFilters.size > 0 ||
+                    methodFilters.size > 0) && (
+                    <View style={styles.activeFilterDot} />
+                  )}
                 </TouchableScale>
               </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
@@ -1138,8 +1249,22 @@ const NetworkTab = React.memo(() => {
         ListEmptyComponent={
           <EmptyState
             isSearch={
-              search.length > 0 || statusFilters.size > 0
+              search.length > 0 ||
+              statusFilters.size > 0 ||
+              methodFilters.size > 0
+            }
+            searchQuery={search}
+            customTitle={
+              search.length > 0
+                ? 'No matching API requests'
+                : 'No network activity'
             }
+            onClearSearch={() => {
+              setSearch('');
+              setStatusFilters(new Set());
+              setMethodFilters(new Set());
+              setSearchScope('all');
+            }}
           />
         }
         ListFooterComponent={

package/src/components/Inspector/ReduxTab.tsx

@@ -548,14 +548,32 @@ const ReduxTab = React.memo(() => {
               autoCapitalize="none"
             />
             {reduxSearch.length > 0 && (
-              <Pressable
-                accessible={true}
-                accessibilityRole="button"
-                accessibilityLabel="Clear search input"
-                onPress={() => setReduxSearch('')}
-                hitSlop={10}>
-                <ClearIcon color={AppColors.grayTextWeak} size={14} />
-              </Pressable>
+              <View style={{flexDirection: 'row', alignItems: 'center', gap: 4}}>
+                <View
+                  style={{
+                    backgroundColor: `${AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 1.5,
+                  }}>
+                  <Text
+                    style={{
+                      color: AppColors.purple,
+                      fontSize: 9.5,
+                      fontFamily: AppFonts.interBold,
+                    }}>
+                    {filteredSlices.length}
+                  </Text>
+                </View>
+                <Pressable
+                  accessible={true}
+                  accessibilityRole="button"
+                  accessibilityLabel="Clear search input"
+                  onPress={() => setReduxSearch('')}
+                  hitSlop={10}>
+                  <ClearIcon color={AppColors.grayTextWeak} size={14} />
+                </Pressable>
+              </View>
             )}
           </View>
 

package/src/components/Inspector/SettingsPanel.tsx

@@ -207,8 +207,8 @@ const SettingsPanel = () => {
     bundle: Boolean(tabVisibility?.bundle),
     performance: Boolean(tabVisibility?.performance),
     crash: Boolean(tabVisibility?.crash),
-    device: Boolean(tabVisibility?.device ?? true),
-    storage: Boolean(tabVisibility?.storage ?? true),
+    device: Boolean(tabVisibility?.device),
+    storage: Boolean(tabVisibility?.storage),
   }));
 
   // Synchronize staged state with tabVisibility when tabVisibility updates
@@ -221,8 +221,8 @@ const SettingsPanel = () => {
       bundle: Boolean(tabVisibility?.bundle),
       performance: Boolean(tabVisibility?.performance),
       crash: Boolean(tabVisibility?.crash),
-      device: Boolean(tabVisibility?.device ?? true),
-      storage: Boolean(tabVisibility?.storage ?? true),
+      device: Boolean(tabVisibility?.device),
+      storage: Boolean(tabVisibility?.storage),
     });
   }, [tabVisibility]);