react-native-inapp-inspector 1.1.15 → 1.1.17

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ConsoleTab: () => React.JSX.Element;
+declare const ConsoleTab: React.MemoExoticComponent<() => React.JSX.Element>;
 export default ConsoleTab;

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

@@ -11,14 +11,14 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { SearchIcon, ClearIcon, SortArrowIcon, TrashIcon, LayersIcon, UserIcon, InfoCircleIcon, WarningTriangleIcon, ErrorCircleIcon, AnalyticsIcon, HeaderPauseIcon, } from '../NetworkIcons';
-const ConsoleTab = () => {
+const ConsoleTab = React.memo(() => {
     const { t } = useTranslation();
     const { logSearch, setLogSearch, logSortOrder, setLogSortOrder, handleDelete, logFilters, setLogFilters, logCounts, filteredConsoleLogs, visibleConsoleLogs, isConsolePaused, setIsConsolePaused, } = useInspector();
     const renderItem = useCallback(({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
         <ConsoleLogCard item={item} searchStr={logSearch}/>
       </AnimatedEntrance>), [logSearch]);
     const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
-    const listHeader = useMemo(() => (() => {
+    const listHeader = useMemo(() => {
         const total = visibleConsoleLogs.length;
         const filtered = filteredConsoleLogs.length;
         const isAllSelected = logFilters.has('all') ||
@@ -28,8 +28,8 @@ const ConsoleTab = () => {
                     styles.resultCount,
                     { marginBottom: 4, marginTop: 12 },
                 ]}>
-            Showing ({filtered}/{total}) logs showing
-          </Text>);
+          Showing ({filtered}/{total}) logs showing
+        </Text>);
         }
         else {
             const activeFilterNames = Array.from(logFilters)
@@ -46,11 +46,11 @@ const ConsoleTab = () => {
                     styles.resultCount,
                     { marginBottom: 4, marginTop: 12 },
                 ]}>
-            Filtering with {activeFilterNames.join(', ')} (
-            {filtered}/{total}) logs is showing
-          </Text>);
+          Filtering with {activeFilterNames.join(', ')} (
+          {filtered}/{total}) logs is showing
+        </Text>);
         }
-    })(), [visibleConsoleLogs, filteredConsoleLogs, logFilters]);
+    }, [visibleConsoleLogs.length, filteredConsoleLogs.length, logFilters]);
     return (<View style={{ flex: 1 }}>
       <View style={{
             backgroundColor: AppColors.white,
@@ -368,5 +368,5 @@ const ConsoleTab = () => {
             filteredConsoleLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>
     </View>);
-};
+});
 export default ConsoleTab;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const InspectorHeader: () => React.JSX.Element;
+declare const InspectorHeader: React.MemoExoticComponent<() => React.JSX.Element>;
 export default InspectorHeader;

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

@@ -1,21 +1,58 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Alert, Animated, Linking, Platform, Pressable, Text, View, } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
-import BrandSquareIcon from '../BrandSquareIcon';
+import AppHeaderLogo from '../AppHeaderLogo';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { LIB_VERSION } from '../../constants';
-import { getStatusColor } from '../../helpers';
-import { getAppName } from '../../helpers';
-import { getBundleIdentifier } from '../../helpers';
-import { formatTime } from '../../helpers';
+import { getStatusColor, getAppName, getBundleIdentifier, formatTime, getSize } from '../../helpers';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, } from '../NetworkIcons';
-const InspectorHeader = () => {
-    const { modalHeightPercent, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, } = useInspector();
+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, setSettingsPage, closeModal, detailTitle, activeTab, environment, } = useInspector();
+    const envConfig = useMemo(() => {
+        const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
+        const clean = rawEnv.toUpperCase();
+        if (clean === 'DEV' || clean.includes('DEV') || clean === 'LOCAL') {
+            return {
+                label: rawEnv,
+                bg: 'rgba(16, 185, 129, 0.25)', // emerald
+                border: 'rgba(110, 231, 183, 0.55)',
+                text: '#A7F3D0',
+            };
+        }
+        if (clean === 'UAT' || clean === 'QA' || clean === 'TEST') {
+            return {
+                label: rawEnv,
+                bg: 'rgba(245, 158, 11, 0.28)', // amber
+                border: 'rgba(252, 211, 77, 0.6)',
+                text: '#FDE68A',
+            };
+        }
+        if (clean === 'PREPROD' || clean === 'STAGE' || clean === 'STAGING') {
+            return {
+                label: rawEnv,
+                bg: 'rgba(139, 92, 246, 0.28)', // purple
+                border: 'rgba(196, 181, 253, 0.6)',
+                text: '#DDD6FE',
+            };
+        }
+        // PROD / Live
+        return {
+            label: rawEnv,
+            bg: 'rgba(244, 63, 94, 0.25)', // rose
+            border: 'rgba(253, 164, 175, 0.55)',
+            text: '#FECDD3',
+        };
+    }, [environment]);
+    const isDetailView = (activeTab === 'apis' && selected != null) ||
+        (activeTab === 'analytics' && selectedEvent != null) ||
+        (activeTab === 'logs' && selectedLog != null) ||
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
+    const isAnySelected = isDetailView;
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     return (<LinearGradient colors={[AppColors.purple, AppColors.brandPurple]} style={styles.headerGradient}>
       <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
@@ -26,11 +63,7 @@ const InspectorHeader = () => {
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 16,
-                flex: selected == null &&
-                    selectedEvent == null &&
-                    selectedLog == null
-                    ? 5
-                    : 1,
+                flex: !isDetailView ? 5 : 1,
             },
         ]}>
             <TouchableScale onPress={() => {
@@ -38,6 +71,8 @@ const InspectorHeader = () => {
                 setSelected(null);
                 setSelectedEvent(null);
                 setSelectedLog(null);
+                setSelectedReduxSlice(null);
+                setSelectedReduxAction(null);
             });
         }} hitSlop={15} style={[
             {
@@ -50,9 +85,7 @@ const InspectorHeader = () => {
                 borderWidth: 1,
                 borderColor: `${AppColors.white}4D`,
             },
-            selected == null &&
-                selectedEvent == null &&
-                selectedLog == null && { display: 'none' },
+            !isAnySelected && { display: 'none' },
         ]}>
               {/* Soft outer glow to fake a blurred circle */}
               <View style={{
@@ -65,36 +98,32 @@ const InspectorHeader = () => {
               <WhiteBackNavigation />
             </TouchableScale>
 
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null ? (<TouchableScale onPress={() => setShowHeaderInfo(prev => !prev)} style={{
+            {!isAnySelected ? (<TouchableScale onPress={() => setShowHeaderInfo(prev => !prev)} style={{
                 flexDirection: 'row',
                 alignItems: 'flex-start',
                 gap: 10,
                 flex: 1,
             }}>
-                <View style={{
-                width: 46,
-                height: 46,
-                borderRadius: 12,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: `${AppColors.white}21`,
-                borderWidth: 1.5,
-                borderColor: `${AppColors.white}40`,
-                shadowColor: AppColors.black,
-                shadowOpacity: 0.15,
-                shadowRadius: 4,
-                shadowOffset: { width: 0, height: 2 },
-                flexShrink: 0,
-            }}>
-                  <BrandSquareIcon size={42}/>
-                </View>
+                <AppHeaderLogo size={46} customIcon={appIcon}/>
                 <View style={{ gap: 2, flex: 1 }}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                     <Text style={[styles.headerTitle]} numberOfLines={1}>
                       {getAppName()}
                     </Text>
+                    <View style={[
+                styles.envBadge,
+                {
+                    backgroundColor: envConfig.bg,
+                    borderColor: envConfig.border,
+                },
+            ]}>
+                      <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' },
                     {
@@ -233,10 +262,8 @@ const InspectorHeader = () => {
               </TouchableScale>) : null}
           </View>
 
-          {(selected != null ||
-            selectedEvent != null ||
-            selectedLog != null) && (<View style={styles.headerCenter}>
-              {selected != null ? (<View style={styles.headerDetailCenter}>
+          {isDetailView && (<View style={styles.headerCenter}>
+              {activeTab === 'apis' && selected != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
                     <View style={[
                     styles.headerMethodBadge,
@@ -297,7 +324,7 @@ const InspectorHeader = () => {
                       </Text>
                     </View>
                   </View>
-                </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
+                </View>) : activeTab === 'analytics' && selectedEvent != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
                     <View style={[
                     styles.headerMethodBadge,
@@ -335,7 +362,7 @@ const InspectorHeader = () => {
                       {selectedEvent.source}
                     </Text>
                   </View>
-                </View>) : selectedLog != null ? (<View style={styles.headerDetailCenter}>
+                </View>) : activeTab === 'logs' && selectedLog != null ? (<View style={styles.headerDetailCenter}>
                   <View style={styles.headerDetailRow}>
                     <View style={[
                     styles.headerMethodBadge,
@@ -368,27 +395,100 @@ const InspectorHeader = () => {
                     borderRadius: 20,
                     backgroundColor: `${AppColors.white}29`,
                 }}>
-                      <ClockIcon color={AppColors.white} size={11}/>
-                      <Text style={styles.headerSubTitle}>
-                        {formatTime(selectedLog.timestamp)}
+                        <ClockIcon color={AppColors.white} size={11}/>
+                        <Text style={styles.headerSubTitle}>
+                          {formatTime(selectedLog.timestamp)}
+                        </Text>
+                    </View>
+                  </View>
+                </View>) : activeTab === 'redux' && selectedReduxSlice != null ? ((() => {
+                const sliceData = reduxState?.[selectedReduxSlice];
+                const keyCount = sliceData && typeof sliceData === 'object'
+                    ? Object.keys(sliceData).length
+                    : typeof sliceData !== 'undefined'
+                        ? 1
+                        : 0;
+                const sliceSize = getSize(sliceData);
+                const lastAction = reduxLastActionMap[selectedReduxSlice];
+                return (<View style={styles.headerDetailCenter}>
+                      <View style={styles.headerDetailRow}>
+                        <View style={[
+                        styles.headerMethodBadge,
+                        {
+                            backgroundColor: `${AppColors.purple}4D`,
+                        },
+                    ]}>
+                          <Text style={styles.headerMethodText}>
+                            SLICE
+                          </Text>
+                        </View>
+                        <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                          {selectedReduxSlice}
+                        </Text>
+                      </View>
+                      <View style={styles.headerDetailSubRow}>
+                        <View style={[
+                        styles.headerStatusDot,
+                        { backgroundColor: AppColors.liveGreen },
+                    ]}/>
+                        <Text style={styles.headerSubTitle}>
+                          Live
+                        </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>
+                        {lastAction?.timestamp && (<>
+                            <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}
+                              </Text>
+                            </View>
+                          </>)}
+                      </View>
+                    </View>);
+            })()) : activeTab === 'redux' && selectedReduxAction != null ? (<View style={styles.headerDetailCenter}>
+                  <View style={styles.headerDetailRow}>
+                    <View style={[
+                    styles.headerMethodBadge,
+                    {
+                        backgroundColor: `${AppColors.brandPurple}4D`,
+                    },
+                ]}>
+                      <Text style={styles.headerMethodText}>
+                        ACTION
                       </Text>
                     </View>
+                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedReduxAction.type}
+                    </Text>
+                  </View>
+                  <View style={styles.headerDetailSubRow}>
+                    <View style={[
+                    styles.headerStatusDot,
+                    { backgroundColor: AppColors.purple },
+                ]}/>
+                    <Text style={styles.headerSubTitle}>
+                      {selectedReduxAction.timestamp || 'Dispatched'}
+                    </Text>
                   </View>
                 </View>) : null}
             </View>)}
 
           <View style={[
             styles.headerRight,
-            selected == null &&
-                selectedEvent == null &&
-                selectedLog == null && {
+            !isAnySelected && {
                 flexShrink: 0,
                 minWidth: 116,
             },
         ]}>
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null && (<TouchableScale onPress={() => {
+            {!isAnySelected && (<TouchableScale onPress={() => {
                 Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {
@@ -443,5 +543,5 @@ const InspectorHeader = () => {
         </View>
       </View>
     </LinearGradient>);
-};
+});
 export default InspectorHeader;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const LogDetail: () => React.JSX.Element;
+declare const LogDetail: React.MemoExoticComponent<() => React.JSX.Element>;
 export default LogDetail;

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

@@ -26,7 +26,7 @@ const getRelativeTime = (timestamp) => {
         return `${hours}h ago`;
     return `${days}d ago`;
 };
-const LogDetail = () => {
+const LogDetail = React.memo(() => {
     const { t } = useTranslation();
     const { selectedLog } = useInspector();
     const [activeTab, setActiveTab] = useState('output');
@@ -909,7 +909,7 @@ const LogDetail = () => {
           </View>)}
       </ScrollView>
     </View>);
-};
+});
 const detailStyles = StyleSheet.create({
     metaDot: {
         fontSize: 10,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { ActivityIndicator, Modal, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
@@ -10,13 +10,31 @@ import NetworkDetail from './NetworkDetail';
 import LogDetail from './LogDetail';
 import ConsoleTab from './ConsoleTab';
 import AnalyticsTab from './AnalyticsTab';
+import AnalyticsDetail from '../AnalyticsDetail';
 import ReduxTab from './ReduxTab';
+import ReduxDetail from './ReduxDetail';
+import BundleTab from './BundleTab';
 import SettingsPanel from './SettingsPanel';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = useInspector();
+    // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
+    const [mountedTabs, setMountedTabs] = useState({
+        [activeTab]: true,
+    });
+    useEffect(() => {
+        setMountedTabs(prev => {
+            if (prev[activeTab])
+                return prev;
+            return { ...prev, [activeTab]: true };
+        });
+    }, [activeTab]);
+    const isDetailActive = (activeTab === 'apis' && selected != null) ||
+        (activeTab === 'analytics' && selectedEvent != null) ||
+        (activeTab === 'logs' && selectedLog != null) ||
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
     return (<>
       {isEnabled && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent>
@@ -32,12 +50,40 @@ const MainScreen = () => {
               <InspectorHeader />
 
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {selected == null &&
-                selectedEvent == null &&
-                selectedLog == null &&
-                settingsPage === null ? (<TabBar />) : null}
+              {!isDetailActive && settingsPage === null ? (<TabBar />) : null}
 
-              {isReady ? (activeTab === 'analytics' ? (<AnalyticsTab />) : activeTab === 'apis' && selected == null ? (<NetworkTab />) : activeTab === 'logs' && selectedLog == null ? (<ConsoleTab />) : activeTab === 'logs' ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxTab />) : (<NetworkDetail />)) : (<View style={styles.empty}>
+              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : null) : (<>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'apis' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.apis && <NetworkTab />}
+                    </View>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'logs' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.logs && <ConsoleTab />}
+                    </View>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'analytics' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.analytics && <AnalyticsTab />}
+                    </View>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'redux' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.redux && <ReduxTab />}
+                    </View>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'bundle' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.bundle && <BundleTab />}
+                    </View>
+                  </>)) : (<View style={styles.empty}>
                   <ActivityIndicator size="large" color={AppColors.purple}/>
                   <Text style={[styles.emptySub, { marginTop: 12 }]}>
                     Loading logs...

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const NetworkDetail: () => React.JSX.Element;
+declare const NetworkDetail: React.MemoExoticComponent<() => React.JSX.Element>;
 export default NetworkDetail;

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

@@ -18,7 +18,7 @@ import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { getStatusColor, getSize, formatDateTime, getFetchCommand, getCurlCommand, } from '../../helpers';
 import { FailIcon, GlobeIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, } from '../NetworkIcons';
-const NetworkDetail = () => {
+const NetworkDetail = React.memo(() => {
     const { t } = useTranslation();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = useInspector();
     if (!selected)
@@ -363,5 +363,5 @@ const NetworkDetail = () => {
           </>)}
       </ScrollView>
     </View>);
-};
+});
 export default NetworkDetail;

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const NetworkTab: () => React.JSX.Element;
+declare const NetworkTab: React.MemoExoticComponent<() => React.JSX.Element>;
 export default NetworkTab;

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

@@ -21,7 +21,7 @@ const STATUS_META = {
     '5xx': { color: AppColors.errorColor, Icon: CircleXIcon },
     Failed: { color: AppColors.errorColor, Icon: CircleXIcon },
 };
-const FilterChip = ({ label, color, Icon, badge, active, onPress, }) => {
+const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, }) => {
     const iconColor = active ? color : AppColors.grayTextWeak;
     return (<TouchableScale style={styles.statusFilterWrap} onPress={onPress} hitSlop={10}>
       <View style={[
@@ -43,19 +43,20 @@ const FilterChip = ({ label, color, Icon, badge, active, onPress, }) => {
         {badge != null ? (<View style={[
                 styles.methodBadgeMini,
                 { backgroundColor: badge },
-            ]}/>) : (Icon && (<View style={styles.filterChipIcon}>
-              <Icon color={iconColor} size={13}/>
-            </View>))}
-        <Text style={[
+            ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
+        <Text numberOfLines={1} style={[
             styles.statusFilterText,
-            active && { color, fontFamily: AppFonts.interBold },
+            active && {
+                color,
+                fontFamily: AppFonts.interBold,
+            },
         ]}>
           {label}
         </Text>
       </View>
     </TouchableScale>);
-};
-const NetworkTab = () => {
+});
+const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const filtersAccordion = useAccordion(false, 300, 260);
     const apisListRef = useRef(null);
@@ -239,5 +240,5 @@ const NetworkTab = () => {
         </View>
       </TouchableScale>
     </View>);
-};
+});
 export default NetworkTab;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ReduxDetail: React.MemoExoticComponent<() => React.JSX.Element>;
+export default ReduxDetail;