react-native-inapp-inspector 2.2.8 → 2.3.0

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/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]);
 

package/src/components/Inspector/StorageTab.tsx

@@ -357,9 +357,27 @@ export const StorageTab = React.memo(() => {
             clearButtonMode="while-editing"
           />
           {search.length > 0 && (
-            <TouchableScale onPress={() => setSearch('')} hitSlop={8}>
-              <ClearIcon size={13} color={AppColors.grayTextWeak} />
-            </TouchableScale>
+            <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,
+                  }}>
+                  {filteredEntries.length}
+                </Text>
+              </View>
+              <TouchableScale onPress={() => setSearch('')} hitSlop={8}>
+                <ClearIcon size={13} color={AppColors.grayTextWeak} />
+              </TouchableScale>
+            </View>
           )}
         </View>
 

package/src/components/JsonViewer.tsx

@@ -6,6 +6,7 @@ import {useTranslation} from '../i18n';
 import TreeNode from './TreeNode';
 import SegmentedTabs from './SegmentedTabs';
 import HighlightText from './HighlightText';
+import CopyButton from './CopyButton';
 import {PrettyIcon, RawIcon, TableIcon} from './NetworkIcons';
 
 // Styles
@@ -260,6 +261,7 @@ const JsonViewer = React.memo(({
               setMode(key as 'pretty' | 'raw' | 'table')
             }
           />
+          <CopyButton value={data} label="JSON" />
         </View>
       )}
 

package/src/components/MetaAccordion.tsx

@@ -27,6 +27,7 @@ import {
 
 // Components
 import TouchableScale from './TouchableScale';
+import CopyButton from './CopyButton';
 
 // Stylesheet
 import {AppColors} from '../styles/AppColors';
@@ -97,9 +98,23 @@ const MetaAccordion = ({
       <Pressable onPress={toggleOpen} hitSlop={12}>
         <View style={styles.metaHeader}>
           <Text style={styles.metaTitle}>Metadata</Text>
-          <Animated.View style={chevronStyle}>
-            <ChevronIcon color={AppColors.grayTextWeak} size={14} />
-          </Animated.View>
+          <View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
+            <CopyButton
+              value={{
+                status: status ?? 0,
+                duration: duration != null ? `${duration} ms` : '—',
+                size: size || '—',
+                triggeredAt: triggeredAt || '',
+                method: method || 'GET',
+                contentType: contentType || 'application/json',
+                url: url || '',
+              }}
+              label="Metadata"
+            />
+            <Animated.View style={chevronStyle}>
+              <ChevronIcon color={AppColors.grayTextWeak} size={14} />
+            </Animated.View>
+          </View>
         </View>
       </Pressable>
 

package/src/constants/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.2.8';
+export const LIB_VERSION = '2.3.0';

package/src/customHooks/networkLogger.ts

@@ -1,5 +1,6 @@
 import axios from "axios";
 import {setupGlobalCrashHandler} from "./crashHandler";
+import {RouteInfo} from "../types";
 
 type NetworkLog = {
   id: number;
@@ -14,12 +15,20 @@ type NetworkLog = {
   client?: string; // ✅ Captures request client: axios, fetch, xhr, apollo, etc.
   requestHeaders?: Record<string, string>;
   responseHeaders?: Record<string, string>;
+  routeInfo?: RouteInfo;
 };
 
 let logs: NetworkLog[] = [];
 let listeners: ((logs: NetworkLog[]) => void)[] = [];
 let counter = 0;
 let isNetworkModuleEnabled = true;
+let currentRouteProvider: (() => RouteInfo | null) | null = null;
+
+export const setRouteInfoProvider = (
+  provider: (() => RouteInfo | null) | null,
+) => {
+  currentRouteProvider = provider;
+};
 
 export const setNetworkModuleEnabled = (enabled: boolean) => {
   isNetworkModuleEnabled = enabled;
@@ -232,6 +241,8 @@ export const setupNetworkLogger = () => {
           client = 'axios';
         }
 
+        const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
+
         addOrUpdateLog({
           id,
           url: finalUrl,
@@ -239,6 +250,7 @@ export const setupNetworkLogger = () => {
           startTime: start,
           caller,
           client,
+          routeInfo: currentRoute || undefined,
           request: method === "GET" ? undefined : parseRequestData(options?.body),
           requestHeaders,
         });
@@ -347,6 +359,8 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
     config.__logStart = start;
     config.__logCaller = caller;
 
+    const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
+
     addOrUpdateLog({
       id,
       url,
@@ -354,6 +368,7 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
       startTime: start,
       caller,
       client: 'axios',
+      routeInfo: currentRoute || undefined,
       request: method === "GET" ? undefined : parseRequestData(config.data),
       requestHeaders: normaliseHeaders(config.headers),
     });