react-native-inapp-inspector 2.0.7 → 2.2.0

package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt

@@ -9,7 +9,6 @@ import android.os.Build
 import android.os.Debug
 import android.os.Environment
 import android.os.StatFs
-import android.provider.Settings
 import android.util.Log
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.Promise
@@ -176,16 +175,6 @@ class NetworkInspectorModule(private val reactContext: ReactApplicationContext)
             map.putInt("apiLevel", Build.VERSION.SDK_INT)
             val cpuAbi = if (Build.SUPPORTED_ABIS.isNotEmpty()) Build.SUPPORTED_ABIS[0] else "unknown"
             map.putString("cpuAbi", cpuAbi)
-            try {
-                val androidId = Settings.Secure.getString(reactContext.contentResolver, Settings.Secure.ANDROID_ID)
-                if (!androidId.isNullOrEmpty()) {
-                    map.putString("deviceId", androidId)
-                } else {
-                    map.putString("deviceId", Build.FINGERPRINT)
-                }
-            } catch (e: Exception) {
-                map.putString("deviceId", Build.FINGERPRINT)
-            }
 
             // 6. Application Identifiers (Legal & Non-PII)
             try {

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

@@ -52,7 +52,7 @@ const telemetry_1 = require("../../helpers/telemetry");
 const UpdateAvailableModal_1 = require("./UpdateAvailableModal");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.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, } = (0, InspectorContext_1.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, } = (0, InspectorContext_1.useInspector)();
     const [showUpdateModal, setShowUpdateModal] = react_1.default.useState(false);
     const [isTelemetryActive, setIsTelemetryActive] = react_1.default.useState(false);
     const telemetryPulseAnim = react_1.default.useRef(new react_native_1.Animated.Value(1)).current;
@@ -302,44 +302,38 @@ const InspectorHeader = react_1.default.memo(() => {
                       </react_native_1.Pressable>)}
                   </react_native_1.View>
 
-                  {/* OS & NPM Version Common Chip Bar */}
+                  {/* OS & NPM Version Representation */}
                   <react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 5,
                 minWidth: 0,
             }}>
-                    {/* Unified Platform & Build Chip */}
                     <react_native_1.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_1.AppColors.white}1F`,
+                borderRadius: 5,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                gap: 4,
                 borderWidth: 1,
-                borderColor: 'rgba(255, 255, 255, 0.28)',
+                borderColor: `${AppColors_1.AppColors.white}2E`,
                 flexShrink: 0,
             }}>
-                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color="#FFFFFF" size={10.5}/>) : (<NetworkIcons_1.AndroidIcon color="#FFFFFF" size={10.5}/>)}
+                      {react_native_1.Platform.OS === 'ios' ? (<NetworkIcons_1.AppleIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>) : (<NetworkIcons_1.AndroidIcon color={`${AppColors_1.AppColors.white}E6`} size={10}/>)}
                       <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontFamily: AppFonts_1.AppFonts.interMedium,
                 fontSize: 9.5,
-                color: '#FFFFFF',
+                color: `${AppColors_1.AppColors.white}EB`,
                 letterSpacing: 0.1,
             }} numberOfLines={1}>
                         {react_native_1.Platform.OS === 'ios'
-                ? `iOS ${String(deviceInfo?.osVersion || react_native_1.Platform.Version).replace(/^(ios\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
-                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
-                    : ''}`
-                : `Android ${String(deviceInfo?.osVersion || react_native_1.Platform.Version).replace(/^(android\s*)+/i, '').trim()}${deviceInfo?.buildNumber || deviceInfo?.appVersion
-                    ? ` (${deviceInfo.buildNumber || deviceInfo.appVersion})`
-                    : ''}`}
+                ? `iOS ${react_native_1.Platform.Version}`
+                : `Android ${react_native_1.Platform.Version}`}
                       </react_native_1.Text>
                     </react_native_1.View>
 
-                    {/* Unified NPM Version Chip */}
                     <react_native_1.Pressable onPress={() => {
                 if (updateAvailable) {
                     setShowUpdateModal(true);
@@ -348,23 +342,26 @@ const InspectorHeader = react_1.default.memo(() => {
                     react_native_1.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,
             }}>
-                      <NetworkIcons_1.NpmIcon size={11} color="#FF6B6B"/>
+                      <NetworkIcons_1.NpmIcon size={11} color="#CB3837"/>
                       <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 9.5,
-                color: '#FFFFFF',
-                letterSpacing: 0.15,
+                color: '#CB3837',
+                letterSpacing: 0.2,
             }} numberOfLines={1}>
                         v{constants_2.LIB_VERSION}
                       </react_native_1.Text>

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

@@ -55,20 +55,15 @@ const BundleTab_1 = __importDefault(require("./BundleTab"));
 const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
-const StorageTab_1 = __importDefault(require("./StorageTab"));
-const DeviceTab_1 = __importDefault(require("./DeviceTab"));
-const AuditTab_1 = __importDefault(require("./AuditTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const TelemetryConsentModal_1 = __importDefault(require("./TelemetryConsentModal"));
-const FirstTimeWalkthroughModal_1 = __importDefault(require("./FirstTimeWalkthroughModal"));
 const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
 const Toast_1 = __importDefault(require("../Toast"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
-const PerformanceHud_1 = __importDefault(require("./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, } = (0, InspectorContext_1.useInspector)();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -109,16 +104,10 @@ const MainScreen = () => {
         }).start();
     }, [activeTab]);
     return (<>
-      <react_native_1.View pointerEvents="box-none" style={react_native_1.StyleSheet.absoluteFillObject}>
-        {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
+      {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
             isEnabled &&
             !visible &&
             !useNativeFab && <FabLauncher_1.default />}
-        {isEnabled && !visible && isPerformanceHudEnabled && (<PerformanceHud_1.default visible={true} onPress={() => {
-                setVisible(true);
-                switchActiveTab('performance');
-            }}/>)}
-      </react_native_1.View>
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent statusBarTranslucent={true}>
       {visible && (<ErrorBoundary_1.default onClose={closeModal}>
           <react_native_1.View style={styles_1.default.modalBackdrop}>
@@ -162,9 +151,6 @@ const MainScreen = () => {
                       {activeTab === 'logs' && <ConsoleTab_1.default />}
                       {activeTab === 'analytics' && <AnalyticsTab_1.default />}
                       {activeTab === 'redux' && <ReduxTab_1.default />}
-                      {activeTab === 'storage' && <StorageTab_1.default />}
-                      {activeTab === 'device' && <DeviceTab_1.default />}
-                      {activeTab === 'audit' && <AuditTab_1.default />}
                       {activeTab === 'bundle' && <BundleTab_1.default />}
                       {activeTab === 'performance' && <PerformanceTab_1.default />}
                       {activeTab === 'crash' && <CrashTab_1.default />}
@@ -224,9 +210,6 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast_1.default />
-
-              {/* First-Time Walkthrough & Quick Guide Modal */}
-              <FirstTimeWalkthroughModal_1.default visible={isWalkthroughVisible} onClose={() => setIsWalkthroughVisible(false)}/>
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>)}

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

@@ -22,10 +22,8 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
-const RequestReplayView_1 = __importDefault(require("./RequestReplayView"));
 const NetworkDetail = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
-    const [isReplayScreenActive, setIsReplayScreenActive] = react_1.default.useState(false);
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = (0, InspectorContext_1.useInspector)();
     const handleOpenUrl = () => {
         react_native_1.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}`, [
@@ -49,9 +47,6 @@ const NetworkDetail = react_1.default.memo(() => {
     };
     if (!selected)
         return null;
-    if (isReplayScreenActive) {
-        return (<RequestReplayView_1.default request={selected} onBack={() => setIsReplayScreenActive(false)}/>);
-    }
     return (<react_native_1.View style={{ flex: 1 }}>
       {/* Non-scrollable details header */}
       <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
@@ -257,16 +252,6 @@ const NetworkDetail = react_1.default.memo(() => {
                   </react_native_1.View>
 
                   <react_native_1.View style={styles_1.default.detailInfoRight}>
-                    <TouchableScale_1.default style={[
-                    styles_1.default.iconSquareBtn,
-                    {
-                        backgroundColor: `${AppColors_1.AppColors.purple}15`,
-                        borderColor: `${AppColors_1.AppColors.purple}30`,
-                        borderWidth: 1,
-                    },
-                ]} onPress={() => setIsReplayScreenActive(true)} accessible={true} accessibilityRole="button" accessibilityLabel="Edit & Resend Request" hitSlop={12}>
-                      <NetworkIcons_1.ReplayIcon color={AppColors_1.AppColors.purple} size={14}/>
-                    </TouchableScale_1.default>
                     <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
                       <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={14}/>
                     </TouchableScale_1.default>

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

@@ -411,33 +411,24 @@ const PerformanceTab = react_1.default.memo(() => {
       <react_native_1.View style={perfStyles.categoryScrollWrapper}>
         <react_native_1.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_1.AppColors.white : AppColors_1.AppColors.grayText;
             return (<TouchableScale_1.default key={cat.key} onPress={() => setFilterCategory(cat.key)} style={[
                     perfStyles.categoryChip,
                     isSelected && perfStyles.categoryChipActive,
                 ]}>
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                  {cat.icon === 'all' && <NetworkIcons_1.SparklesIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'janky' && <NetworkIcons_1.WarningTriangleIcon size={12} color={isSelected ? AppColors_1.AppColors.white : AppColors_1.AppColors.errorColor}/>}
-                  {cat.icon === 'nav' && <NetworkIcons_1.MapIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'render' && <NetworkIcons_1.AtomIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'memory' && <NetworkIcons_1.BrainIcon size={12} color={iconColor}/>}
-                  {cat.icon === 'io' && <NetworkIcons_1.GlobeIcon size={12} color={iconColor}/>}
-                  <react_native_1.Text style={[
+                <react_native_1.Text style={[
                     perfStyles.categoryChipText,
                     isSelected && perfStyles.categoryChipTextActive,
                 ]}>
-                    {cat.label}
-                  </react_native_1.Text>
-                </react_native_1.View>
+                  {cat.label}
+                </react_native_1.Text>
               </TouchableScale_1.default>);
         })}
         </react_native_1.ScrollView>
@@ -448,13 +439,13 @@ const PerformanceTab = react_1.default.memo(() => {
         {/* ── 1. REAL-TIME FPS SCORECARD & SMOOTH AREA GRAPH ── */}
         <react_native_1.View style={perfStyles.heroCard}>
           <react_native_1.View style={perfStyles.heroHeaderRow}>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, flex: 1 }}>
-              <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={18}/>
-              <react_native_1.View style={{ flex: 1 }}>
-                <react_native_1.Text style={perfStyles.heroTitle} numberOfLines={1}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={17}/>
+              <react_native_1.View>
+                <react_native_1.Text style={perfStyles.heroTitle}>
                   {t('performance.fpsAreaChartTitle')}
                 </react_native_1.Text>
-                <react_native_1.Text style={perfStyles.heroSubTitle} numberOfLines={1}>
+                <react_native_1.Text style={perfStyles.heroSubTitle}>
                   {t('performance.fpsAreaChartSub')}
                 </react_native_1.Text>
               </react_native_1.View>
@@ -1169,21 +1160,18 @@ const perfStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.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_1.AppFonts.interMedium,
-        fontSize: 9.5,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
         color: AppColors_1.AppColors.grayTextWeak,
-        textAlign: 'center',
     },
     statValue: {
         fontFamily: AppFonts_1.AppFonts.interBold,