react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/components/DomainHeader.js

@@ -22,77 +22,102 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
         outputRange: ['-90deg', '0deg'],
     });
     const visibleStats = ['success', 'failed', 'loading'];
-    return (<Pressable style={[styles.domainHeaderRow, !isFirst && styles.domainHeaderSeparator]} onPress={() => onToggleCollapse(pageName)}>
-      <View style={styles.domainHeaderLeft}>
-        <Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
-          <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
-        </Animated.View>
-        <ScreenIcon color={color} size={16}/>
-        <View style={{ flex: 1, marginLeft: 6, justifyContent: 'center' }}>
-          <Text style={[styles.domainHeaderText, { color, marginLeft: 0 }]} numberOfLines={1}>
-            {pageName}
-          </Text>
-          <View style={styles.domainSubRow}>
-            <Text style={styles.domainTimestamp}>
+    const total = stats.success + stats.failed + stats.loading;
+    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 (<Pressable style={styles.domainHeaderCard} onPress={() => onToggleCollapse(pageName)}>
+      <View style={styles.domainHeaderTopRow}>
+        <View style={styles.domainHeaderLeft}>
+          <Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+            <ChevronIcon color={AppColors.grayTextWeak} size={13}/>
+          </Animated.View>
+          <View style={[styles.domainIconWrap, { backgroundColor: `${color}18` }]}>
+            <ScreenIcon color={color} size={14}/>
+          </View>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
+            <Text style={styles.domainTitleText} numberOfLines={1}>
+              {pageName}
+            </Text>
+            <Text style={styles.domainSummaryText} numberOfLines={1}>
               {formatDateTime(timestamp)}
             </Text>
           </View>
         </View>
-      </View>
 
-      <View style={styles.domainStatsGroup}>
-        {visibleStats.map((type, index) => {
-            const isLast = index === visibleStats.length - 1;
+        <View style={styles.domainStatsGroup}>
+          {visibleStats.map(type => {
             const isActive = activeFilters.has(type);
             let IconComponent;
             let activeColor = '';
             let count = 0;
-            let bgStyle = {};
             if (type === 'success') {
                 IconComponent = CheckIcon;
                 activeColor = AppColors.greenColor;
                 count = stats.success;
-                bgStyle = {
-                    backgroundColor: isActive
-                        ? `${AppColors.greenColor}15`
-                        : 'transparent',
-                };
             }
             else if (type === 'failed') {
                 IconComponent = FailIcon;
                 activeColor = AppColors.errorColor;
                 count = stats.failed;
-                bgStyle = {
-                    backgroundColor: isActive
-                        ? `${AppColors.errorColor}15`
-                        : 'transparent',
-                };
             }
             else {
                 IconComponent = ClockIcon;
                 activeColor = AppColors.darkOrange;
                 count = stats.loading;
-                bgStyle = {
-                    backgroundColor: isActive
-                        ? `${AppColors.darkOrange}15`
-                        : 'transparent',
-                };
             }
-            return (<Pressable key={type} onPress={() => onToggleFilter(pageName, type)} style={[
-                    styles.groupBtnItem,
-                    bgStyle,
-                    !isLast && styles.groupBtnBorderRight,
+            return (<Pressable key={type} onPress={() => onToggleFilter(pageName, type)} hitSlop={6} style={[
+                    styles.domainStatPill,
+                    isActive && {
+                        borderColor: `${activeColor}40`,
+                        backgroundColor: `${activeColor}12`,
+                    },
                 ]}>
-              <IconComponent color={isActive ? activeColor : AppColors.grayTextWeak} size={type === 'failed' ? 8 : 10}/>
-              <Text style={[
+                <View style={[
+                    styles.filterCheckbox,
+                    { marginRight: 0, width: 11, height: 11, borderRadius: 2.5 },
+                    isActive && [
+                        styles.filterCheckboxActive,
+                        { backgroundColor: activeColor },
+                    ],
+                ]}>
+                  {isActive && (<CheckIcon color={AppColors.white} size={7}/>)}
+                </View>
+                <IconComponent color={isActive ? activeColor : AppColors.grayTextWeak} size={type === 'failed' ? 8 : 10}/>
+                <Text style={[
                     styles.domainStatText,
                     { color: isActive ? activeColor : AppColors.grayTextWeak },
                 ]}>
-                {count}
-              </Text>
-            </Pressable>);
+                  {count}
+                </Text>
+              </Pressable>);
         })}
+        </View>
       </View>
+
+      {total > 0 && (<View style={styles.domainProgressTrack}>
+          {pctSuccess > 0 && (<View style={[
+                    styles.domainProgressSegment,
+                    {
+                        width: `${pctSuccess}%`,
+                        backgroundColor: AppColors.greenColor,
+                    },
+                ]}/>)}
+          {pctFailed > 0 && (<View style={[
+                    styles.domainProgressSegment,
+                    {
+                        width: `${pctFailed}%`,
+                        backgroundColor: AppColors.errorColor,
+                    },
+                ]}/>)}
+          {pctLoading > 0 && (<View style={[
+                    styles.domainProgressSegment,
+                    {
+                        width: `${pctLoading}%`,
+                        backgroundColor: AppColors.darkOrange,
+                    },
+                ]}/>)}
+        </View>)}
     </Pressable>);
 };
 export default DomainHeader;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const EmptyState: ({ isSearch }: {
+declare const EmptyState: React.NamedExoticComponent<{
     isSearch?: boolean;
-}) => React.JSX.Element;
+}>;
 export default EmptyState;

package/dist/esm/components/EmptyState.js

@@ -8,7 +8,7 @@ import { EmptyRadarIcon } from './NetworkIcons';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
-const EmptyState = ({ isSearch }) => {
+const EmptyState = React.memo(function EmptyState({ isSearch }) {
     const iconPulse = useRef(new Animated.Value(1)).current;
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
@@ -49,5 +49,5 @@ const EmptyState = ({ isSearch }) => {
           <Text style={styles.reloadBtnText}>Reload App</Text>
         </TouchableScale>)}
     </AnimatedEntrance>);
-};
+});
 export default EmptyState;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface EndOfListFooterProps {
+    count?: number;
+    label?: string;
+    message?: string;
+}
+export declare const EndOfListFooter: React.FC<EndOfListFooterProps>;
+export default EndOfListFooter;

package/dist/esm/components/EndOfListFooter.js

@@ -0,0 +1,83 @@
+import React from 'react';
+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", }) => {
+    return (<View style={styles.container}>
+      <View style={styles.dividerLine}/>
+      <View style={styles.badgePill}>
+        <View style={styles.iconCircle}>
+          <CheckIcon color={AppColors.purple} size={8}/>
+        </View>
+        <Text style={styles.messageText}>{message}</Text>
+        {count != null && count > 0 && (<View style={styles.countBadge}>
+            <Text style={styles.countText}>
+              {count} {label ? (count === 1 ? label.replace(/s$/, '') : label) : ''}
+            </Text>
+          </View>)}
+      </View>
+      <View style={styles.dividerLine}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 28,
+        gap: 8,
+    },
+    dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: AppColors.dividerColor,
+        opacity: 0.7,
+    },
+    badgePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 999,
+        backgroundColor: AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    iconCircle: {
+        width: 14,
+        height: 14,
+        borderRadius: 7,
+        backgroundColor: `${AppColors.purple}18`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    messageText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+        letterSpacing: 0.1,
+    },
+    countBadge: {
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 6,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    countText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.grayTextStrong,
+    },
+});
+export default EndOfListFooter;

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

@@ -1,17 +1,8 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-interface Props {
-    children: ReactNode;
-    onClose?: () => void;
-    onReset?: () => void;
-    fallbackType?: 'modal' | 'inline';
-}
-interface State {
-    hasError: boolean;
-    error: Error | null;
-}
-export declare class ErrorBoundary extends Component<Props, State> {
-    state: State;
-    static getDerivedStateFromError(error: Error): State;
+import React, { Component, ErrorInfo } from 'react';
+import { ErrorBoundaryProps, ErrorBoundaryState } from '../types';
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private handleReset;
     private handleCopyTrace;

package/dist/esm/components/ErrorBoundary.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Platform } from 'react-native';
+import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { copyToClipboard } from '../helpers';
@@ -91,7 +91,7 @@ ${error.stack}`;
             <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    backgroundColor: isNativeCrash ? 'rgba(239, 68, 68, 0.1)' : 'rgba(245, 158, 11, 0.1)',
+                    backgroundColor: isNativeCrash ? `${AppColors.errorColor}1A` : `${AppColors.amber500}1A`,
                     paddingHorizontal: 10,
                     paddingVertical: 4,
                     borderRadius: 20,
@@ -101,7 +101,7 @@ ${error.stack}`;
               <Text style={{
                     fontSize: 10,
                     fontWeight: 'bold',
-                    color: isNativeCrash ? '#EF4444' : '#F59E0B',
+                    color: isNativeCrash ? AppColors.errorColor : AppColors.amber500,
                     fontFamily: AppFonts.interBold || 'System'
                 }}>
                 {isNativeCrash ? '🔴 NATIVE CRASH' : '🟡 JAVASCRIPT CRASH'}
@@ -113,22 +113,22 @@ ${error.stack}`;
             </Text>
 
             {parsed && (<View style={{
-                        backgroundColor: '#F1F5F9',
+                        backgroundColor: AppColors.slate100,
                         borderRadius: 8,
                         padding: 10,
                         width: '100%',
                         marginBottom: 10,
                         borderWidth: 1,
-                        borderColor: '#E2E8F0',
+                        borderColor: AppColors.slate200,
                         gap: 4
                     }}>
-                <Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts.interMedium }} numberOfLines={1}>
+                <Text style={{ fontSize: 11, color: AppColors.slate600, fontFamily: AppFonts.interMedium }} numberOfLines={1}>
                   <Text style={{ fontWeight: 'bold' }}>Method:</Text> {parsed.method}
                 </Text>
-                <Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts.interMedium }} numberOfLines={1}>
+                <Text style={{ fontSize: 11, color: AppColors.slate600, fontFamily: AppFonts.interMedium }} numberOfLines={1}>
                   <Text style={{ fontWeight: 'bold' }}>File:</Text> {parsed.file}
                 </Text>
-                <Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts.interMedium }}>
+                <Text style={{ fontSize: 11, color: AppColors.slate600, fontFamily: AppFonts.interMedium }}>
                   <Text style={{ fontWeight: 'bold' }}>Line:</Text> {parsed.line}  <Text style={{ fontWeight: 'bold' }}>Col:</Text> {parsed.column}
                 </Text>
               </View>)}
@@ -143,7 +143,7 @@ ${error.stack}`;
 
             <View style={{ width: '100%', gap: 8, marginBottom: 12 }}>
               <TouchableOpacity style={{
-                    backgroundColor: '#0F172A',
+                    backgroundColor: AppColors.slate900,
                     height: 38,
                     borderRadius: 8,
                     justifyContent: 'center',
@@ -151,7 +151,7 @@ ${error.stack}`;
                     flexDirection: 'row',
                     gap: 6
                 }} onPress={this.handleCopyTrace}>
-                <Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts.interBold || 'System' }}>
+                <Text style={{ color: AppColors.white, fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts.interBold || 'System' }}>
                   📋 Copy Crash Traceback
                 </Text>
               </TouchableOpacity>
@@ -172,11 +172,11 @@ ${error.stack}`;
         return this.props.children;
     }
 }
-const monoFont = Platform.OS === 'ios' ? 'Menlo' : 'monospace';
+const monoFont = AppFonts.interRegular;
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.3)',
+        backgroundColor: `${AppColors.black}4D`,
         justifyContent: 'center',
         alignItems: 'center',
         padding: 16,
@@ -184,11 +184,11 @@ const styles = StyleSheet.create({
     card: {
         width: '100%',
         maxWidth: 400,
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors.white,
         borderRadius: 16,
         padding: 20,
         alignItems: 'center',
-        shadowColor: '#000000',
+        shadowColor: AppColors.black,
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.1,
         shadowRadius: 12,
@@ -201,14 +201,14 @@ const styles = StyleSheet.create({
     title: {
         fontFamily: AppFonts.interBold || 'System',
         fontSize: 18,
-        color: '#0F172A',
+        color: AppColors.slate900,
         marginBottom: 8,
         textAlign: 'center',
     },
     subtitle: {
         fontFamily: AppFonts.interRegular || 'System',
         fontSize: 12,
-        color: '#64748B',
+        color: AppColors.slate500,
         lineHeight: 18,
         textAlign: 'center',
         marginBottom: 16,
@@ -216,10 +216,10 @@ const styles = StyleSheet.create({
     scroll: {
         width: '100%',
         maxHeight: 180,
-        backgroundColor: '#F8FAFC',
+        backgroundColor: AppColors.slate50,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors.slate200,
         padding: 10,
         marginBottom: 20,
     },
@@ -229,7 +229,7 @@ const styles = StyleSheet.create({
     code: {
         fontFamily: monoFont,
         fontSize: 11,
-        color: '#E11D48',
+        color: AppColors.rose600,
     },
     btnRow: {
         flexDirection: 'row',
@@ -238,7 +238,7 @@ const styles = StyleSheet.create({
     },
     resetBtn: {
         flex: 1,
-        backgroundColor: AppColors.purple || '#684B9B',
+        backgroundColor: AppColors.purple,
         height: 40,
         borderRadius: 8,
         justifyContent: 'center',
@@ -247,13 +247,13 @@ const styles = StyleSheet.create({
     resetBtnText: {
         fontFamily: AppFonts.interBold || 'System',
         fontSize: 13,
-        color: '#FFFFFF',
+        color: AppColors.white,
     },
     closeBtn: {
         flex: 1,
-        backgroundColor: '#F1F5F9',
+        backgroundColor: AppColors.slate100,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors.slate200,
         height: 40,
         borderRadius: 8,
         justifyContent: 'center',
@@ -262,13 +262,13 @@ const styles = StyleSheet.create({
     closeBtnText: {
         fontFamily: AppFonts.interBold || 'System',
         fontSize: 13,
-        color: '#475569',
+        color: AppColors.slate600,
     },
     inlineContainer: {
         padding: 8,
-        backgroundColor: '#FFE4E6',
+        backgroundColor: AppColors.roseBg,
         borderWidth: 1,
-        borderColor: '#FCA5A5',
+        borderColor: AppColors.errorBorder,
         borderRadius: 8,
         flexDirection: 'row',
         alignItems: 'center',
@@ -278,10 +278,10 @@ const styles = StyleSheet.create({
     inlineTitle: {
         fontFamily: AppFonts.interBold || 'System',
         fontSize: 11,
-        color: '#991B1B',
+        color: AppColors.redErrorText,
     },
     inlineResetBtn: {
-        backgroundColor: '#991B1B',
+        backgroundColor: AppColors.redErrorText,
         paddingHorizontal: 10,
         paddingVertical: 4,
         borderRadius: 4,
@@ -289,7 +289,7 @@ const styles = StyleSheet.create({
     inlineResetText: {
         fontFamily: AppFonts.interBold || 'System',
         fontSize: 10,
-        color: '#FFFFFF',
+        color: AppColors.white,
     },
 });
 export default ErrorBoundary;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Animated, PanResponder } from 'react-native';
+interface FloatingBubbleProps {
+    pan: Animated.ValueXY;
+    panResponder: ReturnType<typeof PanResponder.create>;
+    fabScaleAnim: Animated.Value;
+    fabRotateAnim: Animated.Value;
+    fabShineAnim: Animated.Value;
+    unreadPulseAnim: Animated.Value;
+    hasUnread: boolean;
+    onPress: () => void;
+}
+export declare const FloatingBubble: React.FC<FloatingBubbleProps>;
+export default FloatingBubble;

package/dist/esm/components/FloatingBubble.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Animated, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import TouchableScale from './TouchableScale';
+import { BrandCircleIcon } from './BrandCircleIcon';
+import styles from '../styles';
+import { AppColors } from '../styles/AppColors';
+export const FloatingBubble = ({ pan, panResponder, fabScaleAnim, fabRotateAnim, fabShineAnim, unreadPulseAnim, hasUnread, onPress, }) => {
+    return (<Animated.View style={[
+            styles.fabContainer,
+            {
+                transform: [
+                    { translateX: pan.x },
+                    { translateY: pan.y },
+                    { scale: fabScaleAnim },
+                ],
+            },
+        ]} {...panResponder.panHandlers}>
+      <TouchableScale style={styles.fabGradientTouchable} onPress={onPress} activeScale={0.88}>
+        <LinearGradient colors={[
+            AppColors.gradientPurpleStart,
+            AppColors.gradientPurpleMid,
+            AppColors.gradientPurpleEnd,
+        ]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.fabGradientInner}>
+          <Animated.View style={{
+            transform: [
+                {
+                    rotate: fabRotateAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: ['0deg', '360deg'],
+                    }),
+                },
+            ],
+        }}>
+            <BrandCircleIcon size={38}/>
+          </Animated.View>
+        </LinearGradient>
+
+        <View pointerEvents="none" style={styles.fabShineClip}>
+          <Animated.View style={[
+            styles.fabShineStreak,
+            {
+                transform: [
+                    {
+                        translateX: fabShineAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-48, 96],
+                        }),
+                    },
+                    { rotate: '25deg' },
+                ],
+            },
+        ]}>
+            <LinearGradient colors={[
+            'rgba(255,255,255,0)',
+            'rgba(255,255,255,0.55)',
+            'rgba(255,255,255,0)',
+        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+          </Animated.View>
+        </View>
+        {hasUnread && (<Animated.View style={[
+                styles.fabGreenDot,
+                { transform: [{ scale: unreadPulseAnim }] },
+            ]}/>)}
+      </TouchableScale>
+    </Animated.View>);
+};
+export default FloatingBubble;

package/dist/esm/components/HeadersSection.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { View, Pressable, Text, Animated } from 'react-native';
 // Components
 import CopyButton from './CopyButton';
@@ -58,6 +59,7 @@ const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, inde
     </Animated.View>);
 });
 const HeadersSection = ({ title, headers, search, resetKey, }) => {
+    const { t } = useTranslation();
     const { toggleOpen, forceOpen, chevronStyle, bodyStyle } = useAccordion(false, 2400, 300);
     useEffect(() => {
         forceOpen(false);
@@ -104,12 +106,12 @@ const HeadersSection = ({ title, headers, search, resetKey, }) => {
 
       <Animated.View style={bodyStyle}>
         <View style={styles.htColHeadRow}>
-          <Text style={[styles.htColHead, { width: '30%' }]}>KEY</Text>
-          <Text style={[styles.htColHead, { flex: 1 }]}>VALUE</Text>
+          <Text style={[styles.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</Text>
+          <Text style={[styles.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</Text>
         </View>
 
         {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<View style={styles.htEmpty}>
-            <Text style={styles.htEmptyText}>No matching headers</Text>
+            <Text style={styles.htEmptyText}>{t('network.noMatchingHeaders')}</Text>
           </View>)}
       </Animated.View>
     </View>);

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const HighlightText: ({ text, search, style, highlightStyle, detectLinks, ...rest }: any) => React.JSX.Element;
+declare const HighlightText: React.NamedExoticComponent<any>;
 export default HighlightText;

package/dist/esm/components/HighlightText.js

@@ -2,9 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 // Helpers
 import { escapeRegex, handleOpenExternalLink } from '../helpers';
-const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...rest }) => {
-    const hasNumberOfLines = 'numberOfLines' in rest;
-    const numLines = hasNumberOfLines ? rest.numberOfLines : 1;
+const HighlightText = React.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
     // Regex to detect absolute URLs
     const URL_REGEX = /(https?:\/\/[^\s]+)/g;
     const renderNormalOrHighlighted = (subText, keyPrefix) => {
@@ -21,7 +19,7 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
     };
     if (detectLinks && text) {
         const parts = text.split(URL_REGEX);
-        return (<Text style={style} numberOfLines={numLines} {...rest}>
+        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
         {parts.map((part, i) => {
                 if (part.match(URL_REGEX)) {
                     return (<Text key={`link-${i}`} style={{
@@ -38,15 +36,15 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
       </Text>);
     }
     if (!search)
-        return (<Text style={style} numberOfLines={numLines} {...rest}>
+        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
         {text}
       </Text>);
     const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
     const parts = text.split(regex);
-    return (<Text style={style} numberOfLines={numLines} {...rest}>
+    return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
       {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
             {part}
           </Text>) : (<Text key={i}>{part}</Text>))}
     </Text>);
-};
+});
 export default HighlightText;

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

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