react-native-inapp-inspector 2.2.2 → 2.2.4

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

@@ -61,6 +61,18 @@ const TabBar = react_1.default.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])
@@ -103,6 +115,8 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&

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

@@ -50,6 +50,10 @@ const CheckSvg = ({ size = 14, color = '#FFFFFF' }) => (<react_native_svg_1.defa
 const CloseSvg = ({ size = 13, color = '#64748B' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
+const GearSvg = ({ size = 13, color = '#6366F1' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.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"/>
+    <react_native_svg_1.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"/>
+  </react_native_svg_1.default>);
 const TelemetryConsentModal = () => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const fadeAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0))[0];
@@ -126,8 +130,9 @@ const TelemetryConsentModal = () => {
 
             {/* Subheading instruction hint badge */}
             <react_native_1.View style={styles.hintBadge}>
+              <GearSvg size={12} color="#6366F1"/>
               <react_native_1.Text style={styles.hintBadgeText}>
-                ⚙️ You can enable or disable this anytime in Settings
+                You can enable or disable this anytime in Settings
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -258,12 +263,16 @@ const styles = react_native_1.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/commonjs/components/Inspector/UpdateAvailableModal.js

@@ -61,6 +61,9 @@ const CloseSvg = ({ size = 13, color = '#64748B' }) => (<react_native_svg_1.defa
 const SparkleSvg = ({ size = 14, color = '#F59E0B' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4L12 2z" fill={color}/>
   </react_native_svg_1.default>);
+const ArrowRightSvg = ({ size = 14, color = '#94A3B8' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M5 12h14M12 5l7 7-7 7" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
 const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const fadeAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0))[0];
@@ -153,7 +156,7 @@ const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
             </react_native_1.View>
 
             <react_native_1.View style={styles.arrowContainer}>
-              <react_native_1.Text style={styles.arrowText}>➔</react_native_1.Text>
+              <ArrowRightSvg size={14} color="#94A3B8"/>
             </react_native_1.View>
 
             <react_native_1.View style={styles.versionColumn}>

package/dist/commonjs/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/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -869,3 +869,32 @@ const ChevronDownIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14
     <react_native_svg_1.Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
 exports.ChevronDownIcon = ChevronDownIcon;
+const CpuIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="4" y="4" width="16" height="16" rx="2" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="9" y="9" width="6" height="6" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </react_native_svg_1.default>);
+exports.CpuIcon = CpuIcon;
+const WifiIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.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"/>
+  </react_native_svg_1.default>);
+exports.WifiIcon = WifiIcon;
+const ShieldCheckIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M9 12l2 2 4-4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ShieldCheckIcon = ShieldCheckIcon;
+const DatabaseIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Ellipse cx="12" cy="5" rx="9" ry="3" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <react_native_svg_1.Path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </react_native_svg_1.default>);
+exports.DatabaseIcon = DatabaseIcon;
+const PencilIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.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"/>
+  </react_native_svg_1.default>);
+exports.PencilIcon = PencilIcon;
+const PlusIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.PlusIcon = PlusIcon;

package/dist/commonjs/constants/version.d.ts

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

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '2.2.2';
+exports.LIB_VERSION = '2.2.4';

package/dist/commonjs/customHooks/bundleAnalyzer.js

@@ -26,8 +26,9 @@ exports.getBundleModuleEnabled = getBundleModuleEnabled;
 const getSourceCodeModule = () => {
     try {
         const legacy = react_native_1.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 { }
@@ -102,9 +103,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();
@@ -124,7 +125,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', ...(react_native_1.Platform.OS === 'android' ? ['10.0.2.2', '10.0.3.2'] : [])]
         : ['localhost', '127.0.0.1', ...(react_native_1.Platform.OS === 'android' ? ['10.0.2.2', '10.0.3.2'] : [])];
@@ -132,29 +133,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/commonjs/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);