react-native-inapp-inspector 2.2.3 → 2.2.4

package/src/components/Inspector/TabBar.tsx

@@ -12,6 +12,8 @@ import {
   ReduxIcon,
   PerformanceIcon,
   CrashIcon,
+  SmartphoneIcon,
+  DatabaseIcon,
 } from '../NetworkIcons';
 
 import {isReduxConnected} from '../../customHooks/reduxLogger';
@@ -86,6 +88,18 @@ const TabBar = React.memo(() => {
               count: crashRecords?.length || 0,
               icon: 'crash',
             },
+            {
+              key: 'device',
+              label: 'Device',
+              count: 0,
+              icon: 'device',
+            },
+            {
+              key: 'storage',
+              label: 'Storage',
+              count: 0,
+              icon: 'storage',
+            },
           ] as const
         )
           .filter(tab => {
@@ -149,6 +163,12 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'crash' && (
                     <CrashIcon color={iconColor} size={14} />
                   )}
+                  {tab.icon === 'device' && (
+                    <SmartphoneIcon color={iconColor} size={14} />
+                  )}
+                  {tab.icon === 'storage' && (
+                    <DatabaseIcon color={iconColor} size={14} />
+                  )}
                   <Text
                     numberOfLines={1}
                     ellipsizeMode="tail"

package/src/components/Inspector/TelemetryConsentModal.tsx

@@ -61,6 +61,25 @@ const CloseSvg = ({size = 13, color = '#64748B'}: {size?: number; color?: string
   </Svg>
 );
 
+const GearSvg = ({size = 13, color = '#6366F1'}: {size?: number; color?: string}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
 export const TelemetryConsentModal = () => {
   const [visible, setVisible] = useState(false);
   const fadeAnim = useState(new Animated.Value(0))[0];
@@ -150,8 +169,9 @@ export const TelemetryConsentModal = () => {
 
             {/* Subheading instruction hint badge */}
             <View style={styles.hintBadge}>
+              <GearSvg size={12} color="#6366F1" />
               <Text style={styles.hintBadgeText}>
-                ⚙️ You can enable or disable this anytime in Settings
+                You can enable or disable this anytime in Settings
               </Text>
             </View>
           </View>
@@ -290,12 +310,16 @@ const styles = StyleSheet.create({
     ...fontStack,
   },
   hintBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 5,
     backgroundColor: '#EDE9FE80',
     borderWidth: 1,
     borderColor: '#DDD6FE',
     borderRadius: 7,
     paddingHorizontal: 8,
-    paddingVertical: 2.5,
+    paddingVertical: 3,
     marginBottom: 8,
   },
   hintBadgeText: {

package/src/components/Inspector/UpdateAvailableModal.tsx

@@ -96,6 +96,18 @@ const SparkleSvg = ({size = 14, color = '#F59E0B'}: {size?: number; color?: stri
   </Svg>
 );
 
+const ArrowRightSvg = ({size = 14, color = '#94A3B8'}: {size?: number; color?: string}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M5 12h14M12 5l7 7-7 7"
+      stroke={color}
+      strokeWidth="2.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
 interface UpdateAvailableModalProps {
   visible: boolean;
   latestVersion: string | null;
@@ -215,7 +227,7 @@ export const UpdateAvailableModal: React.FC<UpdateAvailableModalProps> = ({
             </View>
 
             <View style={styles.arrowContainer}>
-              <Text style={styles.arrowText}>➔</Text>
+              <ArrowRightSvg size={14} color="#94A3B8" />
             </View>
 
             <View style={styles.versionColumn}>

package/src/components/NetworkIcons.tsx

@@ -2116,3 +2116,106 @@ export const ChevronDownIcon = ({color = AppColors.grayTextWeak, size = 14}: Ico
   </Svg>
 );
 
+export const CpuIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect x="4" y="4" width="16" height="16" rx="2" stroke={color} strokeWidth="2" />
+    <Rect x="9" y="9" width="6" height="6" stroke={color} strokeWidth="2" />
+    <Path
+      d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const WifiIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const ShieldCheckIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M9 12l2 2 4-4"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const DatabaseIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Ellipse cx="12" cy="5" rx="9" ry="3" stroke={color} strokeWidth="2" />
+    <Path
+      d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+    <Path
+      d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const PencilIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const PlusIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 5v14M5 12h14"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+

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.3';
+export const LIB_VERSION = '2.2.4';

package/src/customHooks/bundleAnalyzer.ts

@@ -120,8 +120,9 @@ export const getBundleModuleEnabled = () => isBundleModuleEnabled;
 const getSourceCodeModule = (): any => {
   try {
     const legacy = NativeModules?.SourceCode;
-    if (legacy && typeof legacy.scriptURL === 'string' && legacy.scriptURL.length > 0) {
-      return legacy;
+    const scriptURL = legacy?.scriptURL || legacy?.getConstants?.()?.scriptURL;
+    if (typeof scriptURL === 'string' && scriptURL.length > 0) {
+      return {scriptURL};
     }
   } catch {}
   try {
@@ -203,11 +204,11 @@ const extractHostAndPort = (
 
 const probeCandidateUrlsInParallel = async (
   scriptURL: string,
-  timeoutMs = 2500,
+  timeoutMs = 3000,
 ): Promise<{text: string; bytes: number; url: string} | null> => {
   const {host: extractedHost, port: extractedPort} = extractHostAndPort(scriptURL);
 
-  // 1. If we have a direct scriptURL, try fetching directly
+  // 1. If we have a direct HTTP scriptURL, try fetching directly
   if (scriptURL && scriptURL.startsWith('http')) {
     try {
       const controller = new AbortController();
@@ -227,7 +228,7 @@ const probeCandidateUrlsInParallel = async (
     }
   }
 
-  // 2. Dynamic Port Discovery via lightweight Metro /status probe (20 bytes per check)
+  // 2. Dynamic Port Discovery via parallel lightweight Metro /status probes
   const candidateHosts = extractedHost
     ? [extractedHost, 'localhost', '127.0.0.1', ...(Platform.OS === 'android' ? ['10.0.2.2', '10.0.3.2'] : [])]
     : ['localhost', '127.0.0.1', ...(Platform.OS === 'android' ? ['10.0.2.2', '10.0.3.2'] : [])];
@@ -237,28 +238,52 @@ const probeCandidateUrlsInParallel = async (
     ? Array.from(new Set([extractedPort, ...DYNAMIC_DEV_PORTS]))
     : DYNAMIC_DEV_PORTS;
 
-  let activeServer: {host: string; port: number} | null = null;
+  const probeTasks: Promise<{host: string; port: number}>[] = [];
 
-  // Probe lightweight /status on candidate ports (very fast 400ms timeout)
   for (const host of uniqueHosts) {
     for (const port of candidatePorts) {
-      try {
-        const controller = new AbortController();
-        const timer = setTimeout(() => controller.abort(), 450);
-        const res = await fetch(`http://${host}:${port}/status`, {signal: controller.signal});
-        clearTimeout(timer);
-        if (res.ok) {
-          const statusText = await res.text();
-          if (statusText && statusText.includes('packager-status:running')) {
-            activeServer = {host, port};
-            break;
+      probeTasks.push(
+        new Promise(async (resolve, reject) => {
+          const controller = new AbortController();
+          const timer = setTimeout(() => controller.abort(), 700);
+          try {
+            const res = await fetch(`http://${host}:${port}/status`, {signal: controller.signal});
+            clearTimeout(timer);
+            if (res.ok) {
+              const statusText = await res.text();
+              if (statusText && statusText.includes('packager-status:running')) {
+                resolve({host, port});
+                return;
+              }
+            }
+          } catch {
+            clearTimeout(timer);
           }
-        }
-      } catch {
-        // Continue to next port
-      }
+          reject(new Error('unreachable'));
+        }),
+      );
     }
-    if (activeServer) break;
+  }
+
+  let activeServer: {host: string; port: number} | null = null;
+  try {
+    activeServer = await new Promise<{host: string; port: number}>((resolve, reject) => {
+      let pending = probeTasks.length;
+      if (pending === 0) {
+        reject(new Error('No candidate hosts'));
+        return;
+      }
+      probeTasks.forEach(p => {
+        p.then(resolve).catch(() => {
+          pending--;
+          if (pending === 0) {
+            reject(new Error('All probes failed'));
+          }
+        });
+      });
+    });
+  } catch {
+    activeServer = null;
   }
 
   // 3. If a live Metro port was detected dynamically, fetch the bundle from it