react-native-inapp-inspector 2.0.5 → 2.0.7

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

@@ -17,15 +17,20 @@ 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, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = useInspector();
+    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 isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -66,10 +71,16 @@ const MainScreen = () => {
         }).start();
     }, [activeTab]);
     return (<>
-      {(Platform.OS === 'ios' || Platform.OS === 'android') &&
+      <View pointerEvents="box-none" style={StyleSheet.absoluteFillObject}>
+        {(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}>
@@ -113,6 +124,9 @@ 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 />}
@@ -172,6 +186,9 @@ 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,9 +16,11 @@ 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, } from '../NetworkIcons';
+import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, ExternalLinkIcon, ClockIcon, ReplayIcon, } from '../NetworkIcons';
+import RequestReplayView from './RequestReplayView';
 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}`, [
@@ -42,6 +44,9 @@ 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 }}>
@@ -247,6 +252,16 @@ 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/PerformanceHud.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface PerformanceHudProps {
+    visible: boolean;
+    onPress: () => void;
+}
+export declare const PerformanceHud: React.FC<PerformanceHudProps>;
+export default PerformanceHud;

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

@@ -0,0 +1,170 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, PanResponder, Platform, StyleSheet, Text, View, } from 'react-native';
+import TouchableScale from '../TouchableScale';
+import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
+import { getNativeDeviceMetrics } from '../../native/NativeInspector';
+export const PerformanceHud = ({ visible, onPress, }) => {
+    const [fps, setFps] = useState(60);
+    const [ramMb, setRamMb] = useState(45);
+    // Pan / Drag positioning
+    const pan = useRef(new Animated.ValueXY({ x: 16, y: Platform.OS === 'ios' ? 56 : 36 })).current;
+    const panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            return Math.abs(gestureState.dx) > 4 || Math.abs(gestureState.dy) > 4;
+        },
+        onPanResponderGrant: () => {
+            pan.setOffset({
+                // @ts-ignore
+                x: pan.x._value,
+                // @ts-ignore
+                y: pan.y._value,
+            });
+            pan.setValue({ x: 0, y: 0 });
+        },
+        onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
+            useNativeDriver: false,
+        }),
+        onPanResponderRelease: () => {
+            pan.flattenOffset();
+        },
+    })).current;
+    // Real-time FPS Calculation via requestAnimationFrame
+    useEffect(() => {
+        if (!visible)
+            return;
+        let frameCount = 0;
+        let lastTime = performance.now();
+        let animId;
+        const loop = (now) => {
+            frameCount++;
+            const elapsed = now - lastTime;
+            if (elapsed >= 500) {
+                const currentFps = Math.min(60, Math.round((frameCount * 1000) / elapsed));
+                setFps(currentFps);
+                frameCount = 0;
+                lastTime = now;
+            }
+            animId = requestAnimationFrame(loop);
+        };
+        animId = requestAnimationFrame(loop);
+        return () => {
+            cancelAnimationFrame(animId);
+        };
+    }, [visible]);
+    // Memory Metrics Polling
+    useEffect(() => {
+        if (!visible)
+            return;
+        const interval = setInterval(async () => {
+            try {
+                const metrics = await getNativeDeviceMetrics();
+                if (metrics && metrics.residentMemory != null) {
+                    const mb = metrics.residentMemory / (1024 * 1024);
+                    setRamMb(Math.round(mb));
+                }
+                else if (metrics && metrics.usedRAM != null) {
+                    const mb = metrics.usedRAM / (1024 * 1024);
+                    setRamMb(Math.round(mb));
+                }
+                else if (typeof performance !== 'undefined' &&
+                    // @ts-ignore
+                    performance.memory?.usedJSHeapSize) {
+                    // @ts-ignore
+                    const mb = performance.memory.usedJSHeapSize / (1024 * 1024);
+                    setRamMb(Math.round(mb));
+                }
+            }
+            catch {
+                // Safe fallback
+            }
+        }, 1500);
+        return () => clearInterval(interval);
+    }, [visible]);
+    if (!visible)
+        return null;
+    const fpsColor = fps >= 55
+        ? AppColors.greenColor
+        : fps >= 35
+            ? AppColors.warningIconGold
+            : AppColors.errorColor;
+    return (<Animated.View {...panResponder.panHandlers} style={[
+            styles.hudContainer,
+            {
+                transform: pan.getTranslateTransform(),
+            },
+        ]}>
+      <TouchableScale onPress={onPress} style={styles.hudInner}>
+        {/* FPS Indicator */}
+        <View style={styles.metricItem}>
+          <View style={[styles.statusDot, { backgroundColor: fpsColor }]}/>
+          <Text style={[styles.metricValue, { color: fpsColor }]}>{fps}</Text>
+          <Text style={styles.metricUnit}>FPS</Text>
+        </View>
+
+        <View style={styles.divider}/>
+
+        {/* RAM / Heap Indicator */}
+        <View style={styles.metricItem}>
+          <Text style={styles.metricIcon}>⚡</Text>
+          <Text style={styles.metricValue}>{ramMb}</Text>
+          <Text style={styles.metricUnit}>MB</Text>
+        </View>
+      </TouchableScale>
+    </Animated.View>);
+};
+const styles = StyleSheet.create({
+    hudContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 999998,
+        elevation: 999998,
+    },
+    hudInner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(15, 23, 42, 0.88)',
+        borderRadius: 20,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.18)',
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        gap: 8,
+        shadowColor: AppColors.black,
+        shadowOpacity: 0.35,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+    },
+    metricItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    metricIcon: {
+        fontSize: 10,
+    },
+    metricValue: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors.white,
+    },
+    metricUnit: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 9,
+        color: 'rgba(255, 255, 255, 0.65)',
+        letterSpacing: 0.2,
+    },
+    divider: {
+        width: 1,
+        height: 12,
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    },
+});
+export default PerformanceHud;

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, } from '../NetworkIcons';
+import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, WarningTriangleIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, SparklesIcon, } from '../NetworkIcons';
 import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
 import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
 const PerformanceTab = React.memo(() => {
@@ -373,24 +373,33 @@ const PerformanceTab = React.memo(() => {
       <View style={perfStyles.categoryScrollWrapper}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
           {[
-            { 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') },
+            { 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' },
         ].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,
                 ]}>
-                <Text style={[
+                <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={[
                     perfStyles.categoryChipText,
                     isSelected && perfStyles.categoryChipTextActive,
                 ]}>
-                  {cat.label}
-                </Text>
+                    {cat.label}
+                  </Text>
+                </View>
               </TouchableScale>);
         })}
         </ScrollView>
@@ -401,13 +410,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: 6 }}>
-              <PerformanceIcon color={AppColors.purple} size={17}/>
-              <View>
-                <Text style={perfStyles.heroTitle}>
+            <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}>
                   {t('performance.fpsAreaChartTitle')}
                 </Text>
-                <Text style={perfStyles.heroSubTitle}>
+                <Text style={perfStyles.heroSubTitle} numberOfLines={1}>
                   {t('performance.fpsAreaChartSub')}
                 </Text>
               </View>
@@ -1122,18 +1131,21 @@ const perfStyles = StyleSheet.create({
         color: AppColors.grayTextWeak,
     },
     fpsStatsGrid: {
+        flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8,
+        justifyContent: 'space-around',
+        marginLeft: 8,
     },
     statItem: {
         alignItems: 'center',
-        minWidth: 50,
+        flex: 1,
     },
     statLabel: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
+        fontFamily: AppFonts.interMedium,
+        fontSize: 9.5,
         color: AppColors.grayTextWeak,
+        textAlign: 'center',
     },
     statValue: {
         fontFamily: AppFonts.interBold,

package/dist/esm/components/Inspector/RequestReplayModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NetworkLog } from '../../types';
+interface RequestReplayModalProps {
+    visible: boolean;
+    onClose: () => void;
+    request: NetworkLog;
+}
+export declare const RequestReplayModal: React.FC<RequestReplayModalProps>;
+export default RequestReplayModal;