react-native-inapp-inspector 2.3.14 → 2.3.15

package/dist/esm/components/Inspector/DeviceInfoTab.js

@@ -338,19 +338,119 @@ export const DeviceInfoTab = React.memo(() => {
         copyToClipboard(md, 'Device Markdown Report');
         showToast('Copied Markdown Report to Clipboard!');
     };
-    const isMatch = (text) => {
+    const isMatch = useCallback((label, value, subtext) => {
         if (!search.trim())
             return true;
-        return text.toLowerCase().includes(search.toLowerCase().trim());
-    };
+        const query = search.toLowerCase().trim();
+        const strVal = value != null
+            ? typeof value === 'object'
+                ? JSON.stringify(value)
+                : String(value)
+            : '';
+        const strSub = subtext != null ? String(subtext) : '';
+        return (label.toLowerCase().includes(query) ||
+            strVal.toLowerCase().includes(query) ||
+            strSub.toLowerCase().includes(query));
+    }, [search]);
+    const hasHeroMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        return (isMatch('Model', deviceMetrics?.deviceModel || Platform.constants?.Model) ||
+            isMatch('OS', Platform.OS) ||
+            isMatch('IP Address', ipAddress) ||
+            isMatch('RAM', `${usedRamMb}/${totalRamMb}`) ||
+            isMatch('Uptime', deviceUptime));
+    }, [search, isMatch, deviceMetrics, ipAddress, usedRamMb, totalRamMb, deviceUptime]);
+    const hasOverviewMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        return (isMatch('Device Model', fullDeviceData.hardware.model) ||
+            isMatch('Manufacturer', fullDeviceData.hardware.brand) ||
+            isMatch('Operating System', fullDeviceData.hardware.osVersion) ||
+            isMatch('IP Address', ipAddress) ||
+            isMatch('RAM Memory', `${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`, `Free Memory: ${freeRamMb} MB`) ||
+            isMatch('Storage Capacity', `${freeStorageGb} GB Free / ${totalStorageGb} GB Total`) ||
+            isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) ||
+            isMatch('JavaScript Engine', isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)') ||
+            isMatch('UDID Identifier', pseudoUDID));
+    }, [search, isMatch, fullDeviceData, ipAddress, usedRamMb, totalRamMb, ramUsagePct, freeRamMb, freeStorageGb, totalStorageGb, isHermes, pseudoUDID]);
+    const hasHardwareMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        return (isMatch('CPU Architecture', fullDeviceData.hardware.cpuAbi) ||
+            isMatch('Total RAM', `${totalRamMb} MB`) ||
+            isMatch('Free RAM', `${freeRamMb} MB`) ||
+            isMatch('Storage Capacity', `${totalStorageGb} GB`) ||
+            isMatch('Available Storage', `${freeStorageGb} GB`) ||
+            isMatch('Battery', `${deviceMetrics?.batteryPercent ?? 100}%`) ||
+            isMatch('API Level', `API ${deviceMetrics?.apiLevel || Platform.Version}`) ||
+            isMatch('Thermal State', 'Nominal (Cool)'));
+    }, [search, isMatch, fullDeviceData, totalRamMb, freeRamMb, totalStorageGb, freeStorageGb, deviceMetrics]);
+    const hasNetworkMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        return (isMatch('IP Address', ipAddress) ||
+            isMatch('Internet Reachability', 'Connected') ||
+            isMatch('Connection Type', 'Wi-Fi / Local Area Network') ||
+            isMatch('Metro Dev Server', NativeModules?.PlatformConstants?.serverHost || NativeModules?.AndroidConstants?.serverHost || 'localhost:8081') ||
+            isMatch('WebSocket Protocol', 'Active & Enabled') ||
+            isMatch('Network Inspector Interceptor', 'Intercepting XHR & Fetch'));
+    }, [search, isMatch, ipAddress]);
+    const hasDisplayMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        return (isMatch('Window Resolution', `${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`) ||
+            isMatch('Screen Physical Size', `${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`) ||
+            isMatch('Pixel Density', `@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`) ||
+            isMatch('Font Scale', `${fontScale}x`) ||
+            isMatch('Form Factor', isTablet ? 'Tablet' : 'Smartphone') ||
+            isMatch('Orientation', isLandscape ? 'Landscape' : 'Portrait') ||
+            isMatch('Status Bar Height', `${statusBarHeight} pt`));
+    }, [search, isMatch, windowDims, screenDims, pixelRatio, fontScale, isTablet, isLandscape, statusBarHeight]);
+    const hasRuntimeMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        return (isMatch('App Name', fullDeviceData.runtime.appName) ||
+            isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) ||
+            isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) ||
+            isMatch('React Native', `v${reactNativeVersion}`) ||
+            isMatch('In-App Inspector Version', `v${LIB_VERSION}`) ||
+            isMatch('Hermes Engine', isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)') ||
+            isMatch('New Architecture', isTurboModule ? 'Enabled' : 'Legacy Bridge') ||
+            isMatch('Build Type', __DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production') ||
+            isMatch('Timezone', fullDeviceData.runtime.timezone) ||
+            isMatch('Locale', fullDeviceData.runtime.locale) ||
+            isMatch('Session Uptime', deviceUptime));
+    }, [search, isMatch, fullDeviceData, reactNativeVersion, isHermes, isTurboModule, deviceUptime]);
+    const hasSecurityMatch = useMemo(() => {
+        if (!search.trim())
+            return true;
+        return (isMatch('Pseudo-UDID', pseudoUDID) ||
+            isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) ||
+            isMatch('Root / Jailbreak', 'Clean (Standard Sandbox)') ||
+            isMatch('Simulator / Emulator', Platform.constants?.Model?.includes?.('sdk') || Platform.constants?.Model?.includes?.('Emulator') || Platform.constants?.Model?.includes?.('Simulator') ? 'Virtual Simulator' : 'Physical Device') ||
+            isMatch('Sandbox Integrity', 'Enforced by OS Kernel'));
+    }, [search, isMatch, pseudoUDID, fullDeviceData]);
     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 (hasHeroMatch ||
+            hasOverviewMatch ||
+            hasHardwareMatch ||
+            hasNetworkMatch ||
+            hasDisplayMatch ||
+            hasRuntimeMatch ||
+            hasSecurityMatch);
+    }, [
+        search,
+        hasHeroMatch,
+        hasOverviewMatch,
+        hasHardwareMatch,
+        hasNetworkMatch,
+        hasDisplayMatch,
+        hasRuntimeMatch,
+        hasSecurityMatch,
+    ]);
     return (<View style={styles.container}>
       
       <View style={styles.subTabsWrapper}>
@@ -395,154 +495,154 @@ export const DeviceInfoTab = React.memo(() => {
       
       <ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
         
-        <View style={styles.heroCard}>
-          <View style={styles.heroHeader}>
-            <View style={styles.heroIconWrap}>
-              {Platform.OS === 'ios' ? (<AppleIcon size={20} color={AppColors.white}/>) : (<AndroidIcon size={20} color={AppColors.white}/>)}
-            </View>
-            <View style={{ flex: 1, minWidth: 0 }}>
-              <Text style={styles.heroTitle} numberOfLines={1} ellipsizeMode="tail">
-                {deviceMetrics?.deviceModel || Platform.constants?.Model || (Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
-              </Text>
-              <Text style={styles.heroSubtitle} numberOfLines={1} ellipsizeMode="tail">
-                {Platform.OS === 'ios' ? `iOS ${Platform.Version}` : `Android ${Platform.Version} (API ${deviceMetrics?.apiLevel || Platform.Version})`}
-              </Text>
-            </View>
-            <View style={styles.heroBadge}>
-              <View style={styles.pulseDot}/>
-              <Text style={styles.heroBadgeText}>LIVE</Text>
+        {(!search.trim() || hasHeroMatch) && (<View style={styles.heroCard}>
+            <View style={styles.heroHeader}>
+              <View style={styles.heroIconWrap}>
+                {Platform.OS === 'ios' ? (<AppleIcon size={20} color={AppColors.white}/>) : (<AndroidIcon size={20} color={AppColors.white}/>)}
+              </View>
+              <View style={{ flex: 1, minWidth: 0 }}>
+                <Text style={styles.heroTitle} numberOfLines={1} ellipsizeMode="tail">
+                  {deviceMetrics?.deviceModel || Platform.constants?.Model || (Platform.OS === 'ios' ? 'Apple iPhone' : 'Android Device')}
+                </Text>
+                <Text style={styles.heroSubtitle} numberOfLines={1} ellipsizeMode="tail">
+                  {Platform.OS === 'ios' ? `iOS ${Platform.Version}` : `Android ${Platform.Version} (API ${deviceMetrics?.apiLevel || Platform.Version})`}
+                </Text>
+              </View>
+              <View style={styles.heroBadge}>
+                <View style={styles.pulseDot}/>
+                <Text style={styles.heroBadgeText}>LIVE</Text>
+              </View>
             </View>
-          </View>
 
-          
-          <View style={styles.heroMetricsStrip}>
-            <View style={styles.heroMetricItem}>
-              <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} 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} numberOfLines={1} ellipsizeMode="tail">UPTIME</Text>
-              <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">{deviceUptime}</Text>
+            
+            <View style={styles.heroMetricsStrip}>
+              <View style={styles.heroMetricItem}>
+                <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} 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} numberOfLines={1} ellipsizeMode="tail">UPTIME</Text>
+                <Text style={styles.heroMetricValue} numberOfLines={1} ellipsizeMode="tail">{deviceUptime}</Text>
+              </View>
             </View>
-          </View>
-        </View>
+          </View>)}
 
         
-        {(activeSubTab === 'overview' || search.length > 0) && (<View style={styles.sectionCard}>
+        {(activeSubTab === 'overview' || search.length > 0) && hasOverviewMatch && (<View style={styles.sectionCard}>
             <Text style={styles.sectionTitle}>DEVICE OVERVIEW</Text>
-            {isMatch('Device Model') && (<InfoRow label="Device Model" value={fullDeviceData.hardware.model}/>)}
-            {isMatch('Manufacturer') && (<InfoRow label="Manufacturer / Brand" value={fullDeviceData.hardware.brand}/>)}
-            {isMatch('Operating System') && (<InfoRow label="Operating System" value={fullDeviceData.hardware.osVersion} badge={{ text: Platform.OS.toUpperCase(), color: AppColors.blue500, bg: `${AppColors.blue500}18` }}/>)}
-            {isMatch('IP Address') && (<InfoRow label="Local IP Address" value={ipAddress} badge={{ text: 'ONLINE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }}/>)}
-            {isMatch('RAM Memory') && (<InfoRow label="RAM Memory" value={`${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`} subtext={`Free Memory: ${freeRamMb} MB`}/>)}
-            {isMatch('Storage Capacity') && (<InfoRow label="Internal Storage" value={`${freeStorageGb} GB Free / ${totalStorageGb} GB Total`}/>)}
-            {isMatch('App Version') && (<InfoRow label="Host App Version" value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}/>)}
-            {isMatch('JavaScript Engine') && (<InfoRow label="JS Runtime Engine" value={isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)'} badge={isHermes
+            {isMatch('Device Model', fullDeviceData.hardware.model) && (<InfoRow label="Device Model" value={fullDeviceData.hardware.model}/>)}
+            {isMatch('Manufacturer', fullDeviceData.hardware.brand) && (<InfoRow label="Manufacturer / Brand" value={fullDeviceData.hardware.brand}/>)}
+            {isMatch('Operating System', fullDeviceData.hardware.osVersion) && (<InfoRow label="Operating System" value={fullDeviceData.hardware.osVersion} badge={{ text: Platform.OS.toUpperCase(), color: AppColors.blue500, bg: `${AppColors.blue500}18` }}/>)}
+            {isMatch('IP Address', ipAddress) && (<InfoRow label="Local IP Address" value={ipAddress} badge={{ text: 'ONLINE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }}/>)}
+            {isMatch('RAM Memory', `${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`, `Free Memory: ${freeRamMb} MB`) && (<InfoRow label="RAM Memory" value={`${usedRamMb} MB / ${totalRamMb} MB (${ramUsagePct}%)`} subtext={`Free Memory: ${freeRamMb} MB`}/>)}
+            {isMatch('Storage Capacity', `${freeStorageGb} GB Free / ${totalStorageGb} GB Total`) && (<InfoRow label="Internal Storage" value={`${freeStorageGb} GB Free / ${totalStorageGb} GB Total`}/>)}
+            {isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) && (<InfoRow label="Host App Version" value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}/>)}
+            {isMatch('JavaScript Engine', isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)') && (<InfoRow label="JS Runtime Engine" value={isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)'} badge={isHermes
                     ? { text: 'HERMES', color: AppColors.purple, bg: `${AppColors.purple}18` }
                     : { text: 'JSC', color: AppColors.sky500, bg: `${AppColors.sky500}18` }}/>)}
-            {isMatch('UDID Identifier') && (<InfoRow label="Pseudo-UDID" value={pseudoUDID} isLast/>)}
+            {isMatch('UDID Identifier', pseudoUDID) && (<InfoRow label="Pseudo-UDID" value={pseudoUDID} isLast/>)}
           </View>)}
 
         
-        {(activeSubTab === 'hardware' || search.length > 0) && (<View style={styles.sectionCard}>
+        {(activeSubTab === 'hardware' || search.length > 0) && hasHardwareMatch && (<View style={styles.sectionCard}>
             <Text style={styles.sectionTitle}>HARDWARE & SYSTEM SPECIFICATIONS</Text>
-            {isMatch('CPU Architecture') && (<InfoRow label="CPU Architecture / ABI" value={fullDeviceData.hardware.cpuAbi} badge={{ text: '64-BIT', color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
-            {isMatch('Total RAM') && (<InfoRow label="Total Physical RAM" value={`${totalRamMb} MB`}/>)}
-            {isMatch('Free RAM') && (<InfoRow label="Available Free RAM" value={`${freeRamMb} MB`} badge={{
+            {isMatch('CPU Architecture', fullDeviceData.hardware.cpuAbi) && (<InfoRow label="CPU Architecture / ABI" value={fullDeviceData.hardware.cpuAbi} badge={{ text: '64-BIT', color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
+            {isMatch('Total RAM', `${totalRamMb} MB`) && (<InfoRow label="Total Physical RAM" value={`${totalRamMb} MB`}/>)}
+            {isMatch('Free RAM', `${freeRamMb} MB`) && (<InfoRow label="Available Free RAM" value={`${freeRamMb} MB`} badge={{
                     text: freeRamMb < 500 ? 'LOW' : 'HEALTHY',
                     color: freeRamMb < 500 ? AppColors.errorColor : AppColors.emerald500,
                     bg: freeRamMb < 500 ? `${AppColors.errorColor}18` : `${AppColors.emerald500}18`,
                 }}/>)}
-            {isMatch('Storage Capacity') && (<InfoRow label="Disk Storage Total" value={`${totalStorageGb} GB`}/>)}
-            {isMatch('Available Storage') && (<InfoRow label="Disk Storage Available" value={`${freeStorageGb} GB`}/>)}
-            {isMatch('Battery') && (<InfoRow label="Battery Level" value={`${deviceMetrics?.batteryPercent ?? 100}%`} badge={{
+            {isMatch('Storage Capacity', `${totalStorageGb} GB`) && (<InfoRow label="Disk Storage Total" value={`${totalStorageGb} GB`}/>)}
+            {isMatch('Available Storage', `${freeStorageGb} GB`) && (<InfoRow label="Disk Storage Available" value={`${freeStorageGb} GB`}/>)}
+            {isMatch('Battery', `${deviceMetrics?.batteryPercent ?? 100}%`) && (<InfoRow label="Battery Level" value={`${deviceMetrics?.batteryPercent ?? 100}%`} badge={{
                     text: deviceMetrics?.isCharging ? 'CHARGING' : 'DISCHARGING',
                     color: deviceMetrics?.isCharging ? AppColors.emerald500 : AppColors.grayText,
                     bg: deviceMetrics?.isCharging ? `${AppColors.emerald500}18` : `${AppColors.grayText}18`,
                 }}/>)}
-            {isMatch('API Level') && Platform.OS === 'android' && (<InfoRow label="Android API SDK Level" value={`API ${deviceMetrics?.apiLevel || Platform.Version}`}/>)}
-            {isMatch('Thermal State') && (<InfoRow label="Thermal State" value="Nominal (Cool)" badge={{ text: 'OPTIMAL', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }} isLast/>)}
+            {isMatch('API Level', `API ${deviceMetrics?.apiLevel || Platform.Version}`) && Platform.OS === 'android' && (<InfoRow label="Android API SDK Level" value={`API ${deviceMetrics?.apiLevel || Platform.Version}`}/>)}
+            {isMatch('Thermal State', 'Nominal (Cool)') && (<InfoRow label="Thermal State" value="Nominal (Cool)" badge={{ text: 'OPTIMAL', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }} isLast/>)}
           </View>)}
 
         
-        {(activeSubTab === 'network' || search.length > 0) && (<View style={styles.sectionCard}>
+        {(activeSubTab === 'network' || search.length > 0) && hasNetworkMatch && (<View style={styles.sectionCard}>
             <Text style={styles.sectionTitle}>NETWORK & CONNECTIVITY</Text>
-            {isMatch('IP Address') && (<InfoRow label="Local Device IP" value={ipAddress} badge={{ text: 'IPV4', color: AppColors.blue500, bg: `${AppColors.blue500}18` }}/>)}
-            {isMatch('Internet Reachability') && (<InfoRow label="Internet Reachability" value="Connected" badge={{ text: 'ONLINE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }}/>)}
-            {isMatch('Connection Type') && (<InfoRow label="Active Connection Type" value="Wi-Fi / Local Area Network"/>)}
-            {isMatch('Metro Dev Server') && (<InfoRow label="Metro Packager Host" value={NativeModules?.PlatformConstants?.serverHost ||
+            {isMatch('IP Address', ipAddress) && (<InfoRow label="Local Device IP" value={ipAddress} badge={{ text: 'IPV4', color: AppColors.blue500, bg: `${AppColors.blue500}18` }}/>)}
+            {isMatch('Internet Reachability', 'Connected') && (<InfoRow label="Internet Reachability" value="Connected" badge={{ text: 'ONLINE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }}/>)}
+            {isMatch('Connection Type', 'Wi-Fi / Local Area Network') && (<InfoRow label="Active Connection Type" value="Wi-Fi / Local Area Network"/>)}
+            {isMatch('Metro Dev Server', NativeModules?.PlatformConstants?.serverHost || NativeModules?.AndroidConstants?.serverHost || 'localhost:8081') && (<InfoRow label="Metro Packager Host" value={NativeModules?.PlatformConstants?.serverHost ||
                     NativeModules?.AndroidConstants?.serverHost ||
                     'localhost:8081'}/>)}
-            {isMatch('WebSocket Protocol') && (<InfoRow label="WebSocket (WSS) Support" value="Active & Enabled"/>)}
-            {isMatch('Network Inspector Interceptor') && (<InfoRow label="Network Interceptor Status" value="Intercepting XHR & Fetch" badge={{ text: 'MONITORING', color: AppColors.purple, bg: `${AppColors.purple}18` }} isLast/>)}
+            {isMatch('WebSocket Protocol', 'Active & Enabled') && (<InfoRow label="WebSocket (WSS) Support" value="Active & Enabled"/>)}
+            {isMatch('Network Inspector Interceptor', 'Intercepting XHR & Fetch') && (<InfoRow label="Network Interceptor Status" value="Intercepting XHR & Fetch" badge={{ text: 'MONITORING', color: AppColors.purple, bg: `${AppColors.purple}18` }} isLast/>)}
           </View>)}
 
         
-        {(activeSubTab === 'display' || search.length > 0) && (<View style={styles.sectionCard}>
+        {(activeSubTab === 'display' || search.length > 0) && hasDisplayMatch && (<View style={styles.sectionCard}>
             <Text style={styles.sectionTitle}>DISPLAY & SCREEN GEOMETRY</Text>
-            {isMatch('Window Resolution') && (<InfoRow label="Window Logical Size" value={`${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`}/>)}
-            {isMatch('Screen Physical Size') && (<InfoRow label="Physical Screen Size" value={`${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`}/>)}
-            {isMatch('Pixel Density') && (<InfoRow label="Pixel Ratio (DPI Scale)" value={`@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`} badge={{ text: `@${pixelRatio}x`, color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
-            {isMatch('Font Scale') && (<InfoRow label="User Font Scale" value={`${fontScale}x (${fontScale === 1 ? 'Default' : fontScale > 1 ? 'Enlarged' : 'Compact'})`}/>)}
-            {isMatch('Form Factor') && (<InfoRow label="Device Form Factor" value={isTablet ? 'Tablet' : 'Smartphone'} badge={{
+            {isMatch('Window Resolution', `${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`) && (<InfoRow label="Window Logical Size" value={`${windowDims.width.toFixed(0)} × ${windowDims.height.toFixed(0)} pt`}/>)}
+            {isMatch('Screen Physical Size', `${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`) && (<InfoRow label="Physical Screen Size" value={`${(screenDims.width * pixelRatio).toFixed(0)} × ${(screenDims.height * pixelRatio).toFixed(0)} px`}/>)}
+            {isMatch('Pixel Density', `@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`) && (<InfoRow label="Pixel Ratio (DPI Scale)" value={`@${pixelRatio}x (${Math.round(pixelRatio * 160)} dpi)`} badge={{ text: `@${pixelRatio}x`, color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
+            {isMatch('Font Scale', `${fontScale}x`) && (<InfoRow label="User Font Scale" value={`${fontScale}x (${fontScale === 1 ? 'Default' : fontScale > 1 ? 'Enlarged' : 'Compact'})`}/>)}
+            {isMatch('Form Factor', isTablet ? 'Tablet' : 'Smartphone') && (<InfoRow label="Device Form Factor" value={isTablet ? 'Tablet' : 'Smartphone'} badge={{
                     text: isTablet ? 'TABLET' : 'PHONE',
                     color: isTablet ? AppColors.blue500 : AppColors.purple,
                     bg: isTablet ? `${AppColors.blue500}18` : `${AppColors.purple}18`,
                 }}/>)}
-            {isMatch('Orientation') && (<InfoRow label="Screen Orientation" value={isLandscape ? 'Landscape' : 'Portrait'}/>)}
-            {isMatch('Status Bar Height') && (<InfoRow label="Status Bar Inset" value={`${statusBarHeight} pt`} isLast/>)}
+            {isMatch('Orientation', isLandscape ? 'Landscape' : 'Portrait') && (<InfoRow label="Screen Orientation" value={isLandscape ? 'Landscape' : 'Portrait'}/>)}
+            {isMatch('Status Bar Height', `${statusBarHeight} pt`) && (<InfoRow label="Status Bar Inset" value={`${statusBarHeight} pt`} isLast/>)}
           </View>)}
 
         
-        {(activeSubTab === 'runtime' || search.length > 0) && (<View style={styles.sectionCard}>
+        {(activeSubTab === 'runtime' || search.length > 0) && hasRuntimeMatch && (<View style={styles.sectionCard}>
             <Text style={styles.sectionTitle}>RUNTIME & APPLICATION</Text>
-            {isMatch('App Name') && (<InfoRow label="Application Name" value={fullDeviceData.runtime.appName}/>)}
-            {isMatch('Bundle ID') && (<InfoRow label="Bundle Identifier / Package" value={fullDeviceData.identifiers.bundleId}/>)}
-            {isMatch('App Version') && (<InfoRow label="Application Version" value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}/>)}
-            {isMatch('React Native') && (<InfoRow label="React Native Framework" value={`v${reactNativeVersion}`} badge={{ text: 'RN', color: AppColors.sky500, bg: `${AppColors.sky500}18` }}/>)}
-            {isMatch('In-App Inspector Version') && (<InfoRow label="In-App Inspector Library" value={`v${LIB_VERSION}`} badge={{ text: 'LATEST', color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
-            {isMatch('Hermes Engine') && (<InfoRow label="Hermes JavaScript Engine" value={isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)'} badge={{
+            {isMatch('App Name', fullDeviceData.runtime.appName) && (<InfoRow label="Application Name" value={fullDeviceData.runtime.appName}/>)}
+            {isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) && (<InfoRow label="Bundle Identifier / Package" value={fullDeviceData.identifiers.bundleId}/>)}
+            {isMatch('App Version', `v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`) && (<InfoRow label="Application Version" value={`v${fullDeviceData.runtime.appVersion} (${fullDeviceData.runtime.appBuild})`}/>)}
+            {isMatch('React Native', `v${reactNativeVersion}`) && (<InfoRow label="React Native Framework" value={`v${reactNativeVersion}`} badge={{ text: 'RN', color: AppColors.sky500, bg: `${AppColors.sky500}18` }}/>)}
+            {isMatch('In-App Inspector Version', `v${LIB_VERSION}`) && (<InfoRow label="In-App Inspector Library" value={`v${LIB_VERSION}`} badge={{ text: 'LATEST', color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
+            {isMatch('Hermes Engine', isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)') && (<InfoRow label="Hermes JavaScript Engine" value={isHermes ? 'Enabled (AOT Bytecode)' : 'Disabled (JSC)'} badge={{
                     text: isHermes ? 'HERMES' : 'JSC',
                     color: isHermes ? AppColors.purple : AppColors.grayText,
                     bg: isHermes ? `${AppColors.purple}18` : `${AppColors.grayText}18`,
                 }}/>)}
-            {isMatch('New Architecture') && (<InfoRow label="Bridgeless TurboModules (New Arch)" value={isTurboModule ? 'Enabled' : 'Legacy Bridge'} badge={{
+            {isMatch('New Architecture', isTurboModule ? 'Enabled' : 'Legacy Bridge') && (<InfoRow label="Bridgeless TurboModules (New Arch)" value={isTurboModule ? 'Enabled' : 'Legacy Bridge'} badge={{
                     text: isTurboModule ? 'NEW ARCH' : 'LEGACY',
                     color: isTurboModule ? AppColors.emerald500 : AppColors.blue500,
                     bg: isTurboModule ? `${AppColors.emerald500}18` : `${AppColors.blue500}18`,
                 }}/>)}
-            {isMatch('Build Type') && (<InfoRow label="Build Configuration" value={__DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production'} badge={{
+            {isMatch('Build Type', __DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production') && (<InfoRow label="Build Configuration" value={__DEV__ ? 'Debug (__DEV__ = true)' : 'Release / Production'} badge={{
                     text: __DEV__ ? 'DEBUG' : 'RELEASE',
                     color: __DEV__ ? AppColors.warningIconGold : AppColors.emerald500,
                     bg: __DEV__ ? `${AppColors.warningIconGold}18` : `${AppColors.emerald500}18`,
                 }}/>)}
-            {isMatch('Timezone') && (<InfoRow label="System Timezone" value={fullDeviceData.runtime.timezone}/>)}
-            {isMatch('Locale') && (<InfoRow label="System Language & Locale" value={fullDeviceData.runtime.locale}/>)}
-            {isMatch('Session Uptime') && (<InfoRow label="Inspector Session Uptime" value={deviceUptime} isLast/>)}
+            {isMatch('Timezone', fullDeviceData.runtime.timezone) && (<InfoRow label="System Timezone" value={fullDeviceData.runtime.timezone}/>)}
+            {isMatch('Locale', fullDeviceData.runtime.locale) && (<InfoRow label="System Language & Locale" value={fullDeviceData.runtime.locale}/>)}
+            {isMatch('Session Uptime', deviceUptime) && (<InfoRow label="Inspector Session Uptime" value={deviceUptime} isLast/>)}
           </View>)}
 
         
-        {(activeSubTab === 'security' || search.length > 0) && (<View style={styles.sectionCard}>
+        {(activeSubTab === 'security' || search.length > 0) && hasSecurityMatch && (<View style={styles.sectionCard}>
             <Text style={styles.sectionTitle}>DEVICE IDENTIFIERS & SECURITY</Text>
-            {isMatch('Pseudo-UDID') && (<InfoRow label="Deterministic Pseudo-UDID" value={pseudoUDID} subtext="Stable hardware signature hash for testing & diagnostics" badge={{ text: 'PERSISTENT', color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
-            {isMatch('Bundle ID') && (<InfoRow label="Application Bundle ID" value={fullDeviceData.identifiers.bundleId}/>)}
-            {isMatch('Root / Jailbreak') && (<InfoRow label="Root / Jailbreak Heuristic" value="Clean (Standard Sandbox)" badge={{ text: 'SECURE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }}/>)}
-            {isMatch('Simulator / Emulator') && (<InfoRow label="Emulator / Physical Device" value={Platform.constants?.Model?.includes?.('sdk') ||
+            {isMatch('Pseudo-UDID', pseudoUDID) && (<InfoRow label="Deterministic Pseudo-UDID" value={pseudoUDID} subtext="Stable hardware signature hash for testing & diagnostics" badge={{ text: 'PERSISTENT', color: AppColors.purple, bg: `${AppColors.purple}18` }}/>)}
+            {isMatch('Bundle ID', fullDeviceData.identifiers.bundleId) && (<InfoRow label="Application Bundle ID" value={fullDeviceData.identifiers.bundleId}/>)}
+            {isMatch('Root / Jailbreak', 'Clean (Standard Sandbox)') && (<InfoRow label="Root / Jailbreak Heuristic" value="Clean (Standard Sandbox)" badge={{ text: 'SECURE', color: AppColors.emerald500, bg: `${AppColors.emerald500}18` }}/>)}
+            {isMatch('Simulator / Emulator', Platform.constants?.Model?.includes?.('sdk') || Platform.constants?.Model?.includes?.('Emulator') || Platform.constants?.Model?.includes?.('Simulator') ? 'Virtual Simulator' : 'Physical Device') && (<InfoRow label="Emulator / Physical Device" value={Platform.constants?.Model?.includes?.('sdk') ||
                     Platform.constants?.Model?.includes?.('Emulator') ||
                     Platform.constants?.Model?.includes?.('Simulator')
                     ? 'Virtual Simulator'
                     : 'Physical Device'}/>)}
-            {isMatch('Sandbox Integrity') && (<InfoRow label="App Sandbox File Isolation" value="Enforced by OS Kernel" isLast/>)}
+            {isMatch('Sandbox Integrity', 'Enforced by OS Kernel') && (<InfoRow label="App Sandbox File Isolation" value="Enforced by OS Kernel" isLast/>)}
           </View>)}
 
         

package/dist/esm/components/Inspector/InspectorHeader.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Alert, Animated, Linking, Platform, Pressable, ScrollView, Text, useWindowDimensions, View, } from 'react-native';
+import { Alert, Animated, Linking, Platform, Pressable, ScrollView, Text, TouchableOpacity, useWindowDimensions, View, } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
@@ -764,7 +764,7 @@ const InspectorHeader = React.memo(() => {
                 <SettingsIcon color={AppColors.white} size={isNarrow ? 12 : 14}/>
               </TouchableScale>)}
 
-            <TouchableScale onPress={closeModal} hitSlop={15} style={[
+            <TouchableOpacity onPress={closeModal} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} activeOpacity={0.6} style={[
             styles.closeButtonSquare,
             {
                 width: buttonSize,
@@ -773,7 +773,7 @@ const InspectorHeader = React.memo(() => {
             },
         ]}>
               <CloseWhite size={isNarrow ? 12 : 14}/>
-            </TouchableScale>
+            </TouchableOpacity>
           </View>
         </View>
       </View>

package/dist/esm/components/Inspector/MainScreen.js

@@ -72,18 +72,18 @@ const MainScreen = () => {
             enabled &&
             !visible &&
             !useNativeFab && <FabLauncher />}
-      <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
-      {visible && (<ErrorBoundary onClose={closeModal}>
+      <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true} onRequestClose={closeModal}>
+        <ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
             <Pressable style={styles.modalBackdropPressable} onPress={closeModal}/>
             <View style={[
-                styles.modalContentCard,
-                {
-                    height: `${modalHeightPercent}%`,
-                    borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
-                    borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
-                },
-            ]}>
+            styles.modalContentCard,
+            {
+                height: `${modalHeightPercent}%`,
+                borderTopLeftRadius: modalHeightPercent >= 100 ? 0 : 20,
+                borderTopRightRadius: modalHeightPercent >= 100 ? 0 : 20,
+            },
+        ]}>
               <StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
 
               <InspectorHeader />
@@ -95,22 +95,22 @@ const MainScreen = () => {
                 {isReady ? (<View style={{ flex: 1 }}>
                     
                     <Animated.View style={[
-                    {
-                        flex: 1,
-                        opacity: tabAnim,
-                        transform: [
-                            {
-                                translateY: tabAnim.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [6, 0],
-                                }),
-                            },
-                        ],
-                    },
-                    (isDetailActive || settingsPage !== null) && {
-                        pointerEvents: 'none',
-                    },
-                ]}>
+                {
+                    flex: 1,
+                    opacity: tabAnim,
+                    transform: [
+                        {
+                            translateY: tabAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [6, 0],
+                            }),
+                        },
+                    ],
+                },
+                (isDetailActive || settingsPage !== null) && {
+                    pointerEvents: 'none',
+                },
+            ]}>
                       {activeTab === 'apis' && <NetworkTab />}
                       {activeTab === 'logs' && <ConsoleTab />}
                       {activeTab === 'analytics' && <AnalyticsTab />}
@@ -121,50 +121,50 @@ const MainScreen = () => {
                       {activeTab === 'device' && <DeviceInfoTab />}
                       {activeTab === 'storage' && <StorageTab />}
                       {Platform.OS === 'android' &&
-                    isLocalDebugEnvironment() &&
-                    activeTab === 'debugging' && <DebuggingTab />}
+                isLocalDebugEnvironment() &&
+                activeTab === 'debugging' && <DebuggingTab />}
                     </Animated.View>
 
                     
                     {isDetailActive && (<Animated.View style={[
-                        StyleSheet.absoluteFill,
-                        {
-                            backgroundColor: AppColors.contentBg,
-                            opacity: detailAnim,
-                            transform: [
-                                {
-                                    translateX: detailAnim.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [32, 0],
-                                    }),
-                                },
-                            ],
-                        },
-                    ]}>
-                        {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
-                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
-                        {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
-                        {activeTab === 'redux' && <ReduxDetail />}
-                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
-                      </Animated.View>)}
-                  </View>) : (<MainScreenSkeleton />)}
-
-                
-                {settingsPage !== null && (<Animated.View style={[
                     StyleSheet.absoluteFill,
                     {
-                        backgroundColor: AppColors.grayBackground,
-                        opacity: settingsAnim,
+                        backgroundColor: AppColors.contentBg,
+                        opacity: detailAnim,
                         transform: [
                             {
-                                translateY: settingsAnim.interpolate({
+                                translateX: detailAnim.interpolate({
                                     inputRange: [0, 1],
-                                    outputRange: [24, 0],
+                                    outputRange: [32, 0],
                                 }),
                             },
                         ],
                     },
                 ]}>
+                        {activeTab === 'apis' && selected != null && (<NetworkDetail />)}
+                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail event={selectedEvent}/>)}
+                        {activeTab === 'logs' && selectedLog != null && (<LogDetail />)}
+                        {activeTab === 'redux' && <ReduxDetail />}
+                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail />)}
+                      </Animated.View>)}
+                  </View>) : (<MainScreenSkeleton />)}
+
+                
+                {settingsPage !== null && (<Animated.View style={[
+                StyleSheet.absoluteFill,
+                {
+                    backgroundColor: AppColors.grayBackground,
+                    opacity: settingsAnim,
+                    transform: [
+                        {
+                            translateY: settingsAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [24, 0],
+                            }),
+                        },
+                    ],
+                },
+            ]}>
                     <SettingsPanel />
                   </Animated.View>)}
               </View>
@@ -176,7 +176,7 @@ const MainScreen = () => {
               <NpmUpdateToast />
             </View>
           </View>
-        </ErrorBoundary>)}
+        </ErrorBoundary>
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
     </Modal>
     </>);