react-native-inapp-inspector 1.1.15 → 1.1.16

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

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

package/dist/commonjs/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/commonjs/components/Inspector/NetworkDetail.js

@@ -56,7 +56,7 @@ const AppFonts_1 = require("../../styles/AppFonts");
 const constants_1 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
-const NetworkDetail = () => {
+const NetworkDetail = react_1.default.memo(() => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = (0, InspectorContext_1.useInspector)();
     if (!selected)
@@ -401,5 +401,5 @@ const NetworkDetail = () => {
           </>)}
       </react_native_1.ScrollView>
     </react_native_1.View>);
-};
+});
 exports.default = NetworkDetail;

package/dist/commonjs/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/commonjs/components/Inspector/NetworkTab.js

@@ -59,7 +59,7 @@ const STATUS_META = {
     '5xx': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
     Failed: { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
 };
-const FilterChip = ({ label, color, Icon, badge, active, onPress, }) => {
+const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, onPress, }) => {
     const iconColor = active ? color : AppColors_1.AppColors.grayTextWeak;
     return (<TouchableScale_1.default style={styles_1.default.statusFilterWrap} onPress={onPress} hitSlop={10}>
       <react_native_1.View style={[
@@ -81,19 +81,20 @@ const FilterChip = ({ label, color, Icon, badge, active, onPress, }) => {
         {badge != null ? (<react_native_1.View style={[
                 styles_1.default.methodBadgeMini,
                 { backgroundColor: badge },
-            ]}/>) : (Icon && (<react_native_1.View style={styles_1.default.filterChipIcon}>
-              <Icon color={iconColor} size={13}/>
-            </react_native_1.View>))}
-        <react_native_1.Text style={[
+            ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
+        <react_native_1.Text numberOfLines={1} style={[
             styles_1.default.statusFilterText,
-            active && { color, fontFamily: AppFonts_1.AppFonts.interBold },
+            active && {
+                color,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            },
         ]}>
           {label}
         </react_native_1.Text>
       </react_native_1.View>
     </TouchableScale_1.default>);
-};
-const NetworkTab = () => {
+});
+const NetworkTab = react_1.default.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, } = (0, InspectorContext_1.useInspector)();
     const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
@@ -277,5 +278,5 @@ const NetworkTab = () => {
         </react_native_1.View>
       </TouchableScale_1.default>
     </react_native_1.View>);
-};
+});
 exports.default = NetworkTab;

package/dist/commonjs/components/Inspector/ReduxTab.d.ts

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

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

@@ -11,7 +11,7 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const NetworkIcons_1 = require("../NetworkIcons");
-const ReduxTab = () => {
+const ReduxTab = react_1.default.memo(() => {
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, } = (0, InspectorContext_1.useInspector)();
     if (!reduxState) {
         return (<react_native_1.View style={styles_1.default.emptyContainer}>
@@ -71,5 +71,5 @@ const ReduxTab = () => {
         <ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>
       </react_native_1.View>
     </react_native_1.ScrollView>);
-};
+});
 exports.default = ReduxTab;

package/dist/commonjs/components/Inspector/TabBar.d.ts

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

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

@@ -10,7 +10,7 @@ const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NetworkIcons_1 = require("../NetworkIcons");
-const TabBar = () => {
+const TabBar = react_1.default.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, lastReadApisCount, lastReadLogsCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
     return (<react_native_1.View style={styles_1.default.tabBarContainer}>
       <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
@@ -91,5 +91,5 @@ const TabBar = () => {
         })}
       </react_native_1.ScrollView>
     </react_native_1.View>);
-};
+});
 exports.default = TabBar;

package/dist/commonjs/components/JsonViewer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, maxHeight, mode: externalMode, onModeChange, hideTabs, }: {
+declare const JsonViewer: React.MemoExoticComponent<({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, maxHeight, mode: externalMode, onModeChange, hideTabs, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
@@ -10,5 +10,5 @@ declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap,
     mode?: "pretty" | "raw" | "table";
     onModeChange?: (mode: "pretty" | "raw" | "table") => void;
     hideTabs?: boolean;
-}) => React.JSX.Element;
+}) => React.JSX.Element>;
 export default JsonViewer;

package/dist/commonjs/components/JsonViewer.js

@@ -49,7 +49,7 @@ const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const styles_1 = __importDefault(require("../styles"));
 // ── JsonViewer Component ─────────────────────────────────────────────────────
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
+const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [mode, setMode] = (0, react_1.useState)(externalMode || 'pretty');
     const rawText = react_1.default.useMemo(() => {
@@ -185,7 +185,7 @@ const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHei
             </react_native_1.ScrollView>))}
       </react_native_1.View>
     </react_native_1.View>);
-};
+});
 const localStyles = react_native_1.StyleSheet.create({
     container: {
         backgroundColor: AppColors_1.AppColors.white,

package/dist/commonjs/components/ReduxTreeView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const ReduxTreeView: ({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
+export declare const ReduxTreeView: React.MemoExoticComponent<({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
     state: any;
     actionHistory?: any[];
     lastActionMap?: Record<string, any>;
@@ -13,4 +13,4 @@ export declare const ReduxTreeView: ({ state, actionHistory, lastActionMap, sear
     onSelectSliceKey?: (key: string | null) => void;
     selectedActionId?: number | null;
     onSelectActionId?: (id: number | null) => void;
-}) => React.JSX.Element;
+}) => React.JSX.Element>;

package/dist/commonjs/components/ReduxTreeView.js

@@ -79,7 +79,7 @@ const valueContainsTerm = (val, term) => {
     }
     return Object.keys(val).some(key => key.toLowerCase().includes(t) || valueContainsTerm(val[key], term));
 };
-const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, search = '', onSearchChange, autoRefresh = true, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey = null, onSelectSliceKey, selectedActionId = null, onSelectActionId, }) => {
+exports.ReduxTreeView = react_1.default.memo(({ state, actionHistory = [], lastActionMap = {}, search = '', onSearchChange, autoRefresh = true, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey = null, onSelectSliceKey, selectedActionId = null, onSelectActionId, }) => {
     const [activeTab, setActiveTab] = (0, react_1.useState)('state');
     const [actionSubTab, setActionSubTab] = (0, react_1.useState)('payload');
     // local fallbacks if props are not provided
@@ -747,8 +747,7 @@ const ReduxTreeView = ({ state, actionHistory = [], lastActionMap = {}, search =
             }))}
         </react_native_1.ScrollView>)}
     </react_native_1.View>);
-};
-exports.ReduxTreeView = ReduxTreeView;
+});
 const styles = react_native_1.StyleSheet.create({
     container: {
         flex: 1,

package/dist/commonjs/components/SegmentedTabs.d.ts

@@ -11,5 +11,5 @@ interface SegmentedTabsProps {
     onChange: (key: string) => void;
     style?: ViewStyle | ViewStyle[];
 }
-declare const SegmentedTabs: ({ tabs, activeKey, onChange, style }: SegmentedTabsProps) => React.JSX.Element;
+declare const SegmentedTabs: React.MemoExoticComponent<({ tabs, activeKey, onChange, style }: SegmentedTabsProps) => React.JSX.Element>;
 export default SegmentedTabs;

package/dist/commonjs/components/SegmentedTabs.js

@@ -7,7 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
-const SegmentedTabs = ({ tabs, activeKey, onChange, style }) => (<react_native_1.View style={[
+const SegmentedTabs = react_1.default.memo(({ tabs, activeKey, onChange, style }) => (<react_native_1.View style={[
         {
             flexDirection: 'row',
             borderRadius: 8,
@@ -48,5 +48,5 @@ const SegmentedTabs = ({ tabs, activeKey, onChange, style }) => (<react_native_1
           </react_native_1.Text>
         </react_native_1.Pressable>);
     })}
-  </react_native_1.View>);
+  </react_native_1.View>));
 exports.default = SegmentedTabs;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.15";
+export declare const LIB_VERSION = "1.1.16";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.15';
+exports.LIB_VERSION = '1.1.16';

package/dist/esm/components/CopyButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CopyButtonProps } from '../types';
-declare const CopyButton: ({ value, label, iconType }: CopyButtonProps) => React.JSX.Element;
+declare const CopyButton: React.MemoExoticComponent<({ value, label, iconType }: CopyButtonProps) => React.JSX.Element>;
 export default CopyButton;

package/dist/esm/components/CopyButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 // Components
 import TouchableScale from './TouchableScale';
 // Helpers
@@ -8,14 +8,14 @@ import { TerminalIcon, FetchIcon, CopyIcon, CheckIcon } from './NetworkIcons';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
-const CopyButton = ({ value, label, iconType = 'copy' }) => {
+const CopyButton = React.memo(({ value, label, iconType = 'copy' }) => {
     const [copied, setCopied] = useState(false);
-    const handlePress = () => {
+    const handlePress = useCallback(() => {
         const resolvedValue = typeof value === 'function' ? value() : value;
         copyToClipboard(resolvedValue, label);
         setCopied(true);
         setTimeout(() => setCopied(false), 1200);
-    };
+    }, [value, label]);
     const containerStyle = [
         styles.iconSquareBtn,
         copied && styles.iconSquareBtnSuccess,
@@ -28,5 +28,5 @@ const CopyButton = ({ value, label, iconType = 'copy' }) => {
     return (<TouchableScale onPress={handlePress} hitSlop={12} style={containerStyle}>
       {copied ? (<CheckIcon color={AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors.grayTextWeak} size={14}/>)}
     </TouchableScale>);
-};
+});
 export default CopyButton;

package/dist/esm/components/EndOfListFooter.js

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { CheckIcon } from './NetworkIcons';
-export const EndOfListFooter = ({ count, label, message = "You've reached the end of the list", }) => {
+export const EndOfListFooter = React.memo(({ count, label, message = "You've reached the end of the list", }) => {
     return (<View style={styles.container}>
       <View style={styles.dividerLine}/>
       <View style={styles.badgePill}>
@@ -19,7 +19,7 @@ export const EndOfListFooter = ({ count, label, message = "You've reached the en
       </View>
       <View style={styles.dividerLine}/>
     </View>);
-};
+});
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',

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

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

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

@@ -8,9 +8,8 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { getCurrentUserId, getCurrentUserProperties, getDefaultEventParameters, getCollectionEnabled, } from '../../customHooks/analyticsLogger';
 import { SearchIcon, ClearIcon, TrashIcon, EmptyRadarIcon, HeaderPauseIcon, } from '../NetworkIcons';
-const AnalyticsHeader = () => {
+const AnalyticsHeader = React.memo(() => {
     const { filteredAnalyticsEvents, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = useInspector();
-    const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
     const userId = getCurrentUserId();
     const userProperties = getCurrentUserProperties();
     const defaultParams = getDefaultEventParameters();
@@ -87,9 +86,10 @@ const AnalyticsHeader = () => {
             </View>)}
         </>)}
     </View>);
-};
-const AnalyticsTab = () => {
-    const { analyticsSearch, setAnalyticsSearch, handleDelete, filteredAnalyticsEvents, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, } = useInspector();
+});
+const AnalyticsTab = React.memo(() => {
+    const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, } = useInspector();
+    const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
     const renderItem = useCallback(({ item, index }) => {
         const prev = filteredAnalyticsEvents[index + 1];
         const next = filteredAnalyticsEvents[index - 1];
@@ -128,8 +128,7 @@ const AnalyticsTab = () => {
                 }
                 return screenName;
             })()}/>);
-    }, [filteredAnalyticsEvents, analyticsSearch, newEventIds, setSelectedEvent]);
-    const keyExtractor = useCallback((item, index) => item?.id?.toString() ?? index.toString(), []);
+    }, [filteredAnalyticsEvents, analyticsSearch, newEventIds, setSelectedEvent, logRouteMapRef]);
     return (<>
       {/* ─── Search + Shared Toolbar for Analytics ──────────────────────── */}
       {selectedEvent == null && (<View style={[
@@ -190,5 +189,5 @@ const AnalyticsTab = () => {
             ]} keyboardShouldPersistTaps="handled"/>) : null}
       </View>
     </>);
-};
+});
 export default AnalyticsTab;

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

@@ -14,7 +14,7 @@ import { getAppName } from '../../helpers';
 import { getBundleIdentifier } from '../../helpers';
 import { formatTime } from '../../helpers';
 import { WhiteBackNavigation, TrashIcon, SettingsIcon, CloseWhite, ChevronIcon, ClockIcon, } from '../NetworkIcons';
-const InspectorHeader = () => {
+const InspectorHeader = React.memo(() => {
     const { modalHeightPercent, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, } = useInspector();
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     return (<LinearGradient colors={[AppColors.purple, AppColors.brandPurple]} style={styles.headerGradient}>
@@ -443,5 +443,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/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/ReduxTab.d.ts

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

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

@@ -6,7 +6,7 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { TerminalIcon, ClearIcon } from '../NetworkIcons';
-const ReduxTab = () => {
+const ReduxTab = React.memo(() => {
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, } = useInspector();
     if (!reduxState) {
         return (<View style={styles.emptyContainer}>
@@ -66,5 +66,5 @@ const ReduxTab = () => {
         <ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>
       </View>
     </ScrollView>);
-};
+});
 export default ReduxTab;

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

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

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

@@ -5,7 +5,7 @@ import TouchableScale from '../TouchableScale';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, } from '../NetworkIcons';
-const TabBar = () => {
+const TabBar = React.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, lastReadApisCount, lastReadLogsCount, unreadPulseAnim, } = useInspector();
     return (<View style={styles.tabBarContainer}>
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
@@ -86,5 +86,5 @@ const TabBar = () => {
         })}
       </ScrollView>
     </View>);
-};
+});
 export default TabBar;

package/dist/esm/components/JsonViewer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, maxHeight, mode: externalMode, onModeChange, hideTabs, }: {
+declare const JsonViewer: React.MemoExoticComponent<({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, maxHeight, mode: externalMode, onModeChange, hideTabs, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
@@ -10,5 +10,5 @@ declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap,
     mode?: "pretty" | "raw" | "table";
     onModeChange?: (mode: "pretty" | "raw" | "table") => void;
     hideTabs?: boolean;
-}) => React.JSX.Element;
+}) => React.JSX.Element>;
 export default JsonViewer;

package/dist/esm/components/JsonViewer.js

@@ -11,7 +11,7 @@ import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
 // ── JsonViewer Component ─────────────────────────────────────────────────────
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
+const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
     const { t } = useTranslation();
     const [mode, setMode] = useState(externalMode || 'pretty');
     const rawText = React.useMemo(() => {
@@ -147,7 +147,7 @@ const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHei
             </ScrollView>))}
       </View>
     </View>);
-};
+});
 const localStyles = StyleSheet.create({
     container: {
         backgroundColor: AppColors.white,

package/dist/esm/components/ReduxTreeView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const ReduxTreeView: ({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
+export declare const ReduxTreeView: React.MemoExoticComponent<({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
     state: any;
     actionHistory?: any[];
     lastActionMap?: Record<string, any>;
@@ -13,4 +13,4 @@ export declare const ReduxTreeView: ({ state, actionHistory, lastActionMap, sear
     onSelectSliceKey?: (key: string | null) => void;
     selectedActionId?: number | null;
     onSelectActionId?: (id: number | null) => void;
-}) => React.JSX.Element;
+}) => React.JSX.Element>;