react-native-inapp-inspector 2.2.9 → 2.3.1

package/dist/esm/components/SkeletonPlaceholder.js

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ cardCount = 4, }) {
+    const shimmerAnim = useRef(new Animated.Value(0.35)).current;
+    useEffect(() => {
+        const animation = Animated.loop(Animated.sequence([
+            Animated.timing(shimmerAnim, {
+                toValue: 0.85,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shimmerAnim, {
+                toValue: 0.35,
+                duration: 750,
+                useNativeDriver: true,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [shimmerAnim]);
+    return (<View style={skeletonStyles.container}>
+      {/* ─── Search & Scope Toolbar Skeleton ─── */}
+      <View style={skeletonStyles.toolbarSkeleton}>
+        <Animated.View style={[
+            skeletonStyles.searchBarSkeleton,
+            { opacity: shimmerAnim },
+        ]}/>
+        <View style={skeletonStyles.actionButtonsRow}>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+          <Animated.View style={[skeletonStyles.iconButtonSkeleton, { opacity: shimmerAnim }]}/>
+        </View>
+      </View>
+
+      {/* ─── Quick Filter Chips Skeleton Strip ─── */}
+      <View style={skeletonStyles.chipStripSkeleton}>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 48, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 68, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 76, opacity: shimmerAnim }]}/>
+        <Animated.View style={[skeletonStyles.chipSkeleton, { width: 58, opacity: shimmerAnim }]}/>
+      </View>
+
+      {/* ─── List Cards Skeleton ─── */}
+      {Array.from({ length: cardCount }).map((_, i) => (<Animated.View key={`skeleton_card_${i}`} style={[skeletonStyles.cardSkeleton, { opacity: shimmerAnim }]}>
+          {/* Top row: Status pill + Method + Time */}
+          <View style={skeletonStyles.cardTopRow}>
+            <View style={skeletonStyles.badgeGroup}>
+              <View style={skeletonStyles.statusBadgeSkeleton}/>
+              <View style={skeletonStyles.methodBadgeSkeleton}/>
+            </View>
+            <View style={skeletonStyles.timeSkeleton}/>
+          </View>
+
+          {/* Middle row: URL lines */}
+          <View style={skeletonStyles.urlLineLong}/>
+          <View style={skeletonStyles.urlLineShort}/>
+
+          {/* Bottom row: Latency & Size */}
+          <View style={skeletonStyles.cardBottomRow}>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+            <View style={skeletonStyles.metaPillSkeleton}/>
+          </View>
+        </Animated.View>))}
+    </View>);
+});
+const skeletonStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        paddingHorizontal: 12,
+        paddingTop: 8,
+    },
+    toolbarSkeleton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 8,
+    },
+    searchBarSkeleton: {
+        flex: 1,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    actionButtonsRow: {
+        flexDirection: 'row',
+        gap: 6,
+    },
+    iconButtonSkeleton: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    chipStripSkeleton: {
+        flexDirection: 'row',
+        gap: 6,
+        marginBottom: 10,
+    },
+    chipSkeleton: {
+        height: 24,
+        borderRadius: 6,
+        backgroundColor: AppColors.graySurface,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    cardSkeleton: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    cardTopRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    badgeGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    statusBadgeSkeleton: {
+        width: 38,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    methodBadgeSkeleton: {
+        width: 44,
+        height: 18,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    timeSkeleton: {
+        width: 48,
+        height: 12,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+    urlLineLong: {
+        height: 13,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 5,
+        width: '90%',
+    },
+    urlLineShort: {
+        height: 11,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+        marginBottom: 8,
+        width: '55%',
+    },
+    cardBottomRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 2,
+    },
+    metaPillSkeleton: {
+        width: 52,
+        height: 14,
+        borderRadius: 4,
+        backgroundColor: AppColors.graySurface,
+    },
+});
+export default SkeletonPlaceholder;

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.2.9";
+export declare const LIB_VERSION = "2.3.1";

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

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

@@ -1,3 +1,4 @@
+import { RouteInfo } from "../types";
 type NetworkLog = {
     id: number;
     url: string;
@@ -11,7 +12,9 @@ type NetworkLog = {
     client?: string;
     requestHeaders?: Record<string, string>;
     responseHeaders?: Record<string, string>;
+    routeInfo?: RouteInfo;
 };
+export declare const setRouteInfoProvider: (provider: (() => RouteInfo | null) | null) => void;
 export declare const setNetworkModuleEnabled: (enabled: boolean) => void;
 export declare const getNetworkModuleEnabled: () => boolean;
 export declare const subscribeNetworkLogs: (callback: (logs: NetworkLog[]) => void) => () => void;

package/dist/esm/customHooks/networkLogger.js

@@ -4,6 +4,10 @@ let logs = [];
 let listeners = [];
 let counter = 0;
 let isNetworkModuleEnabled = true;
+let currentRouteProvider = null;
+export const setRouteInfoProvider = (provider) => {
+    currentRouteProvider = provider;
+};
 export const setNetworkModuleEnabled = (enabled) => {
     isNetworkModuleEnabled = enabled;
 };
@@ -185,6 +189,7 @@ export const setupNetworkLogger = () => {
                 else if (caller?.toLowerCase().includes('axios')) {
                     client = 'axios';
                 }
+                const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
                 addOrUpdateLog({
                     id,
                     url: finalUrl,
@@ -192,6 +197,7 @@ export const setupNetworkLogger = () => {
                     startTime: start,
                     caller,
                     client,
+                    routeInfo: currentRoute || undefined,
                     request: method === "GET" ? undefined : parseRequestData(options?.body),
                     requestHeaders,
                 });
@@ -298,6 +304,7 @@ export const addAxiosInterceptors = (axiosInstance) => {
         config.__logId = id;
         config.__logStart = start;
         config.__logCaller = caller;
+        const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
         addOrUpdateLog({
             id,
             url,
@@ -305,6 +312,7 @@ export const addAxiosInterceptors = (axiosInstance) => {
             startTime: start,
             caller,
             client: 'axios',
+            routeInfo: currentRoute || undefined,
             request: method === "GET" ? undefined : parseRequestData(config.data),
             requestHeaders: normaliseHeaders(config.headers),
         });

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

@@ -37,11 +37,11 @@ export declare const getRegisteredMMKVInstanceIds: () => string[];
  */
 export declare const calculateByteSize: (str: string) => number;
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export declare const analyzeStorageValue: (rawVal: any) => {
     strVal: string;
-    parsedVal?: any;
+    parsedValue?: any;
     type: "json" | "string" | "number" | "boolean" | "null";
     byteSize: number;
 };

package/dist/esm/customHooks/storageInspector.js

@@ -255,34 +255,38 @@ export const calculateByteSize = (str) => {
     return str.length * 2;
 };
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export const analyzeStorageValue = (rawVal) => {
     if (rawVal === null || rawVal === undefined) {
         return { strVal: 'null', type: 'null', byteSize: 4 };
     }
     const strVal = typeof rawVal === 'string' ? rawVal : String(rawVal);
-    const byteSize = calculateByteSize(strVal);
+    const byteSize = strVal.length * 2;
     if (typeof rawVal === 'number') {
-        return { strVal, parsedVal: rawVal, type: 'number', byteSize };
+        return { strVal, parsedValue: rawVal, type: 'number', byteSize };
     }
     if (typeof rawVal === 'boolean') {
-        return { strVal, parsedVal: rawVal, type: 'boolean', byteSize };
+        return { strVal, parsedValue: rawVal, type: 'boolean', byteSize };
     }
     const trimmed = strVal.trim();
     if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
         (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
-        try {
-            const parsed = JSON.parse(trimmed);
-            return { strVal, parsedVal: parsed, type: 'json', byteSize };
+        // For small/medium JSON, parse eagerly; for huge payloads (>10KB), parse lazily on expand
+        if (trimmed.length < 10000) {
+            try {
+                const parsed = JSON.parse(trimmed);
+                return { strVal, parsedValue: parsed, type: 'json', byteSize };
+            }
+            catch { }
         }
-        catch { }
+        return { strVal, type: 'json', byteSize };
     }
     if (trimmed === 'true' || trimmed === 'false') {
-        return { strVal, parsedVal: trimmed === 'true', type: 'boolean', byteSize };
+        return { strVal, parsedValue: trimmed === 'true', type: 'boolean', byteSize };
     }
     if (!isNaN(Number(trimmed)) && trimmed !== '') {
-        return { strVal, parsedVal: Number(trimmed), type: 'number', byteSize };
+        return { strVal, parsedValue: Number(trimmed), type: 'number', byteSize };
     }
     return { strVal, type: 'string', byteSize };
 };
@@ -307,7 +311,7 @@ export const fetchStorageEntries = async (driver, instanceId) => {
                     entries.push({
                         key: k,
                         value: analysis.strVal,
-                        parsedValue: analysis.parsedVal,
+                        parsedValue: analysis.parsedValue,
                         type: analysis.type,
                         byteSize: analysis.byteSize,
                     });
@@ -320,7 +324,7 @@ export const fetchStorageEntries = async (driver, instanceId) => {
                     entries.push({
                         key: k,
                         value: analysis.strVal,
-                        parsedValue: analysis.parsedVal,
+                        parsedValue: analysis.parsedValue,
                         type: analysis.type,
                         byteSize: analysis.byteSize,
                     });
@@ -361,7 +365,7 @@ export const fetchStorageEntries = async (driver, instanceId) => {
                 entries.push({
                     key: k,
                     value: analysis.strVal,
-                    parsedValue: analysis.parsedVal,
+                    parsedValue: analysis.parsedValue,
                     type: analysis.type,
                     byteSize: analysis.byteSize,
                 });

package/dist/esm/helpers/index.d.ts

@@ -15,6 +15,7 @@ export declare const getFetchCommand: (log: NetworkLog) => string;
 export declare const deduplicateLogs: (raw: NetworkLog[]) => NetworkLog[];
 export declare const escapeRegex: (str: string) => string;
 export declare const getNavigationInfo: (state: any, path?: string[]) => RouteInfo;
+export declare const getLogPageName: (log: NetworkLog, routeInfo?: RouteInfo | null) => string;
 export declare const flattenObject: (obj: any, prefix?: string) => Record<string, any>;
 export declare const getDiff: (oldObj: any, newObj: any) => DiffResult[];
 export declare const formatDisplayUrl: (url: string) => string;
@@ -24,6 +25,11 @@ export declare const isAllValuesEmpty: (obj: Record<string, any>) => boolean;
 export declare const formatDateTimeToAnalytics: (ts: number) => string;
 export declare const getBundleIdentifier: () => string;
 export declare const getAppName: () => string;
+export declare const getAppVersionAndBuild: () => {
+    version: string;
+    build: string;
+    formatted: string;
+};
 export declare const handleOpenExternalLink: (url: string) => void;
 /** Formats a timestamp as HH:MM:SS (no milliseconds). */
 export declare const formatTimeShort: (ts: number) => string;

package/dist/esm/helpers/index.js

@@ -177,16 +177,33 @@ export const escapeRegex = (str) => {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
 export const getNavigationInfo = (state, path = []) => {
-    if (!state?.routes) {
+    if (!state) {
         return {
-            path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+            path: path.length > 0 ? path.join(' ➔ ') : '',
             params: null,
         };
     }
-    const route = state.routes[state.index ?? 0];
+    if (state.name && !state.routes) {
+        const fullPath = path.length > 0 ? [...path, state.name].join(' ➔ ') : state.name;
+        return { path: fullPath, params: state.params || null };
+    }
+    if (!state.routes ||
+        !Array.isArray(state.routes) ||
+        state.routes.length === 0) {
+        return {
+            path: path.length > 0 ? path.join(' ➔ ') : '',
+            params: null,
+        };
+    }
+    const index = typeof state.index === 'number' &&
+        state.index >= 0 &&
+        state.index < state.routes.length
+        ? state.index
+        : 0;
+    const route = state.routes[index];
     if (!route) {
         return {
-            path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+            path: path.length > 0 ? path.join(' ➔ ') : '',
             params: null,
         };
     }
@@ -194,9 +211,87 @@ export const getNavigationInfo = (state, path = []) => {
     if (route?.state) {
         return getNavigationInfo(route.state, currentPath);
     }
-    const resolved = currentPath.length > 0 ? currentPath.join(' ➔ ') : 'Navigators';
+    const resolved = currentPath.length > 0 ? currentPath.join(' ➔ ') : route.name || '';
     return { path: resolved, params: route.params || null };
 };
+export const getLogPageName = (log, routeInfo) => {
+    // 1. If routeInfo has a valid path, resolve the leaf screen name
+    const effectiveRoute = routeInfo || log?.routeInfo;
+    if (effectiveRoute &&
+        effectiveRoute.path &&
+        effectiveRoute.path !== 'Navigators') {
+        const parts = effectiveRoute.path
+            .split(' ➔ ')
+            .map((s) => s.trim())
+            .filter(Boolean);
+        if (parts.length > 0) {
+            return parts[parts.length - 1]; // Leaf screen name, e.g. "HomeScreen", "ProfileScreen"
+        }
+        return effectiveRoute.path;
+    }
+    // 2. Extract screen / component name from log.caller stack trace
+    if (log.caller && log.caller !== 'Unknown') {
+        try {
+            const match = log.caller.match(/([^/\\]+)\.(tsx|jsx|ts|js)/i);
+            if (match && match[1]) {
+                const file = match[1];
+                const ignored = [
+                    'networklogger',
+                    'fetch',
+                    'axios',
+                    'apiclient',
+                    'request',
+                    'http',
+                    'index',
+                    'nativeinspector',
+                    'inappinspector',
+                    'bundleanalyzer',
+                ];
+                if (!ignored.includes(file.toLowerCase())) {
+                    return file;
+                }
+            }
+        }
+        catch (e) { }
+    }
+    // 3. Fallback to API resource / endpoint category from URL
+    if (log.url) {
+        try {
+            const cleanUrl = log.url.split('?')[0].split('#')[0];
+            const withoutProto = cleanUrl.replace(/^https?:\/\//i, '');
+            const slashIdx = withoutProto.indexOf('/');
+            if (slashIdx !== -1) {
+                const pathSegments = withoutProto
+                    .substring(slashIdx + 1)
+                    .split('/')
+                    .filter(Boolean);
+                const ignoredSegments = [
+                    'api',
+                    'v1',
+                    'v2',
+                    'v3',
+                    'v4',
+                    'rest',
+                    'graphql',
+                    'json',
+                    'data',
+                    'service',
+                    'app',
+                ];
+                const meaningful = pathSegments.filter(s => !ignoredSegments.includes(s.toLowerCase()));
+                if (meaningful.length > 0) {
+                    const seg = meaningful[0];
+                    return seg.charAt(0).toUpperCase() + seg.slice(1);
+                }
+            }
+            const host = withoutProto.split('/')[0];
+            if (host)
+                return host;
+        }
+        catch (e) { }
+    }
+    return 'General';
+};
 export const flattenObject = (obj, prefix = '') => {
     let result = {};
     if (typeof obj === 'object' && obj !== null) {
@@ -351,6 +446,99 @@ export const getAppName = () => {
     }
     return 'App';
 };
+export const getAppVersionAndBuild = () => {
+    let version = '';
+    let build = '';
+    // 1. Try ExpoApplication / ExponentConstants
+    const ExpoApplication = NativeModules.ExpoApplication;
+    if (ExpoApplication) {
+        if (typeof ExpoApplication.nativeAppVersion === 'string') {
+            version = ExpoApplication.nativeAppVersion;
+        }
+        if (typeof ExpoApplication.nativeBuildVersion === 'string') {
+            build = ExpoApplication.nativeBuildVersion;
+        }
+    }
+    const ExponentConstants = NativeModules.ExponentConstants;
+    if (ExponentConstants) {
+        const manifest = ExponentConstants.manifest || ExponentConstants.expoConfig;
+        if (manifest) {
+            if (!version && manifest.version) {
+                version = String(manifest.version);
+            }
+            if (!build) {
+                if (manifest.ios?.buildNumber) {
+                    build = String(manifest.ios.buildNumber);
+                }
+                else if (manifest.android?.versionCode) {
+                    build = String(manifest.android.versionCode);
+                }
+            }
+        }
+    }
+    // 2. Try react-native-device-info
+    const RNDeviceInfo = NativeModules.RNDeviceInfo;
+    if (RNDeviceInfo) {
+        if (!version) {
+            if (typeof RNDeviceInfo.appVersion === 'string') {
+                version = RNDeviceInfo.appVersion;
+            }
+            else if (typeof RNDeviceInfo.getVersion === 'function') {
+                try {
+                    version = RNDeviceInfo.getVersion();
+                }
+                catch (e) { }
+            }
+        }
+        if (!build) {
+            if (typeof RNDeviceInfo.buildNumber === 'string') {
+                build = RNDeviceInfo.buildNumber;
+            }
+            else if (typeof RNDeviceInfo.getBuildNumber === 'function') {
+                try {
+                    build = RNDeviceInfo.getBuildNumber();
+                }
+                catch (e) { }
+            }
+        }
+    }
+    // 3. Try PlatformConstants / Platform.constants
+    const constants = Platform.constants || NativeModules.PlatformConstants;
+    if (constants) {
+        if (!version &&
+            constants.Version &&
+            typeof constants.Version === 'string' &&
+            constants.Version.includes('.')) {
+            version = constants.Version;
+        }
+        if (!version && constants.reactNativeVersion) {
+            const rnv = constants.reactNativeVersion;
+            if (rnv.major !== undefined) {
+                version = `${rnv.major}.${rnv.minor}.${rnv.patch}`;
+            }
+        }
+    }
+    // 4. Try Android AppInfo
+    const AppInfo = NativeModules.AppInfo;
+    if (AppInfo) {
+        if (!version && typeof AppInfo.versionName === 'string') {
+            version = AppInfo.versionName;
+        }
+        if (!build && typeof AppInfo.versionCode === 'string') {
+            build = AppInfo.versionCode;
+        }
+    }
+    // Fallbacks
+    if (!version)
+        version = '1.0.0';
+    if (!build)
+        build = '1';
+    return {
+        version,
+        build,
+        formatted: `${version} (${build})`,
+    };
+};
 export const handleOpenExternalLink = (url) => {
     if (!url)
         return;