react-native-inapp-inspector 2.2.9 → 2.3.0

package/src/components/Inspector/AnalyticsTab.tsx

@@ -11,6 +11,7 @@ import {animateNextLayout, useInspector} from './InspectorContext';
 import AnalyticsEventCard from '../AnalyticsEventCard';
 import AnalyticsFilterModal from './AnalyticsFilterModal';
 import EndOfListFooter from '../EndOfListFooter';
+import EmptyState from '../EmptyState';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
@@ -1183,15 +1184,38 @@ const AnalyticsTab = React.memo(() => {
             autoCapitalize="none"
           />
           {analyticsSearch.length > 0 && (
-            <Pressable
-              onPress={() => setAnalyticsSearch('')}
-              hitSlop={10}
-              style={styles.clearBtn}>
-              <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,
+                  }}>
+                  {filteredAnalyticsEvents.length}
+                </Text>
+              </View>
+              <Pressable
+                onPress={() => setAnalyticsSearch('')}
+                hitSlop={10}
+                style={styles.clearBtn}>
+                <ClearIcon
+                  color={AppColors.grayTextWeak}
+                  size={13}
+                />
+              </Pressable>
+            </View>
           )}
         </View>
         <View style={styles.toolbarRight}>
@@ -1292,24 +1316,21 @@ const AnalyticsTab = React.memo(() => {
             removeClippedSubviews={true}
             renderToHardwareTextureAndroid={true}
             ListEmptyComponent={
-              <View style={styles.emptyContainer}>
-                <View style={styles.emptyIconWrap}>
-                  <EmptyRadarIcon
-                    color={AppColors.purple}
-                    size={32}
-                  />
-                </View>
-                <Text style={styles.emptyTitle}>
-                  {analyticsSearch.length > 0
-                    ? 'No matching events'
-                    : 'No analytics events yet'}
-                </Text>
-                <Text style={styles.emptySub}>
-                  {analyticsSearch.length > 0
-                    ? 'Try adjusting your search.'
-                    : 'Call setupAnalyticsLogger(analytics()) at app start.'}
-                </Text>
-              </View>
+              <EmptyState
+                isSearch={analyticsSearch.length > 0}
+                searchQuery={analyticsSearch}
+                customTitle={
+                  analyticsSearch.length > 0
+                    ? 'No matching analytics events'
+                    : 'No analytics events yet'
+                }
+                customSub={
+                  analyticsSearch.length > 0
+                    ? `No events matched "${analyticsSearch}"`
+                    : 'Call setupAnalyticsLogger(analytics()) at app start.'
+                }
+                onClearSearch={() => setAnalyticsSearch('')}
+              />
             }
             ListFooterComponent={
               filteredAnalyticsEvents.length > 0 ? (

package/src/components/Inspector/ConsoleTab.tsx

@@ -682,6 +682,16 @@ const ConsoleTab = React.memo(() => {
             isSearch={
               logSearch.length > 0 || logFilters.size > 0
             }
+            searchQuery={logSearch}
+            customTitle={
+              logSearch.length > 0
+                ? 'No matching console logs'
+                : 'No console logs'
+            }
+            onClearSearch={() => {
+              setLogSearch('');
+              setLogFilters(new Set());
+            }}
           />
         }
         ListFooterComponent={

package/src/components/Inspector/CrashDetail.tsx

@@ -13,6 +13,7 @@ import TouchableScale from '../TouchableScale';
 import SegmentedTabs from '../SegmentedTabs';
 import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
+import CopyButton from '../CopyButton';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
 import {
@@ -485,9 +486,27 @@ const CrashDetail: React.FC = React.memo(() => {
           <View style={{gap: 12}}>
             {/* Device & OS Diagnostics Card */}
             <View style={localStyles.sectionCard}>
-              <View style={localStyles.sectionCardHeader}>
-                <GlobeIcon color={AppColors.purple} size={14} />
-                <Text style={localStyles.sectionCardTitle}>{t('crash.deviceEnvironment')}</Text>
+              <View
+                style={[
+                  localStyles.sectionCardHeader,
+                  {justifyContent: 'space-between'},
+                ]}>
+                <View
+                  style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
+                  <GlobeIcon color={AppColors.purple} size={14} />
+                  <Text style={localStyles.sectionCardTitle}>
+                    {t('crash.deviceEnvironment')}
+                  </Text>
+                </View>
+                <CopyButton
+                  value={
+                    selectedCrash.deviceInfo || {
+                      platform: Platform.OS,
+                      osVersion: String(Platform.Version),
+                    }
+                  }
+                  label="Diagnostics"
+                />
               </View>
 
               <View style={localStyles.diagGrid}>
@@ -538,9 +557,22 @@ const CrashDetail: React.FC = React.memo(() => {
             {/* Memory Metrics Card */}
             {selectedCrash.memoryInfo && (
               <View style={localStyles.sectionCard}>
-                <View style={localStyles.sectionCardHeader}>
-                  <LayersIcon color={AppColors.purple} size={14} />
-                  <Text style={localStyles.sectionCardTitle}>{t('crash.jsHeapMemory')}</Text>
+                <View
+                  style={[
+                    localStyles.sectionCardHeader,
+                    {justifyContent: 'space-between'},
+                  ]}>
+                  <View
+                    style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
+                    <LayersIcon color={AppColors.purple} size={14} />
+                    <Text style={localStyles.sectionCardTitle}>
+                      {t('crash.jsHeapMemory')}
+                    </Text>
+                  </View>
+                  <CopyButton
+                    value={selectedCrash.memoryInfo}
+                    label="Memory Info"
+                  />
                 </View>
 
                 <View style={localStyles.diagGrid}>
@@ -566,6 +598,19 @@ const CrashDetail: React.FC = React.memo(() => {
         {/* 3. BREADCRUMBS TAB */}
         {activeSubTab === 'breadcrumbs' && (
           <View style={{gap: 10}}>
+            {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 && (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'flex-end',
+                  marginBottom: 2,
+                }}>
+                <CopyButton
+                  value={selectedCrash.breadcrumbs}
+                  label="All Breadcrumbs"
+                />
+              </View>
+            )}
             {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 ? (
               selectedCrash.breadcrumbs.map((b, idx) => (
                 <View key={`crumb_${idx}`} style={localStyles.breadcrumbCard}>
@@ -575,9 +620,20 @@ const CrashDetail: React.FC = React.memo(() => {
                         {b.type.toUpperCase()}
                       </Text>
                     </View>
-                    <Text style={localStyles.breadcrumbTime}>
-                      {new Date(b.timestamp).toLocaleTimeString()}
-                    </Text>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                      }}>
+                      <Text style={localStyles.breadcrumbTime}>
+                        {new Date(b.timestamp).toLocaleTimeString()}
+                      </Text>
+                      <CopyButton
+                        value={`${new Date(b.timestamp).toLocaleTimeString()} [${b.type.toUpperCase()}] ${b.message}${b.data ? ' ' + JSON.stringify(b.data) : ''}`}
+                        label="Breadcrumb"
+                      />
+                    </View>
                   </View>
                   <Text style={localStyles.breadcrumbMessage}>{b.message}</Text>
                   {b.data && (

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