react-native-inapp-inspector 2.0.7 → 2.2.0

package/dist/commonjs/types/interfaces.d.ts

@@ -3,64 +3,6 @@ import { ViewStyle } from 'react-native';
 import { Animated, PanResponderInstance } from 'react-native';
 import type { ActiveTab, BreadcrumbType, CrashType, GroupedListItem, LocalFilter, LogFilter, Method, SettingsPage, SettingsSubTab, SortOrder, StatusFilter } from './index';
 export type SearchScope = 'all' | 'url' | 'reqBody' | 'resBody' | 'headers';
-export interface StorageEntry {
-    key: string;
-    value: string;
-    sizeBytes: number;
-    isJson: boolean;
-    parsedJson?: any;
-    updatedAt: number;
-}
-export interface DeviceInfoData {
-    appName: string;
-    bundleId: string;
-    appVersion: string;
-    buildNumber: string;
-    reactNativeVersion: string;
-    jsEngine: string;
-    isHermes: boolean;
-    isFabric: boolean;
-    isTurboModule: boolean;
-    platform: 'ios' | 'android' | 'windows' | 'macos' | 'web';
-    osVersion: string;
-    deviceModel: string;
-    deviceId?: string;
-    isDevice: boolean;
-    screenWidth: number;
-    screenHeight: number;
-    screenScale: number;
-    screenFontScale: number;
-    statusBarHeight: number;
-    memoryMb?: number;
-    arch?: string;
-    locale?: string;
-    timeZone?: string;
-}
-export type AuditSeverity = 'critical' | 'warning' | 'info' | 'optimal';
-export type AuditCategory = 'dependency' | 'typescript' | 'peer' | 'performance' | 'security';
-export interface AuditIssue {
-    id: string;
-    title: string;
-    message: string;
-    severity: AuditSeverity;
-    category: AuditCategory;
-    packageName?: string;
-    currentVersion?: string;
-    requiredVersion?: string;
-    fixCommand?: string;
-    fixSnippet?: string;
-    timestamp: number;
-}
-export interface PackageHealthReport {
-    score: number;
-    grade: 'A+' | 'A' | 'B' | 'C' | 'D';
-    totalIssues: number;
-    criticalCount: number;
-    warningCount: number;
-    infoCount: number;
-    issues: AuditIssue[];
-    scannedAt: number;
-}
 export interface ParsedStackFrame {
     method: string;
     file: string;
@@ -211,7 +153,6 @@ export interface PersistedSettings {
     reduxExpandDepth?: number;
     showDuplicateLogs?: boolean;
     showUpdateToast?: boolean;
-    hasCompletedWalkthrough?: boolean;
 }
 export interface NetworkInspectorProps {
     enabled?: boolean;
@@ -223,8 +164,6 @@ export interface NetworkInspectorProps {
     environment?: 'DEV' | 'UAT' | 'PrePROD' | 'PROD' | 'QA' | 'Staging' | string;
     initialVisible?: boolean;
     visible?: boolean;
-    initialTab?: ActiveTab;
-    enablePerformanceHud?: boolean;
 }
 export interface NavigationTrackerProps {
     onStateChange: (state: any) => void;
@@ -237,17 +176,12 @@ export interface InspectorContextValue {
     isEnabled: boolean;
     appIcon?: any;
     environment?: string;
-    isPerformanceHudEnabled: boolean;
-    setIsPerformanceHudEnabled: React.Dispatch<React.SetStateAction<boolean>>;
     modalHeightPercent: number;
     setModalHeightPercent: React.Dispatch<React.SetStateAction<number>>;
     modalAnimationType: 'slide' | 'fade' | 'none';
     setModalAnimationType: React.Dispatch<React.SetStateAction<'slide' | 'fade' | 'none'>>;
     hasNavigationContext: boolean;
     setNavState: React.Dispatch<React.SetStateAction<any>>;
-    isWalkthroughVisible: boolean;
-    setIsWalkthroughVisible: React.Dispatch<React.SetStateAction<boolean>>;
-    openWalkthrough: () => void;
     activeTab: ActiveTab;
     switchActiveTab: (key: ActiveTab) => void;
     tabVisibility: Record<ActiveTab, boolean>;
@@ -371,17 +305,6 @@ export interface InspectorContextValue {
     maxCrashLogs: number;
     setMaxCrashLogs: React.Dispatch<React.SetStateAction<number>>;
     clearAllCrashes: () => void;
-    storageEntries: StorageEntry[];
-    refreshStorageEntries: () => Promise<void>;
-    updateStorageEntry: (key: string, value: string) => Promise<void>;
-    deleteStorageEntry: (key: string) => Promise<void>;
-    clearAllStorageEntries: () => Promise<void>;
-    selectedStorageKey: string | null;
-    setSelectedStorageKey: React.Dispatch<React.SetStateAction<string | null>>;
-    deviceInfo: DeviceInfoData;
-    auditReport: PackageHealthReport;
-    refreshAuditReport: () => void;
-    logCustomAuditIssue: (issue: Omit<AuditIssue, 'id' | 'timestamp'>) => void;
     settingsActiveSubTab: SettingsSubTab;
     setSettingsActiveSubTab: React.Dispatch<React.SetStateAction<SettingsSubTab>>;
     defaultTab: ActiveTab;

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

@@ -14,7 +14,7 @@ import { getTelemetryConsentStatus } from '../../helpers/telemetry';
 import { UpdateAvailableModal } from './UpdateAvailableModal';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, } from '../NetworkIcons';
 const InspectorHeader = React.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, deviceInfo, } = useInspector();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, settingsPage, setSettingsPage, resetToDefaults, closeModal, detailTitle, activeTab, environment, visible, selectedCrash, setSelectedCrash, } = useInspector();
     const [showUpdateModal, setShowUpdateModal] = React.useState(false);
     const [isTelemetryActive, setIsTelemetryActive] = React.useState(false);
     const telemetryPulseAnim = React.useRef(new Animated.Value(1)).current;
@@ -264,44 +264,38 @@ const InspectorHeader = React.memo(() => {
                       </Pressable>)}
                   </View>
 
-                  {/* OS & NPM Version Common Chip Bar */}
+                  {/* OS & NPM Version Representation */}
                   <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 5,
                 minWidth: 0,
             }}>
-                    {/* Unified Platform & Build Chip */}
                     <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                backgroundColor: 'rgba(255, 255, 255, 0.16)',
-                borderRadius: 6,
-                paddingHorizontal: 6.5,
-                paddingVertical: 2.5,
-                gap: 4.5,
+                backgroundColor: `${AppColors.white}1F`,
+                borderRadius: 5,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                gap: 4,
                 borderWidth: 1,
-                borderColor: 'rgba(255, 255, 255, 0.28)',
+                borderColor: `${AppColors.white}2E`,
                 flexShrink: 0,
             }}>
-                      {Platform.OS === 'ios' ? (<AppleIcon color="#FFFFFF" size={10.5}/>) : (<AndroidIcon color="#FFFFFF" size={10.5}/>)}
+                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={10}/>)}
                       <Text style={{
-                fontFamily: AppFonts.interBold,
+                fontFamily: AppFonts.interMedium,
                 fontSize: 9.5,
-                color: '#FFFFFF',
+                color: `${AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
                         {Platform.OS === 'ios'
-                ? `iOS ${String(deviceInfo?.osVersion || Platform.Version).replace(/^(ios\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
-                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
-                    : ''}`
-                : `Android ${String(deviceInfo?.osVersion || Platform.Version).replace(/^(android\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
-                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
-                    : ''}`}
+                ? `iOS ${Platform.Version}`
+                : `Android ${Platform.Version}`}
                       </Text>
                     </View>
 
-                    {/* Unified NPM Version Chip */}
                     <Pressable onPress={() => {
                 if (updateAvailable) {
                     setShowUpdateModal(true);
@@ -310,23 +304,26 @@ const InspectorHeader = React.memo(() => {
                     Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
                 }
             }} style={{
-                backgroundColor: 'rgba(255, 255, 255, 0.16)',
-                borderRadius: 6,
-                paddingHorizontal: 6.5,
-                paddingVertical: 2.5,
+                backgroundColor: '#FFFFFF',
+                borderRadius: 5,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 4,
-                borderWidth: 1,
-                borderColor: 'rgba(255, 255, 255, 0.28)',
                 flexShrink: 0,
+                shadowColor: '#000000',
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.15,
+                shadowRadius: 2,
+                elevation: 2,
             }}>
-                      <NpmIcon size={11} color="#FF6B6B"/>
+                      <NpmIcon size={11} color="#CB3837"/>
                       <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 9.5,
-                color: '#FFFFFF',
-                letterSpacing: 0.15,
+                color: '#CB3837',
+                letterSpacing: 0.2,
             }} numberOfLines={1}>
                         v{LIB_VERSION}
                       </Text>

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

@@ -17,20 +17,15 @@ import BundleTab from './BundleTab';
 import PerformanceTab from './PerformanceTab';
 import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
-import StorageTab from './StorageTab';
-import DeviceTab from './DeviceTab';
-import AuditTab from './AuditTab';
 import SettingsPanel from './SettingsPanel';
 import TelemetryConsentModal from './TelemetryConsentModal';
-import FirstTimeWalkthroughModal from './FirstTimeWalkthroughModal';
 import NpmUpdateToast from './NpmUpdateToast';
 import Toast from '../Toast';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
-import PerformanceHud from './PerformanceHud';
 const MainScreen = () => {
-    const { visible, setVisible, switchActiveTab, modalAnimationType, closeModal, modalHeightPercent, isWalkthroughVisible, setIsWalkthroughVisible, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, isPerformanceHudEnabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -71,16 +66,10 @@ const MainScreen = () => {
         }).start();
     }, [activeTab]);
     return (<>
-      <View pointerEvents="box-none" style={StyleSheet.absoluteFillObject}>
-        {(Platform.OS === 'ios' || Platform.OS === 'android') &&
+      {(Platform.OS === 'ios' || Platform.OS === 'android') &&
             isEnabled &&
             !visible &&
             !useNativeFab && <FabLauncher />}
-        {isEnabled && !visible && isPerformanceHudEnabled && (<PerformanceHud visible={true} onPress={() => {
-                setVisible(true);
-                switchActiveTab('performance');
-            }}/>)}
-      </View>
       <Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
@@ -124,9 +113,6 @@ const MainScreen = () => {
                       {activeTab === 'logs' && <ConsoleTab />}
                       {activeTab === 'analytics' && <AnalyticsTab />}
                       {activeTab === 'redux' && <ReduxTab />}
-                      {activeTab === 'storage' && <StorageTab />}
-                      {activeTab === 'device' && <DeviceTab />}
-                      {activeTab === 'audit' && <AuditTab />}
                       {activeTab === 'bundle' && <BundleTab />}
                       {activeTab === 'performance' && <PerformanceTab />}
                       {activeTab === 'crash' && <CrashTab />}
@@ -186,9 +172,6 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast />
-
-              {/* First-Time Walkthrough & Quick Guide Modal */}
-              <FirstTimeWalkthroughModal visible={isWalkthroughVisible} onClose={() => setIsWalkthroughVisible(false)}/>
             </View>
           </View>
         </ErrorBoundary>)}

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

@@ -16,11 +16,9 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { getStatusColor, getSize, formatDateTime, getFetchCommand, getCurlCommand, } from '../../helpers';
-import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, ExternalLinkIcon, ClockIcon, ReplayIcon, } from '../NetworkIcons';
-import RequestReplayView from './RequestReplayView';
+import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, ExternalLinkIcon, ClockIcon, } from '../NetworkIcons';
 const NetworkDetail = React.memo(() => {
     const { t } = useTranslation();
-    const [isReplayScreenActive, setIsReplayScreenActive] = React.useState(false);
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = useInspector();
     const handleOpenUrl = () => {
         Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${detailDisplayUrl}`, [
@@ -44,9 +42,6 @@ const NetworkDetail = React.memo(() => {
     };
     if (!selected)
         return null;
-    if (isReplayScreenActive) {
-        return (<RequestReplayView request={selected} onBack={() => setIsReplayScreenActive(false)}/>);
-    }
     return (<View style={{ flex: 1 }}>
       {/* Non-scrollable details header */}
       <View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
@@ -252,16 +247,6 @@ const NetworkDetail = React.memo(() => {
                   </View>
 
                   <View style={styles.detailInfoRight}>
-                    <TouchableScale style={[
-                    styles.iconSquareBtn,
-                    {
-                        backgroundColor: `${AppColors.purple}15`,
-                        borderColor: `${AppColors.purple}30`,
-                        borderWidth: 1,
-                    },
-                ]} onPress={() => setIsReplayScreenActive(true)} accessible={true} accessibilityRole="button" accessibilityLabel="Edit & Resend Request" hitSlop={12}>
-                      <ReplayIcon color={AppColors.purple} size={14}/>
-                    </TouchableScale>
                     <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <ExternalLinkIcon color={AppColors.sky600} size={14}/>
                     </TouchableScale>

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

@@ -9,7 +9,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { getRuntimeDiagnostics } from '../../helpers';
-import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, WarningTriangleIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, SparklesIcon, } from '../NetworkIcons';
+import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, } from '../NetworkIcons';
 import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
 import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
 const PerformanceTab = React.memo(() => {
@@ -373,33 +373,24 @@ const PerformanceTab = React.memo(() => {
       <View style={perfStyles.categoryScrollWrapper}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
           {[
-            { key: 'ALL', label: t('performance.catAll'), icon: 'all' },
-            { key: 'JANKY', label: t('performance.catJanky'), icon: 'janky' },
-            { key: 'NAVIGATION', label: t('performance.catNavigation'), icon: 'nav' },
-            { key: 'RENDER', label: t('performance.catRender'), icon: 'render' },
-            { key: 'MEMORY', label: t('performance.catMemory'), icon: 'memory' },
-            { key: 'IO', label: t('performance.catIo'), icon: 'io' },
+            { key: 'ALL', label: t('performance.catAll') },
+            { key: 'JANKY', label: t('performance.catJanky') },
+            { key: 'NAVIGATION', label: t('performance.catNavigation') },
+            { key: 'RENDER', label: t('performance.catRender') },
+            { key: 'MEMORY', label: t('performance.catMemory') },
+            { key: 'IO', label: t('performance.catIo') },
         ].map(cat => {
             const isSelected = filterCategory === cat.key;
-            const iconColor = isSelected ? AppColors.white : AppColors.grayText;
             return (<TouchableScale key={cat.key} onPress={() => setFilterCategory(cat.key)} style={[
                     perfStyles.categoryChip,
                     isSelected && perfStyles.categoryChipActive,
                 ]}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                  {cat.icon === 'all' && <SparklesIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'janky' && <WarningTriangleIcon size={12} color={isSelected ? AppColors.white : AppColors.errorColor}/>}
-                  {cat.icon === 'nav' && <MapIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'render' && <AtomIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'memory' && <BrainIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'io' && <GlobeIcon size={12} color={iconColor}/>}
-                  <Text style={[
+                <Text style={[
                     perfStyles.categoryChipText,
                     isSelected && perfStyles.categoryChipTextActive,
                 ]}>
-                    {cat.label}
-                  </Text>
-                </View>
+                  {cat.label}
+                </Text>
               </TouchableScale>);
         })}
         </ScrollView>
@@ -410,13 +401,13 @@ const PerformanceTab = React.memo(() => {
         {/* ── 1. REAL-TIME FPS SCORECARD & SMOOTH AREA GRAPH ── */}
         <View style={perfStyles.heroCard}>
           <View style={perfStyles.heroHeaderRow}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 }}>
-              <PerformanceIcon color={AppColors.purple} size={18}/>
-              <View style={{ flex: 1 }}>
-                <Text style={perfStyles.heroTitle} numberOfLines={1}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <PerformanceIcon color={AppColors.purple} size={17}/>
+              <View>
+                <Text style={perfStyles.heroTitle}>
                   {t('performance.fpsAreaChartTitle')}
                 </Text>
-                <Text style={perfStyles.heroSubTitle} numberOfLines={1}>
+                <Text style={perfStyles.heroSubTitle}>
                   {t('performance.fpsAreaChartSub')}
                 </Text>
               </View>
@@ -1131,21 +1122,18 @@ const perfStyles = StyleSheet.create({
         color: AppColors.grayTextWeak,
     },
     fpsStatsGrid: {
-        flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'space-around',
-        marginLeft: 8,
+        gap: 8,
     },
     statItem: {
         alignItems: 'center',
-        flex: 1,
+        minWidth: 50,
     },
     statLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
         color: AppColors.grayTextWeak,
-        textAlign: 'center',
     },
     statValue: {
         fontFamily: AppFonts.interBold,