react-native-inapp-inspector 1.1.28 → 1.1.31

package/dist/commonjs/components/AppHeaderLogo.js

@@ -40,13 +40,12 @@ exports.AppHeaderLogo = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const BrandSquareIcon_1 = __importDefault(require("./BrandSquareIcon"));
-const AppColors_1 = require("../styles/AppColors");
 const AppHeaderLogo = ({ size = 46, customIcon, }) => {
     const [loadError, setLoadError] = (0, react_1.useState)(false);
-    // 1. If customIcon is explicitly provided, render it directly
+    // 1. If customIcon is explicitly provided, render it directly edge-to-edge
     if (customIcon) {
         return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
-        <react_native_1.Image source={customIcon} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover"/>
+        <react_native_1.Image source={customIcon} style={logoStyles.image} resizeMode="cover"/>
       </react_native_1.View>);
     }
     // 2. Dynamically query installed native app icon (AppIcon on iOS, ic_launcher on Android)
@@ -57,29 +56,30 @@ const AppHeaderLogo = ({ size = 46, customIcon, }) => {
             default: { uri: 'AppIcon' },
         });
         return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
-        <react_native_1.Image source={nativeSource} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover" onError={() => setLoadError(true)}/>
+        <react_native_1.Image source={nativeSource} style={logoStyles.image} resizeMode="cover" onError={() => setLoadError(true)}/>
       </react_native_1.View>);
     }
     // 3. Fallback: Inspector's Signature Owl Brand Logo
     return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
-      <BrandSquareIcon_1.default size={size - 4}/>
+      <BrandSquareIcon_1.default size={size}/>
     </react_native_1.View>);
 };
 exports.AppHeaderLogo = AppHeaderLogo;
 const logoStyles = react_native_1.StyleSheet.create({
     container: {
+        borderRadius: 10,
+        overflow: 'hidden',
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.28)',
+        padding: 2.5,
         alignItems: 'center',
         justifyContent: 'center',
-        borderRadius: 12,
-        backgroundColor: `${AppColors_1.AppColors.white}24`,
-        borderWidth: 1.5,
-        borderColor: `${AppColors_1.AppColors.white}4D`,
-        overflow: 'hidden',
-        shadowColor: AppColors_1.AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.15,
-        shadowRadius: 4,
-        elevation: 3,
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 7.5,
     },
 });
 exports.default = exports.AppHeaderLogo;

package/dist/commonjs/components/ConsoleLogCard.js

@@ -26,37 +26,37 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const getTagDecorator = (tag) => {
             const clean = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
             if (clean === 'AXIOS') {
-                return { color: '#059669', icon: '⚡', label: 'AXIOS' };
+                return { color: AppColors_1.AppColors.emerald600, icon: '⚡', label: 'AXIOS' };
             }
             if (clean === 'API' || clean === 'FETCH' || clean === 'HTTP' || clean === 'NETWORK') {
-                return { color: '#0284C7', icon: '🌐', label: clean };
+                return { color: AppColors_1.AppColors.sky600, icon: '🌐', label: clean };
             }
             if (clean === 'SAMPLE' || clean === 'BATCH') {
-                return { color: '#4F46E5', icon: '🎲', label: clean };
+                return { color: AppColors_1.AppColors.indigo600Alt, icon: '🎲', label: clean };
             }
             if (clean === 'REDUX' || clean === 'STORE' || clean === 'STATE') {
-                return { color: '#7C3AED', icon: '⚛️', label: clean };
+                return { color: AppColors_1.AppColors.violet600, icon: '⚛️', label: clean };
             }
             if (clean === 'ANALYTICS' || clean === 'FIREBASE' || clean === 'GA4' || clean === 'GA') {
-                return { color: '#0D9488', icon: '📊', label: clean };
+                return { color: AppColors_1.AppColors.teal600, icon: '📊', label: clean };
             }
             if (clean === 'AUTH' || clean === 'TOKEN' || clean === 'SESSION') {
-                return { color: '#D97706', icon: '🔑', label: clean };
+                return { color: AppColors_1.AppColors.amber600, icon: '🔑', label: clean };
             }
             if (clean === 'APP') {
-                return { color: '#4F46E5', icon: '📱', label: 'APP' };
+                return { color: AppColors_1.AppColors.indigo600Alt, icon: '📱', label: 'APP' };
             }
             if (clean === 'TEST') {
-                return { color: '#10B981', icon: '🧪', label: 'TEST' };
+                return { color: AppColors_1.AppColors.emerald500, icon: '🧪', label: 'TEST' };
             }
             if (clean === 'WARN' || clean === 'WARNING') {
-                return { color: '#D97706', icon: '⚠️', label: 'WARN' };
+                return { color: AppColors_1.AppColors.amber600, icon: '⚠️', label: 'WARN' };
             }
             if (clean === 'ERROR' || clean === 'CRASH' || clean === 'BUG') {
-                return { color: '#DC2626', icon: '💥', label: 'ERROR' };
+                return { color: AppColors_1.AppColors.red600, icon: '💥', label: 'ERROR' };
             }
             if (clean === 'PERF' || clean === 'RENDER') {
-                return { color: '#8B5CF6', icon: '⚡', label: clean };
+                return { color: AppColors_1.AppColors.violet500, icon: '⚡', label: clean };
             }
             return { color: AppColors_1.AppColors.slate600, icon: '🏷️', label: clean };
         };
@@ -95,51 +95,72 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
         ? (0, helpers_1.parseStackLine)(item.caller, true)
         : null;
     const getLogColors = () => {
-        const isDark = AppColors_1.AppColors.primaryLight !== AppColors_1.AppColors.white;
-        if (isAnalyticsError) {
+        const type = (item.type || 'log').toLowerCase();
+        const method = (item.sourceMethod || type).toLowerCase();
+        if (isAnalyticsError || type === 'error' || method === 'error') {
             return {
-                border: AppColors_1.AppColors.skyBlue,
-                badgeBg: `${AppColors_1.AppColors.skyBlue}15`,
-                badgeText: AppColors_1.AppColors.skyBlue,
+                border: '#EF4444',
+                badgeBg: '#FEE2E2',
+                badgeText: '#DC2626',
                 label: 'ERROR',
-                cardBg: isDark ? `${AppColors_1.AppColors.skyBlue}26` : AppColors_1.AppColors.blueTintBg,
+                cardBg: '#FEF2F2',
+                methodBorder: '#FECACA',
+                methodBg: '#FEE2E2',
+                methodText: '#DC2626',
+                textColor: '#991B1B',
             };
         }
-        switch (item.type) {
-            case 'error':
-                return {
-                    border: AppColors_1.AppColors.errorColor,
-                    badgeBg: `${AppColors_1.AppColors.errorColor}15`,
-                    badgeText: AppColors_1.AppColors.errorColor,
-                    label: 'ERROR',
-                    cardBg: isDark ? `${AppColors_1.AppColors.errorColor}26` : AppColors_1.AppColors.errorCardBg,
-                };
-            case 'warn':
-                return {
-                    border: AppColors_1.AppColors.lightOrange,
-                    badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
-                    badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange,
-                    label: 'WARN',
-                    cardBg: isDark ? `${AppColors_1.AppColors.amber500}26` : AppColors_1.AppColors.warnCardBg,
-                };
-            default:
-                if (isUserLog) {
-                    return {
-                        border: AppColors_1.AppColors.slate600,
-                        badgeBg: isDark ? AppColors_1.AppColors.gray700 : AppColors_1.AppColors.slate200,
-                        badgeText: isDark ? AppColors_1.AppColors.gray300 : AppColors_1.AppColors.slate700,
-                        label: 'INFO',
-                        cardBg: isDark ? AppColors_1.AppColors.primaryLight : AppColors_1.AppColors.slate100,
-                    };
-                }
-                return {
-                    border: AppColors_1.AppColors.purple,
-                    badgeBg: `${AppColors_1.AppColors.purple}15`,
-                    badgeText: AppColors_1.AppColors.purple,
-                    label: 'INFO',
-                    cardBg: isDark ? `${AppColors_1.AppColors.purple}1F` : AppColors_1.AppColors.purpleShade50,
-                };
+        if (type === 'warn' || method === 'warn') {
+            return {
+                border: '#F59E0B',
+                badgeBg: '#FEF3C7',
+                badgeText: '#D97706',
+                label: 'WARN',
+                cardBg: '#FFFBEB',
+                methodBorder: '#FDE68A',
+                methodBg: '#FEF3C7',
+                methodText: '#D97706',
+                textColor: '#92400E',
+            };
+        }
+        if (type === 'debug' || method === 'debug') {
+            return {
+                border: '#8B5CF6',
+                badgeBg: '#EDE9FE',
+                badgeText: '#7C3AED',
+                label: 'DEBUG',
+                cardBg: '#F5F3FF',
+                methodBorder: '#DDD6FE',
+                methodBg: '#EDE9FE',
+                methodText: '#7C3AED',
+                textColor: '#4C1D95',
+            };
+        }
+        if (type === 'info' || method === 'info') {
+            return {
+                border: '#0EA5E9',
+                badgeBg: '#E0F2FE',
+                badgeText: '#0284C7',
+                label: 'INFO',
+                cardBg: '#F0F9FF',
+                methodBorder: '#BAE6FD',
+                methodBg: '#E0F2FE',
+                methodText: '#0284C7',
+                textColor: '#075985',
+            };
         }
+        // Default / Standard console.log
+        return {
+            border: '#6366F1',
+            badgeBg: '#EEF2FF',
+            badgeText: '#4F46E5',
+            label: 'LOG',
+            cardBg: '#FFFFFF',
+            methodBorder: '#E0E7FF',
+            methodBg: '#EEF2FF',
+            methodText: '#4F46E5',
+            textColor: '#0F172A',
+        };
     };
     const colors = getLogColors();
     const jsonPreview = jsonContent
@@ -153,6 +174,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             styles.card,
             {
                 borderLeftColor: colors.border,
+                borderLeftWidth: 3.5,
                 backgroundColor: colors.cardBg,
             },
             pressed && styles.cardPressed,
@@ -161,18 +183,18 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
           <react_native_1.View style={styles.headerLeft}>
             <react_native_1.View style={[styles.typeChip, { backgroundColor: colors.badgeBg }]}>
               <react_native_1.View style={[styles.typeDot, { backgroundColor: colors.badgeText }]}/>
-              <react_native_1.Text style={[styles.typeChipText, { color: colors.badgeText }]}>
+              <react_native_1.Text style={[styles.typeChipText, { color: colors.badgeText, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                 {colors.label}
               </react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={[
             styles.metaChip,
             {
-                backgroundColor: `${AppColors_1.AppColors.brandPurple}12`,
-                borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+                backgroundColor: colors.methodBg,
+                borderColor: colors.methodBorder,
             },
         ]}>
-              <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.brandPurple }]}>
+              <react_native_1.Text style={[styles.metaChipText, { color: colors.methodText, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                 console.
                 {('sourceMethod' in item ? item.sourceMethod : undefined) ||
             item.type ||
@@ -182,11 +204,11 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             {jsonContent && (<react_native_1.View style={[
                 styles.metaChip,
                 {
-                    backgroundColor: `${AppColors_1.AppColors.teal600}12`,
-                    borderColor: `${AppColors_1.AppColors.teal600}2B`,
+                    backgroundColor: '#ECFDF5',
+                    borderColor: '#A7F3D0',
                 },
             ]}>
-                <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.teal600 }]}>
+                <react_native_1.Text style={[styles.metaChipText, { color: '#059669', fontFamily: AppFonts_1.AppFonts.interBold }]}>
                   {Array.isArray(jsonContent.data)
                 ? `Array[${jsonContent.data.length}]`
                 : `Object{${Object.keys(jsonContent.data).length}}`}
@@ -201,7 +223,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     borderColor: `${AppColors_1.AppColors.purple}3D`,
                 },
             ]}>
-                  <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.purple }]}>
+                  <react_native_1.Text style={[styles.metaChipText, { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                     ×{item.duplicateCount}
                   </react_native_1.Text>
                 </react_native_1.View>)}
@@ -232,18 +254,34 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
             <react_native_1.Text style={styles.footerText}>{(0, helpers_1.formatTime)(item.timestamp)}</react_native_1.Text>
             {parsedCaller && (<>
                 <react_native_1.View style={styles.footerDot}/>
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, maxWidth: 170 }}>
+                <react_native_1.Pressable onPress={e => {
+                e.stopPropagation?.();
+                (0, helpers_1.openInVSCode)(parsedCaller.rawFilePath ||
+                    parsedCaller.fullPath ||
+                    parsedCaller.fileName, parsedCaller.lineNumber, parsedCaller.columnNumber);
+            }} hitSlop={8} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                maxWidth: 185,
+                backgroundColor: `${AppColors_1.AppColors.sky600}10`,
+                borderColor: `${AppColors_1.AppColors.sky600}2B`,
+                borderWidth: 1,
+                borderRadius: 5,
+                paddingHorizontal: 5,
+                paddingVertical: 1.5,
+            }}>
                   {parsedCaller.fileExt && parsedCaller.fileExt !== 'other' && (<react_native_1.View style={{
                     backgroundColor: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
-                        ? `${AppColors_1.AppColors.brandPurple}18`
-                        : `${AppColors_1.AppColors.teal600}18`,
+                        ? `${AppColors_1.AppColors.brandPurple}22`
+                        : `${AppColors_1.AppColors.teal600}22`,
                     borderRadius: 3,
                     paddingHorizontal: 3.5,
-                    paddingVertical: 1,
+                    paddingVertical: 0.5,
                 }}>
                       <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 8.5,
+                    fontSize: 8,
                     color: parsedCaller.fileExt === 'tsx' || parsedCaller.fileExt === 'ts'
                         ? AppColors_1.AppColors.brandPurple
                         : AppColors_1.AppColors.teal600,
@@ -251,11 +289,19 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                         {parsedCaller.fileExt.toUpperCase()}
                       </react_native_1.Text>
                     </react_native_1.View>)}
-                  <react_native_1.Text style={[styles.footerText, styles.footerCaller]} numberOfLines={1} ellipsizeMode="middle">
+                  <react_native_1.Text style={[
+                styles.footerText,
+                {
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    color: AppColors_1.AppColors.sky600,
+                    fontSize: 9.5,
+                },
+            ]} numberOfLines={1} ellipsizeMode="middle">
                     {parsedCaller.fileName}
                     {parsedCaller.lineNumber ? `:${parsedCaller.lineNumber}` : ''}
                   </react_native_1.Text>
-                </react_native_1.View>
+                  <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={8.5}/>
+                </react_native_1.Pressable>
               </>)}
           </react_native_1.View>
 

package/dist/commonjs/components/CopyButton.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
 // Components
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // Helpers
@@ -54,6 +55,19 @@ const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) =>
         setCopied(true);
         setTimeout(() => setCopied(false), 1200);
     }, [value, label]);
+    const handleLongPress = (0, react_1.useCallback)(() => {
+        try {
+            const resolvedValue = typeof value === 'function' ? value() : value;
+            const textToShare = typeof resolvedValue === 'string'
+                ? resolvedValue
+                : JSON.stringify(resolvedValue, null, 2);
+            react_native_1.Share.share({
+                message: textToShare,
+                title: label,
+            });
+        }
+        catch { }
+    }, [value, label]);
     const containerStyle = [
         styles_1.default.iconSquareBtn,
         copied && styles_1.default.iconSquareBtnSuccess,
@@ -63,7 +77,7 @@ const CopyButton = react_1.default.memo(({ value, label, iconType = 'copy' }) =>
         : iconType === 'fetch'
             ? NetworkIcons_1.FetchIcon
             : NetworkIcons_1.CopyIcon;
-    return (<TouchableScale_1.default onPress={handlePress} hitSlop={12} style={containerStyle}>
+    return (<TouchableScale_1.default onPress={handlePress} onLongPress={handleLongPress} hitSlop={12} style={containerStyle}>
       {copied ? (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.greenColor} size={14}/>) : (<IconComponent color={AppColors_1.AppColors.grayTextWeak} size={14}/>)}
     </TouchableScale_1.default>);
 });

package/dist/commonjs/components/DomainHeader.js

@@ -40,6 +40,7 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
 // Helpers
 const helpers_1 = require("../helpers");
 // Assets
@@ -64,20 +65,75 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
     const pctSuccess = total > 0 ? Math.round((stats.success / total) * 100) : 0;
     const pctFailed = total > 0 ? Math.round((stats.failed / total) * 100) : 0;
     const pctLoading = total > 0 ? Math.round((stats.loading / total) * 100) : 0;
-    return (<react_native_1.Pressable style={styles_1.default.domainHeaderCard} onPress={() => onToggleCollapse(pageName)}>
+    return (<react_native_1.Pressable style={[
+            styles_1.default.domainHeaderCard,
+            !isCollapsed && styles_1.default.domainHeaderCardExpanded,
+        ]} onPress={() => onToggleCollapse(pageName)}>
       <react_native_1.View style={styles_1.default.domainHeaderTopRow}>
         <react_native_1.View style={styles_1.default.domainHeaderLeft}>
-          <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+          <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }], flexShrink: 0 }}>
             <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
           </react_native_1.Animated.View>
-          <react_native_1.View style={[styles_1.default.domainIconWrap, { backgroundColor: `${color}18` }]}>
+          <react_native_1.View style={[styles_1.default.domainIconWrap, { backgroundColor: `${color}18`, flexShrink: 0 }]}>
             <NetworkIcons_1.ScreenIcon color={color} size={14}/>
           </react_native_1.View>
-          <react_native_1.View style={{ flex: 1, justifyContent: 'center' }}>
-            <react_native_1.Text style={styles_1.default.domainTitleText} numberOfLines={1}>
-              {pageName}
-            </react_native_1.Text>
-            <react_native_1.Text style={styles_1.default.domainSummaryText} numberOfLines={1}>
+          <react_native_1.View style={{ flex: 1, justifyContent: 'center', minWidth: 0 }}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+              <react_native_1.Text style={[styles_1.default.domainTitleText, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
+                {pageName}
+              </react_native_1.Text>
+              {total > 0 && (<react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 4,
+                backgroundColor: stats.failed > 0
+                    ? AppColors_1.AppColors.red100
+                    : stats.loading > 0
+                        ? AppColors_1.AppColors.amber100
+                        : AppColors_1.AppColors.emerald100,
+                paddingHorizontal: 5,
+                paddingVertical: 1.5,
+                borderRadius: 4,
+                flexShrink: 0,
+            }}>
+                  <react_native_1.View style={{
+                width: 22,
+                height: 3.5,
+                borderRadius: 2,
+                backgroundColor: AppColors_1.AppColors.gray200,
+                flexDirection: 'row',
+                overflow: 'hidden',
+            }}>
+                    {pctSuccess > 0 && (<react_native_1.View style={{
+                    width: `${pctSuccess}%`,
+                    height: '100%',
+                    backgroundColor: AppColors_1.AppColors.emerald500,
+                }}/>)}
+                    {pctFailed > 0 && (<react_native_1.View style={{
+                    width: `${pctFailed}%`,
+                    height: '100%',
+                    backgroundColor: AppColors_1.AppColors.red500,
+                }}/>)}
+                    {pctLoading > 0 && (<react_native_1.View style={{
+                    width: `${pctLoading}%`,
+                    height: '100%',
+                    backgroundColor: AppColors_1.AppColors.amber500,
+                }}/>)}
+                  </react_native_1.View>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 8.5,
+                color: stats.failed > 0
+                    ? AppColors_1.AppColors.redErrorText
+                    : stats.loading > 0
+                        ? AppColors_1.AppColors.amber800Warm
+                        : AppColors_1.AppColors.emerald700,
+            }}>
+                    {pctSuccess}%
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.domainSummaryText} numberOfLines={1} ellipsizeMode="tail">
               {(0, helpers_1.formatDateTime)(timestamp)}
             </react_native_1.Text>
           </react_native_1.View>
@@ -132,30 +188,6 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
         })}
         </react_native_1.View>
       </react_native_1.View>
-
-      {total > 0 && (<react_native_1.View style={styles_1.default.domainProgressTrack}>
-          {pctSuccess > 0 && (<react_native_1.View style={[
-                    styles_1.default.domainProgressSegment,
-                    {
-                        width: `${pctSuccess}%`,
-                        backgroundColor: AppColors_1.AppColors.greenColor,
-                    },
-                ]}/>)}
-          {pctFailed > 0 && (<react_native_1.View style={[
-                    styles_1.default.domainProgressSegment,
-                    {
-                        width: `${pctFailed}%`,
-                        backgroundColor: AppColors_1.AppColors.errorColor,
-                    },
-                ]}/>)}
-          {pctLoading > 0 && (<react_native_1.View style={[
-                    styles_1.default.domainProgressSegment,
-                    {
-                        width: `${pctLoading}%`,
-                        backgroundColor: AppColors_1.AppColors.darkOrange,
-                    },
-                ]}/>)}
-        </react_native_1.View>)}
     </react_native_1.Pressable>);
 };
 exports.default = DomainHeader;

package/dist/commonjs/components/HighlightText.js

@@ -8,6 +8,12 @@ const react_native_1 = require("react-native");
 // Helpers
 const helpers_1 = require("../helpers");
 const HighlightText = react_1.default.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
+    // Optimization: For huge strings (> 20KB) with no active search, bypass all splitting/regex overhead
+    if (!text || (text.length > 20000 && !search && !detectLinks)) {
+        return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
+        {text}
+      </react_native_1.Text>);
+    }
     // Regex to detect absolute URLs
     const URL_REGEX = /(https?:\/\/[^\s]+)/g;
     const renderNormalOrHighlighted = (subText, keyPrefix) => {
@@ -22,7 +28,7 @@ const HighlightText = react_1.default.memo(function HighlightText({ text, search
             </react_native_1.Text>) : (<react_native_1.Text key={i}>{part}</react_native_1.Text>))}
       </react_native_1.Text>);
     };
-    if (detectLinks && text) {
+    if (detectLinks && text && text.length < 20000) {
         const parts = text.split(URL_REGEX);
         return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
         {parts.map((part, i) => {