react-native-inapp-inspector 2.0.4 → 2.0.6

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

@@ -11,9 +11,11 @@ import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
 import { getStatusColor, getAppName, formatTime, getSize } from '../../helpers';
 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, } = 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, deviceInfo, } = useInspector();
+    const [showUpdateModal, setShowUpdateModal] = React.useState(false);
     const [isTelemetryActive, setIsTelemetryActive] = React.useState(false);
     const telemetryPulseAnim = React.useRef(new Animated.Value(1)).current;
     React.useEffect(() => {
@@ -77,7 +79,8 @@ const InspectorHeader = React.memo(() => {
     const isDetailView = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'redux' &&
+            (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
     const isSettingsView = settingsPage !== null;
     const isAnySelected = isDetailView || isSettingsView;
@@ -102,7 +105,8 @@ const InspectorHeader = React.memo(() => {
         }
     }, [settingsPage]);
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
-    return (<LinearGradient colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.headerGradient}>
+    return (<>
+      <LinearGradient colors={['#4F46E5', '#7C3AED']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.headerGradient}>
       <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
         <View style={styles.header}>
           <View style={[
@@ -203,7 +207,12 @@ const InspectorHeader = React.memo(() => {
             }}>
                 <AppHeaderLogo size={46} customIcon={appIcon}/>
                 <View style={{ gap: 2.5, flex: 1, minWidth: 0 }}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                minWidth: 0,
+            }}>
                     <Text style={[styles.headerTitle, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
                       {getAppName()}
                     </Text>
@@ -217,93 +226,117 @@ const InspectorHeader = React.memo(() => {
                     marginBottom: 0,
                 },
             ]}>
-                      <Text style={[
-                styles.envBadgeText,
-                { color: envConfig.text },
-            ]}>
+                      <Text style={[styles.envBadgeText, { color: envConfig.text }]}>
                         {envConfig.label}
                       </Text>
                     </View>
-                    {updateAvailable && (<Pressable hitSlop={10} onPress={() => Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${LIB_VERSION}).`, [
-                    { text: 'Later', style: 'cancel' },
-                    {
-                        text: 'View on NPM',
-                        onPress: () => Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { }),
-                    },
-                ])} style={{
+                    {updateAvailable && (<Pressable hitSlop={10} onPress={() => setShowUpdateModal(true)} style={{
+                    flexDirection: 'row',
                     alignItems: 'center',
-                    justifyContent: 'center',
+                    backgroundColor: '#F59E0B',
+                    borderRadius: 5,
+                    paddingHorizontal: 5.5,
+                    paddingVertical: 1.5,
+                    gap: 3.5,
+                    shadowColor: '#F59E0B',
+                    shadowOffset: { width: 0, height: 1.5 },
+                    shadowOpacity: 0.35,
+                    shadowRadius: 3,
+                    elevation: 3,
                     flexShrink: 0,
                 }}>
                         <Animated.View style={{
-                    width: 8,
-                    height: 8,
-                    borderRadius: 4,
-                    backgroundColor: AppColors.liveGreen,
-                    borderWidth: 1,
-                    borderColor: `${AppColors.white}E6`,
+                    width: 5,
+                    height: 5,
+                    borderRadius: 2.5,
+                    backgroundColor: '#FFFFFF',
                     opacity: activePulseAnim,
                     transform: [{ scale: unreadPulseAnim }],
                 }}/>
+                        <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFFFFF',
+                    letterSpacing: 0.3,
+                }}>
+                          UPDATE ⚡
+                        </Text>
                       </Pressable>)}
                   </View>
 
-                  {/* OS & NPM Version Representation */}
+                  {/* OS & NPM Version Common Chip Bar */}
                   <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 5,
                 minWidth: 0,
             }}>
+                    {/* Unified Platform & Build Chip */}
                     <View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                backgroundColor: `${AppColors.white}1F`,
-                borderRadius: 5,
-                paddingHorizontal: 6,
-                paddingVertical: 2,
-                gap: 4,
+                backgroundColor: 'rgba(255, 255, 255, 0.16)',
+                borderRadius: 6,
+                paddingHorizontal: 6.5,
+                paddingVertical: 2.5,
+                gap: 4.5,
                 borderWidth: 1,
-                borderColor: `${AppColors.white}2E`,
+                borderColor: 'rgba(255, 255, 255, 0.28)',
                 flexShrink: 0,
             }}>
-                      {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={10}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={10}/>)}
+                      {Platform.OS === 'ios' ? (<AppleIcon color="#FFFFFF" size={10.5}/>) : (<AndroidIcon color="#FFFFFF" size={10.5}/>)}
                       <Text style={{
-                fontFamily: AppFonts.interMedium,
+                fontFamily: AppFonts.interBold,
                 fontSize: 9.5,
-                color: `${AppColors.white}EB`,
+                color: '#FFFFFF',
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
                         {Platform.OS === 'ios'
-                ? `iOS ${Platform.Version}`
-                : `Android ${Platform.Version}`}
+                ? `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})`
+                    : ''}`}
                       </Text>
                     </View>
 
-                    <Pressable onPress={() => Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { })} style={{
-                backgroundColor: '#FFFFFF',
-                borderRadius: 5,
-                paddingHorizontal: 6,
-                paddingVertical: 2,
+                    {/* Unified NPM Version Chip */}
+                    <Pressable onPress={() => {
+                if (updateAvailable) {
+                    setShowUpdateModal(true);
+                }
+                else {
+                    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,
                 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="#CB3837"/>
+                      <NpmIcon size={11} color="#FF6B6B"/>
                       <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 9.5,
-                color: '#CB3837',
-                letterSpacing: 0.2,
+                color: '#FFFFFF',
+                letterSpacing: 0.15,
             }} numberOfLines={1}>
                         v{LIB_VERSION}
                       </Text>
+                      {updateAvailable && (<Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#F59E0B',
+                }}>
+                          ↑
+                        </Text>)}
                     </Pressable>
 
                     {isTelemetryActive && (<Pressable onPress={() => Alert.alert('Anonymous Telemetry Active', 'Anonymous diagnostics (such as React Native version, JavaScript engine, and device model) are currently enabled to help improve library tooling.\n\nNo user data or network payloads are captured. You can toggle this anytime in Settings.', [{ text: 'Got it' }])} style={{
@@ -444,9 +477,7 @@ const InspectorHeader = React.memo(() => {
                     },
                 ]}>
                       <Text style={styles.headerMethodText}>
-                        {selectedEvent.source === 'firebase'
-                    ? 'FB'
-                    : 'MAN'}
+                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
                       </Text>
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -489,9 +520,7 @@ const InspectorHeader = React.memo(() => {
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       console.
-                      {(selectedLog.sourceMethod) ||
-                    selectedLog.type ||
-                    'log'}
+                      {selectedLog.sourceMethod || selectedLog.type || 'log'}
                     </Text>
                   </View>
                   <View style={styles.headerDetailSubRow}>
@@ -504,10 +533,10 @@ const InspectorHeader = React.memo(() => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors.white}29`,
                 }}>
-                        <ClockIcon color={AppColors.white} size={11}/>
-                        <Text style={styles.headerSubTitle}>
-                          {formatTime(selectedLog.timestamp)}
-                        </Text>
+                      <ClockIcon color={AppColors.white} size={11}/>
+                      <Text style={styles.headerSubTitle}>
+                        {formatTime(selectedLog.timestamp)}
+                      </Text>
                     </View>
                   </View>
                 </View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
@@ -527,9 +556,7 @@ const InspectorHeader = React.memo(() => {
                             backgroundColor: `${AppColors.purple}4D`,
                         },
                     ]}>
-                          <Text style={styles.headerMethodText}>
-                            SLICE
-                          </Text>
+                          <Text style={styles.headerMethodText}>SLICE</Text>
                         </View>
                         <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                           {selectedReduxSlice}
@@ -540,20 +567,26 @@ const InspectorHeader = React.memo(() => {
                         styles.headerStatusDot,
                         { backgroundColor: AppColors.liveGreen },
                     ]}/>
-                        <Text style={styles.headerSubTitle}>
-                          Live
+                        <Text style={styles.headerSubTitle}>Live</Text>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
                         <Text style={styles.headerSubTitle}>
                           {keyCount} keys
                         </Text>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
-                        <Text style={styles.headerSubTitle}>
-                          {sliceSize}
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                          •
                         </Text>
+                        <Text style={styles.headerSubTitle}>{sliceSize}</Text>
                         {lastAction?.timestamp && (<>
-                            <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
-                            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                            <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                              •
+                            </Text>
+                            <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 3,
+                        }}>
                               <ClockIcon color={AppColors.white} size={10}/>
                               <Text style={styles.headerSubTitle}>
                                 {lastAction.timestamp}
@@ -570,9 +603,7 @@ const InspectorHeader = React.memo(() => {
                         backgroundColor: `${AppColors.brandPurple}4D`,
                     },
                 ]}>
-                      <Text style={styles.headerMethodText}>
-                        ACTION
-                      </Text>
+                      <Text style={styles.headerMethodText}>ACTION</Text>
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
                       {selectedReduxAction.type}
@@ -598,7 +629,9 @@ const InspectorHeader = React.memo(() => {
                     },
                 ]}>
                       <Text style={styles.headerMethodText}>
-                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                        {selectedCrash.isFatal
+                    ? 'FATAL'
+                    : selectedCrash.type.toUpperCase()}
                       </Text>
                     </View>
                     <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
@@ -615,10 +648,13 @@ const InspectorHeader = React.memo(() => {
                     },
                 ]}/>
                     <Text style={styles.headerSubTitle}>
-                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                      {selectedCrash.timeStr ||
+                    new Date(selectedCrash.timestamp).toLocaleTimeString()}
                     </Text>
                     {selectedCrash.deviceInfo?.platform && (<>
-                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>•</Text>
+                        <Text style={[styles.headerSubTitle, { opacity: 0.6 }]}>
+                          •
+                        </Text>
                         <Text style={styles.headerSubTitle}>
                           {selectedCrash.deviceInfo.platform.toUpperCase()}
                         </Text>
@@ -690,6 +726,10 @@ const InspectorHeader = React.memo(() => {
           </View>
         </View>
       </View>
-    </LinearGradient>);
+    </LinearGradient>
+
+    {/* Dedicated Update Available Details Modal */}
+    <UpdateAvailableModal visible={showUpdateModal} latestVersion={latestNpmVersion} onClose={() => setShowUpdateModal(false)}/>
+    </>);
 });
 export default InspectorHeader;

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

@@ -17,6 +17,9 @@ 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 NpmUpdateToast from './NpmUpdateToast';
@@ -24,8 +27,9 @@ 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, 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,9 +70,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}>
@@ -112,6 +123,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 />}

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>