react-native-inapp-inspector 2.2.3 → 2.2.5

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

@@ -8,59 +8,19 @@ import {
   Animated,
   Platform,
 } from 'react-native';
-import Svg, {Path} from 'react-native-svg';
 import {BrandSquareIcon} from '../BrandSquareIcon';
+import {
+  SettingsIcon,
+  ShieldCheckIcon,
+  CheckIcon,
+  ClearIcon,
+} from '../NetworkIcons';
 import {
   getTelemetryConsentStatus,
   setTelemetryConsent,
   sendSessionTelemetryPing,
 } from '../../helpers/telemetry';
 
-// ─── Inline Crisp SVG Icons ───────────────────────────────────────────────────
-
-const ShieldCheckSvg = ({size = 15, color = '#7C3AED'}: {size?: number; color?: string}) => (
-  <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>
-);
-
-const CheckSvg = ({size = 14, color = '#FFFFFF'}: {size?: number; color?: string}) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path
-      d="M20 6L9 17l-5-5"
-      stroke={color}
-      strokeWidth="2.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </Svg>
-);
-
-const CloseSvg = ({size = 13, color = '#64748B'}: {size?: number; color?: string}) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path
-      d="M18 6L6 18M6 6l12 12"
-      stroke={color}
-      strokeWidth="2.2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </Svg>
-);
-
 export const TelemetryConsentModal = () => {
   const [visible, setVisible] = useState(false);
   const fadeAnim = useState(new Animated.Value(0))[0];
@@ -136,7 +96,7 @@ export const TelemetryConsentModal = () => {
             onPress={() => handleDecision(false)}
             hitSlop={10}
             activeOpacity={0.7}>
-            <CloseSvg size={13} color="#64748B" />
+            <ClearIcon size={12} color="#64748B" />
           </TouchableOpacity>
 
           {/* Centered Enlarged Square Brand Icon Header */}
@@ -150,8 +110,9 @@ export const TelemetryConsentModal = () => {
 
             {/* Subheading instruction hint badge */}
             <View style={styles.hintBadge}>
+              <SettingsIcon 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>
@@ -166,7 +127,7 @@ export const TelemetryConsentModal = () => {
           {/* Privacy Callout Box */}
           <View style={styles.privacyBadge}>
             <View style={styles.privacyShieldWrapper}>
-              <ShieldCheckSvg size={15} color="#7C3AED" />
+              <ShieldCheckIcon size={15} color="#7C3AED" />
             </View>
             <Text style={styles.privacyText}>
               <Text style={styles.privacyHighlight}>Privacy Guaranteed:</Text> We
@@ -181,7 +142,7 @@ export const TelemetryConsentModal = () => {
               style={styles.declineButton}
               onPress={() => handleDecision(false)}
               activeOpacity={0.7}>
-              <CloseSvg size={12} color="#64748B" />
+              <ClearIcon size={12} color="#64748B" />
               <Text style={styles.declineText}>Not Now</Text>
             </TouchableOpacity>
 
@@ -189,7 +150,7 @@ export const TelemetryConsentModal = () => {
               style={styles.allowButton}
               onPress={() => handleDecision(true)}
               activeOpacity={0.85}>
-              <CheckSvg size={13} color="#FFFFFF" />
+              <CheckIcon size={13} color="#FFFFFF" />
               <Text style={styles.allowText}>Allow & Share</Text>
             </TouchableOpacity>
           </View>
@@ -290,12 +251,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.5';

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