react-native-inapp-inspector 2.2.3 → 2.2.4

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

@@ -12,7 +12,7 @@ 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';
+import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ClockIcon, SizeIcon, AppleIcon, AndroidIcon, NpmIcon, ResetIcon, BoltIcon, } 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 [showUpdateModal, setShowUpdateModal] = React.useState(false);
@@ -259,8 +259,9 @@ const InspectorHeader = React.memo(() => {
                     color: '#FFFFFF',
                     letterSpacing: 0.3,
                 }}>
-                          UPDATE ⚡
+                          UPDATE
                         </Text>
+                        <BoltIcon size={9} color="#FFFFFF"/>
                       </Pressable>)}
                   </View>
 
@@ -304,26 +305,23 @@ const InspectorHeader = React.memo(() => {
                     Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
                 }
             }} style={{
-                backgroundColor: '#FFFFFF',
+                flexDirection: 'row',
+                alignItems: 'center',
+                backgroundColor: `${AppColors.white}1F`,
                 borderRadius: 5,
                 paddingHorizontal: 6,
                 paddingVertical: 2,
-                flexDirection: 'row',
-                alignItems: 'center',
                 gap: 4,
+                borderWidth: 1,
+                borderColor: `${AppColors.white}2E`,
                 flexShrink: 0,
-                shadowColor: '#000000',
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.15,
-                shadowRadius: 2,
-                elevation: 2,
             }}>
-                      <NpmIcon size={11} color="#CB3837"/>
+                      <NpmIcon size={10} color="#FF6B6B"/>
                       <Text style={{
-                fontFamily: AppFonts.interBold,
+                fontFamily: AppFonts.interMedium,
                 fontSize: 9.5,
-                color: '#CB3837',
-                letterSpacing: 0.2,
+                color: `${AppColors.white}EB`,
+                letterSpacing: 0.1,
             }} numberOfLines={1}>
                         v{LIB_VERSION}
                       </Text>
@@ -332,7 +330,7 @@ const InspectorHeader = React.memo(() => {
                     fontSize: 9,
                     color: '#F59E0B',
                 }}>
-                          ↑
+                          ●
                         </Text>)}
                     </Pressable>
 

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

@@ -6,7 +6,7 @@ import HighlightText from '../HighlightText';
 import JsonViewer from '../JsonViewer';
 import CopyButton from '../CopyButton';
 import SegmentedTabs from '../SegmentedTabs';
-import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, ExternalLinkIcon, } from '../NetworkIcons';
+import { ClearIcon, SearchIcon, PrettyIcon, RawIcon, TableIcon, LayersIcon, TerminalIcon, RequestIcon, InfoCircleIcon, DocIcon, ExternalLinkIcon, FolderIcon, } from '../NetworkIcons';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import styles from '../../styles';
@@ -856,14 +856,17 @@ const LogDetail = React.memo(() => {
                             paddingVertical: 4.5,
                             gap: 6,
                         }}>
-                          <Text selectable style={{
+                          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1 }}>
+                            <FolderIcon size={12} color={AppColors.grayTextWeak}/>
+                            <Text selectable style={{
                             fontFamily: AppFonts.interRegular,
                             fontSize: 9.5,
                             color: AppColors.grayTextStrong,
                             flex: 1,
                         }} numberOfLines={1}>
-                            📂 {frame.fullPath}
-                          </Text>
+                              {frame.fullPath}
+                            </Text>
+                          </View>
 
                           <View style={{
                             backgroundColor: frameBadgeBg,

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

@@ -17,6 +17,8 @@ import BundleTab from './BundleTab';
 import PerformanceTab from './PerformanceTab';
 import CrashTab from './CrashTab';
 import CrashDetail from './CrashDetail';
+import DeviceInfoTab from './DeviceInfoTab';
+import StorageTab from './StorageTab';
 import SettingsPanel from './SettingsPanel';
 import TelemetryConsentModal from './TelemetryConsentModal';
 import NpmUpdateToast from './NpmUpdateToast';
@@ -116,6 +118,8 @@ const MainScreen = () => {
                       {activeTab === 'bundle' && <BundleTab />}
                       {activeTab === 'performance' && <PerformanceTab />}
                       {activeTab === 'crash' && <CrashTab />}
+                      {activeTab === 'device' && <DeviceInfoTab />}
+                      {activeTab === 'storage' && <StorageTab />}
                     </Animated.View>
 
                     {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
@@ -172,14 +176,14 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast />
+
+              {/* Anonymous Telemetry Consent Dialog shown ONLY when inspector is active */}
+              <TelemetryConsentModal />
             </View>
           </View>
         </ErrorBoundary>)}
       {hasNavigationContext && (<NavigationTracker onStateChange={setNavState}/>)}
     </Modal>
-
-    {/* Anonymous Telemetry Consent Dialog at root viewport */}
-    <TelemetryConsentModal />
     </>);
 };
 export default MainScreen;

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

@@ -13,7 +13,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { STATUS_FILTERS, METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
-import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, } from '../NetworkIcons';
+import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, GlobeIcon, RequestIcon, ResponseIcon, HeadersIcon, AtomIcon, BoltIcon, ShieldAlertIcon, } from '../NetworkIcons';
 const STATUS_META = {
     ALL: { color: AppColors.grayText, Icon: LayersIcon },
     '2xx': { color: AppColors.greenColor, Icon: CircleCheckIcon },
@@ -182,23 +182,83 @@ const NetworkTab = React.memo(() => {
         },
     ], [quickCounts]);
     const SEARCH_SCOPES = [
-        { id: 'all', label: 'All' },
-        { id: 'url', label: 'URL / Path' },
-        { id: 'reqBody', label: 'Payload' },
-        { id: 'resBody', label: 'Response' },
-        { id: 'headers', label: 'Headers' },
+        {
+            id: 'all',
+            label: 'All',
+            icon: color => <LayersIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'url',
+            label: 'URL / Path',
+            icon: color => <GlobeIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'reqBody',
+            label: 'Payload',
+            icon: color => <RequestIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'resBody',
+            label: 'Response',
+            icon: color => <ResponseIcon size={9.5} color={color}/>,
+        },
+        {
+            id: 'headers',
+            label: 'Headers',
+            icon: color => <HeadersIcon size={9.5} color={color}/>,
+        },
     ];
     const QUICK_API_QUERY_TAGS = useMemo(() => [
-        { label: '⚠️ Failed', query: 'is:error' },
-        { label: '🐢 Slow >1s', query: 'slow:>1s' },
-        { label: 'POST', query: 'm:POST' },
-        { label: 'GET', query: 'm:GET' },
-        { label: 'GraphQL', query: 'is:graphql' },
-        { label: 'Axios', query: 'client:axios' },
-        { label: '200 OK', query: 'status:200' },
-        { label: '404', query: 'status:404' },
-        { label: '500', query: 'status:500' },
-        { label: '🔒 HTTPS', query: 'is:https' },
+        {
+            label: 'Failed',
+            query: 'is:error',
+            icon: (color) => <CircleXIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'Slow (>1s)',
+            query: 'slow:>1s',
+            icon: (color) => <ClockIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'POST',
+            query: 'm:POST',
+            icon: (color) => <RequestIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'GET',
+            query: 'm:GET',
+            icon: (color) => <ResponseIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'GraphQL',
+            query: 'is:graphql',
+            icon: (color) => <AtomIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'Axios',
+            query: 'client:axios',
+            icon: (color) => <BoltIcon size={9.5} color={color}/>,
+        },
+        {
+            label: '200 OK',
+            query: 'status:200',
+            icon: (color) => <CircleCheckIcon size={9.5} color={color}/>,
+        },
+        {
+            label: '404',
+            query: 'status:404',
+            icon: (color) => <CircleAlertIcon size={9.5} color={color}/>,
+        },
+        {
+            label: '500',
+            query: 'status:500',
+            icon: (color) => <CircleXIcon size={9.5} color={color}/>,
+        },
+        {
+            label: 'HTTPS',
+            query: 'is:https',
+            icon: (color) => <ShieldAlertIcon size={9.5} color={color}/>,
+        },
     ], []);
     const networkMetrics = useMemo(() => {
         if (!logs || logs.length === 0)
@@ -481,6 +541,7 @@ const NetworkTab = React.memo(() => {
                 {QUICK_CHIPS.map(chip => {
                 const isActive = quickFilter === chip.id;
                 const chipColor = chip.color || AppColors.purple;
+                const iconColor = isActive ? AppColors.white : chipColor;
                 return (<TouchableScale key={chip.id} onPress={() => {
                         setQuickFilter(isActive ? 'all' : chip.id);
                     }}>
@@ -499,6 +560,13 @@ const NetworkTab = React.memo(() => {
                             : `${chipColor}30`,
                         gap: 5,
                     }}>
+                        {chip.id === 'all' && <LayersIcon size={11} color={iconColor}/>}
+                        {chip.id === 'errors' && <CircleXIcon size={11} color={iconColor}/>}
+                        {chip.id === 'success' && <CircleCheckIcon size={11} color={iconColor}/>}
+                        {chip.id === 'slow' && <ClockIcon size={11} color={iconColor}/>}
+                        {chip.id === 'POST' && <RequestIcon size={11} color={iconColor}/>}
+                        {chip.id === 'GET' && <ResponseIcon size={11} color={iconColor}/>}
+                        {chip.id === 'graphql' && <AtomIcon size={11} color={iconColor}/>}
                         <Text style={{
                         fontFamily: AppFonts.interBold,
                         fontSize: 10.5,
@@ -554,8 +622,12 @@ const NetworkTab = React.memo(() => {
                 }}>
                   {SEARCH_SCOPES.map(s => {
                     const isSelected = searchScope === s.id;
+                    const iconColor = isSelected ? AppColors.white : AppColors.grayText;
                     return (<TouchableScale key={s.id} onPress={() => setSearchScope(s.id)}>
                         <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
                             paddingHorizontal: 7,
                             paddingVertical: 2.5,
                             borderRadius: 5,
@@ -567,6 +639,7 @@ const NetworkTab = React.memo(() => {
                                 ? AppColors.purple
                                 : AppColors.grayBorderSecondary,
                         }}>
+                          {s.icon(iconColor)}
                           <Text style={{
                             fontFamily: AppFonts.interBold,
                             fontSize: 9.5,
@@ -600,6 +673,9 @@ const NetworkTab = React.memo(() => {
                             }
                         }}>
                       <View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
                             paddingHorizontal: 7,
                             paddingVertical: 2.5,
                             borderRadius: 5,
@@ -611,6 +687,7 @@ const NetworkTab = React.memo(() => {
                                 ? AppColors.purple
                                 : `${AppColors.purple}30`,
                         }}>
+                        {item.icon(isSelected ? AppColors.white : AppColors.purple)}
                         <Text style={{
                             fontFamily: AppFonts.interBold,
                             fontSize: 9.5,

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, CircleAlertIcon, PerformanceIcon, BoltIcon, LightbulbIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, ChevronIcon, } from '../NetworkIcons';
 import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
 import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
 const PerformanceTab = React.memo(() => {
@@ -373,18 +373,45 @@ 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: (color) => <PerformanceIcon size={12} color={color}/>,
+            },
+            {
+                key: 'JANKY',
+                label: t('performance.catJanky'),
+                icon: (color) => <CircleAlertIcon size={12} color={color}/>,
+            },
+            {
+                key: 'NAVIGATION',
+                label: t('performance.catNavigation'),
+                icon: (color) => <MapIcon size={12} color={color}/>,
+            },
+            {
+                key: 'RENDER',
+                label: t('performance.catRender'),
+                icon: (color) => <AtomIcon size={12} color={color}/>,
+            },
+            {
+                key: 'MEMORY',
+                label: t('performance.catMemory'),
+                icon: (color) => <BrainIcon size={12} color={color}/>,
+            },
+            {
+                key: 'IO',
+                label: t('performance.catIo'),
+                icon: (color) => <GlobeIcon size={12} color={color}/>,
+            },
         ].map(cat => {
             const isSelected = filterCategory === cat.key;
+            const iconColor = isSelected ? AppColors.white : AppColors.grayTextWeak;
             return (<TouchableScale key={cat.key} onPress={() => setFilterCategory(cat.key)} style={[
                     perfStyles.categoryChip,
                     isSelected && perfStyles.categoryChipActive,
+                    { flexDirection: 'row', alignItems: 'center', gap: 5 },
                 ]}>
+                {cat.icon(iconColor)}
                 <Text style={[
                     perfStyles.categoryChipText,
                     isSelected && perfStyles.categoryChipTextActive,
@@ -806,12 +833,13 @@ const PerformanceTab = React.memo(() => {
                     </View>
 
                     {/* Bottleneck Thread Tag */}
-                    {event.bottleneckThread && (<View style={perfStyles.bottleneckTag}>
+                    {event.bottleneckThread && (<View style={[perfStyles.bottleneckTag, { flexDirection: 'row', alignItems: 'center', gap: 3 }]}>
+                        {event.bottleneckThread === 'JS Thread' && (<BoltIcon size={10} color={AppColors.warningIconGold}/>)}
                         <Text style={perfStyles.bottleneckTagText}>
                           {event.bottleneckThread === 'JS Thread'
-                        ? `⚡ ${t('performance.jsBound')}`
+                        ? t('performance.jsBound')
                         : event.bottleneckThread === 'UI Thread'
-                            ? `🎨 ${t('performance.uiBound')}`
+                            ? t('performance.uiBound')
                             : t('performance.balanced')}
                         </Text>
                       </View>)}
@@ -819,9 +847,7 @@ const PerformanceTab = React.memo(() => {
 
                   <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                     <CopyButton value={() => event} label={t('common.copyJson')}/>
-                    <Text style={perfStyles.expandChevron}>
-                      {isExpanded ? '▲' : '▼'}
-                    </Text>
+                    <ChevronIcon isExpanded={isExpanded} size={14} color={AppColors.grayTextWeak}/>
                   </View>
                 </View>