react-native-inapp-inspector 2.2.2 → 2.2.4

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

@@ -4,7 +4,7 @@ import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import TouchableScale from '../TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 const TabBar = React.memo(() => {
@@ -56,6 +56,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',
+            },
         ]
             .filter(tab => {
             if (!tabVisibility?.[tab.key])
@@ -98,6 +110,8 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
                   {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" style={[
                     styles.contentTabButtonText,
                     isActive &&

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

@@ -14,6 +14,10 @@ const CheckSvg = ({ size = 14, color = '#FFFFFF' }) => (<Svg width={size} height
 const CloseSvg = ({ size = 13, color = '#64748B' }) => (<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>);
+const GearSvg = ({ size = 13, color = '#6366F1' }) => (<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];
@@ -90,8 +94,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>
@@ -221,12 +226,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/dist/esm/components/Inspector/UpdateAvailableModal.js

@@ -25,6 +25,9 @@ const CloseSvg = ({ size = 13, color = '#64748B' }) => (<Svg width={size} height
 const SparkleSvg = ({ size = 14, color = '#F59E0B' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4L12 2z" fill={color}/>
   </Svg>);
+const ArrowRightSvg = ({ size = 14, color = '#94A3B8' }) => (<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>);
 export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
     const [copied, setCopied] = useState(false);
     const fadeAnim = useState(new Animated.Value(0))[0];
@@ -117,7 +120,7 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
             </View>
 
             <View style={styles.arrowContainer}>
-              <Text style={styles.arrowText}>➔</Text>
+              <ArrowRightSvg size={14} color="#94A3B8"/>
             </View>
 
             <View style={styles.versionColumn}>

package/dist/esm/components/NetworkIcons.d.ts

@@ -127,3 +127,9 @@ export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ResetIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ChevronDownIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const CpuIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const WifiIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -711,3 +711,26 @@ export const ResetIcon = ({ color = AppColors.white, size = 16 }) => (<Svg width
 export const ChevronDownIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
+export const CpuIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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, }) => (<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/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.2.2";
+export declare const LIB_VERSION = "2.2.4";

package/dist/esm/constants/version.js

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

package/dist/esm/customHooks/bundleAnalyzer.js

@@ -21,8 +21,9 @@ export const getBundleModuleEnabled = () => isBundleModuleEnabled;
 const getSourceCodeModule = () => {
     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 { }
@@ -96,9 +97,9 @@ const extractHostAndPort = (scriptURL) => {
     }
     return { host: null, port: null };
 };
-const probeCandidateUrlsInParallel = async (scriptURL, timeoutMs = 2500) => {
+const probeCandidateUrlsInParallel = async (scriptURL, timeoutMs = 3000) => {
     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();
@@ -118,7 +119,7 @@ const probeCandidateUrlsInParallel = async (scriptURL, timeoutMs = 2500) => {
             // Continue to dynamic port discovery
         }
     }
-    // 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'] : [])];
@@ -126,29 +127,50 @@ const probeCandidateUrlsInParallel = async (scriptURL, timeoutMs = 2500) => {
     const candidatePorts = extractedPort
         ? Array.from(new Set([extractedPort, ...DYNAMIC_DEV_PORTS]))
         : DYNAMIC_DEV_PORTS;
-    let activeServer = null;
-    // Probe lightweight /status on candidate ports (very fast 400ms timeout)
+    const probeTasks = [];
     for (const host of uniqueHosts) {
         for (const port of candidatePorts) {
-            try {
+            probeTasks.push(new Promise(async (resolve, reject) => {
                 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;
+                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 {
-                // Continue to next port
-            }
+                catch {
+                    clearTimeout(timer);
+                }
+                reject(new Error('unreachable'));
+            }));
         }
-        if (activeServer)
-            break;
+    }
+    let activeServer = null;
+    try {
+        activeServer = await new Promise((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
     if (activeServer) {

package/dist/esm/customHooks/storageInspector.d.ts

@@ -0,0 +1,67 @@
+export interface StorageEntry {
+    key: string;
+    value: string;
+    parsedValue?: any;
+    type: 'json' | 'string' | 'number' | 'boolean' | 'null';
+    byteSize: number;
+}
+export type StorageDriver = 'asyncStorage' | 'mmkv';
+/**
+ * Register an AsyncStorage instance with the inspector (optional override).
+ */
+export declare const connectAsyncStorage: (storageInstance: any) => void;
+/**
+ * Register an MMKV instance with the inspector (optional override).
+ */
+export declare const connectMMKV: (mmkvInstance: any, id?: string) => void;
+/**
+ * Auto-detect AsyncStorage:
+ * 1. Explicit connection
+ * 2. Global instance
+ * 3. Dynamic require '@react-native-async-storage/async-storage'
+ * 4. Native Bridge Direct interface
+ */
+export declare const getResolvedAsyncStorage: () => any;
+/**
+ * Auto-detect MMKV:
+ * 1. Explicit connection
+ * 2. Dynamic require 'react-native-mmkv' & instantiate default instance
+ * 3. Global MMKV / JSI instances
+ */
+export declare const getResolvedMMKV: (id?: string) => any;
+export declare const isAsyncStorageConnected: () => boolean;
+export declare const isMMKVConnected: () => boolean;
+export declare const getRegisteredMMKVInstanceIds: () => string[];
+/**
+ * Calculate approximate byte size of a UTF-8 string
+ */
+export declare const calculateByteSize: (str: string) => number;
+/**
+ * Determine type and format value safely
+ */
+export declare const analyzeStorageValue: (rawVal: any) => {
+    strVal: string;
+    parsedVal?: any;
+    type: "json" | "string" | "number" | "boolean" | "null";
+    byteSize: number;
+};
+/**
+ * Fetch all storage entries for given driver
+ */
+export declare const fetchStorageEntries: (driver: StorageDriver, instanceId?: string) => Promise<StorageEntry[]>;
+/**
+ * Create or Update a key-value entry (CRUD: Create / Update)
+ */
+export declare const setStorageEntry: (driver: StorageDriver, key: string, value: string, instanceId?: string) => Promise<boolean>;
+/**
+ * Delete a single key (CRUD: Delete)
+ */
+export declare const removeStorageEntry: (driver: StorageDriver, key: string, instanceId?: string) => Promise<boolean>;
+/**
+ * Wipe all keys for given storage (CRUD: Clear All)
+ */
+export declare const clearStorageDriver: (driver: StorageDriver, instanceId?: string) => Promise<boolean>;
+/**
+ * Subscribe to storage mutations
+ */
+export declare const subscribeToStorageChanges: (listener: () => void) => (() => void);