react-native-inapp-inspector 1.1.24 → 1.1.26

package/dist/esm/components/AnalyticsEventCard.js

@@ -6,7 +6,7 @@ import { formatGap, formatTime, getEventColor, getEventCategory, getCategoryColo
 import { useTranslation } from '../i18n';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
-import { CartIcon, MoneyIcon } from './NetworkIcons';
+import { CartIcon, MoneyIcon, GlobeIcon, BoltIcon, SparkleIcon, ClockIcon, } from './NetworkIcons';
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
     const { t } = useTranslation();
@@ -15,6 +15,8 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
     const userPropCount = event.userProperties
         ? Object.keys(event.userProperties).length
         : 0;
+    const catKey = getEventCategory(event.name);
+    const tagColors = getCategoryColors(catKey);
     // Flash animation for newly logged events
     const flashOpacity = useRef(new Animated.Value(isNew ? 1 : 0)).current;
     useEffect(() => {
@@ -27,20 +29,29 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
         }
     }, [isNew]);
     const showGap = msSincePrev != null && msSincePrev >= 2000;
+    const categoryLabel = catKey === 'page_view'
+        ? t('analytics.pageViewCategory')
+        : catKey === 'ecommerce'
+            ? t('analytics.ecommerceCategory')
+            : catKey === 'system'
+                ? t('analytics.systemCategory')
+                : t('analytics.customCategory');
     return (<View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<View style={cardStyles.gapContainer}>
+          <View style={cardStyles.gapLine}/>
           <Text style={[cardStyles.gapText, { color: AppColors.grayTextWeak }]}>
-            {formatGap(msSincePrev)}
+            +{formatGap(msSincePrev)}
           </Text>
+          <View style={cardStyles.gapLine}/>
         </View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
       <TouchableScale onPress={onPress} style={[
             cardStyles.modernCard,
             {
-                backgroundColor: AppColors.primaryLight,
-                borderColor: AppColors.grayBorderSecondary,
+                borderLeftWidth: 3.5,
+                borderLeftColor: tagColors.text,
             },
         ]}>
         <Animated.View style={[
@@ -54,37 +65,32 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             },
         ]}/>
 
-        {/* Top Row: Event Name & Timestamp */}
+        {/* Top Row: Icon Badge, Event Name, Category Badge & Timestamp */}
         <View style={cardStyles.cardHeader}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 7, flex: 1 }}>
+            {/* Category Icon Badge */}
             <View style={[
-            cardStyles.nameBadge,
-            { backgroundColor: `${color}1A`, borderColor: `${color}30` },
+            cardStyles.iconBadge,
+            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
         ]}>
-              <HighlightText text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
+              {catKey === 'ecommerce' ? (<CartIcon color={tagColors.text} size={12}/>) : catKey === 'page_view' ? (<GlobeIcon color={tagColors.text} size={12}/>) : catKey === 'system' ? (<BoltIcon color={tagColors.text} size={12}/>) : (<SparkleIcon color={tagColors.text} size={12}/>)}
             </View>
 
-            {(() => {
-            const catKey = getEventCategory(event.name);
-            const tagColors = getCategoryColors(catKey);
-            const categoryLabel = catKey === 'page_view'
-                ? t('analytics.pageViewCategory')
-                : catKey === 'ecommerce'
-                    ? t('analytics.ecommerceCategory')
-                    : catKey === 'system'
-                        ? t('analytics.systemCategory')
-                        : t('analytics.customCategory');
-            return (<View style={[
-                    cardStyles.categoryBadge,
-                    { backgroundColor: tagColors.bg, borderColor: tagColors.border },
-                ]}>
-                  <Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
-                    {categoryLabel}
-                  </Text>
-                </View>);
-        })()}
+            {/* Event Name */}
+            <HighlightText text={event.name} search={searchStr} style={[cardStyles.eventName, { color: AppColors.primaryBlack }]} highlightStyle={cardStyles.highlight} numberOfLines={1}/>
+
+            {/* Category Pill Tag */}
+            <View style={[
+            cardStyles.categoryBadge,
+            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
+        ]}>
+              <Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
+                {categoryLabel}
+              </Text>
+            </View>
 
-            {event.count !== undefined ? (<View style={[
+            {/* Duplicate Multiplier */}
+            {event.count !== undefined && event.count > 0 ? (<View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
                     backgroundColor: AppColors.grayBackground,
@@ -96,16 +102,20 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                 event.count === 1 && { color: AppColors.grayTextStrong },
             ]}>
                   {event.count}×
-                  {event.count > 1 ? ` ${t('analytics.duplicate')}` : ''}
                 </Text>
               </View>) : null}
           </View>
-          <Text style={[cardStyles.timestamp, { color: AppColors.grayTextWeak }]}>
-            {formatTime(event.timestamp)}
-          </Text>
+
+          {/* Timestamp */}
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+            <ClockIcon color={AppColors.grayTextWeak} size={10}/>
+            <Text style={[cardStyles.timestamp, { color: AppColors.grayTextWeak }]}>
+              {formatTime(event.timestamp)}
+            </Text>
+          </View>
         </View>
 
-        {/* Bottom Row: Metadata Chips & Sparkline */}
+        {/* Bottom Row: Metadata Chips (Screen, Params, Value) */}
         <View style={cardStyles.cardBody}>
           <View style={cardStyles.chipsRow}>
             {(() => {
@@ -122,12 +132,12 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             return (<View style={[
                     cardStyles.chip,
                     {
-                        backgroundColor: AppColors.grayBackground,
-                        borderColor: AppColors.grayBorderSecondary,
+                        backgroundColor: `${AppColors.amber500}12`,
+                        borderColor: `${AppColors.amber500}2E`,
                     },
                 ]}>
-                  <View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
-                  <Text style={[cardStyles.chipText, { color: AppColors.grayText }]} numberOfLines={1}>
+                  <View style={[cardStyles.screenDot, { backgroundColor: AppColors.amber500 }]}/>
+                  <Text style={[cardStyles.chipText, { color: AppColors.amber700, fontFamily: AppFonts.interBold }]} numberOfLines={1}>
                     {screenNameStr}
                   </Text>
                 </View>);
@@ -148,11 +158,11 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             {userPropCount > 0 && (<View style={[
                 cardStyles.chip,
                 {
-                    backgroundColor: AppColors.grayBackground,
-                    borderColor: AppColors.grayBorderSecondary,
+                    backgroundColor: `${AppColors.brandPurple}10`,
+                    borderColor: `${AppColors.brandPurple}25`,
                 },
             ]}>
-                <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>
+                <Text style={[cardStyles.chipText, { color: AppColors.brandPurple, fontFamily: AppFonts.interBold }]}>
                   ★ {userPropCount} {t('analytics.props')}
                 </Text>
               </View>)}
@@ -167,7 +177,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                             borderColor: AppColors.amberBorder,
                         },
                     ]}>
-                    <CartIcon color={AppColors.amber700} size={12}/>
+                    <CartIcon color={AppColors.amber700} size={11}/>
                     <Text style={[
                         cardStyles.chipText,
                         {
@@ -189,18 +199,18 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             const val = event.params?.value ?? event.params?.price;
             const currency = event.params?.currency ?? '';
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
-            if (isPrimitive) {
-                const currencyStr = typeof currency === 'string' || typeof currency === 'number'
-                    ? String(currency)
+            if (val != null && isPrimitive && String(val).trim() !== '') {
+                const currencyStr = typeof currency === 'string' && currency.trim() !== ''
+                    ? currency.toUpperCase()
                     : '';
                 return (<View style={[
                         cardStyles.chip,
                         {
-                            backgroundColor: AppColors.emeraldBg,
-                            borderColor: AppColors.emeraldBorder,
+                            backgroundColor: `${AppColors.emerald500}15`,
+                            borderColor: `${AppColors.emerald500}35`,
                         },
                     ]}>
-                    <MoneyIcon color={AppColors.emerald600} size={12}/>
+                    <MoneyIcon color={AppColors.emerald600} size={11}/>
                     <Text style={[
                         cardStyles.chipText,
                         {
@@ -222,52 +232,63 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const cardStyles = StyleSheet.create({
     container: {
-        paddingHorizontal: 12,
+        paddingHorizontal: 10,
         paddingVertical: 3,
     },
     gapContainer: {
+        flexDirection: 'row',
         alignItems: 'center',
-        marginVertical: 4,
+        justifyContent: 'center',
+        marginVertical: 6,
+        gap: 8,
+    },
+    gapLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: `${AppColors.dividerColor}`,
     },
     gapText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
         color: AppColors.grayTextWeak,
         letterSpacing: 0.5,
     },
     modernCard: {
         backgroundColor: AppColors.white,
-        borderRadius: 8,
+        borderRadius: 10,
         borderWidth: 1,
         borderColor: AppColors.dividerColor,
-        padding: 8,
+        padding: 10,
         shadowColor: AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
         elevation: 1,
         overflow: 'hidden',
+        gap: 8,
     },
     cardHeader: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 6,
     },
-    nameBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
+    iconBadge: {
+        width: 22,
+        height: 22,
         borderRadius: 6,
         borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     eventName: {
         fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        letterSpacing: 0.2,
+        fontSize: 13,
+        letterSpacing: 0.1,
+        color: AppColors.primaryBlack,
     },
     timestamp: {
         fontFamily: AppFonts.interMedium,
-        fontSize: 11,
+        fontSize: 10,
         color: AppColors.grayTextWeak,
     },
     highlight: {
@@ -277,25 +298,24 @@ const cardStyles = StyleSheet.create({
     },
     cardBody: {
         flexDirection: 'row',
-        alignItems: 'flex-end',
+        alignItems: 'center',
         justifyContent: 'space-between',
     },
     chipsRow: {
         flexDirection: 'row',
         alignItems: 'center',
         flexWrap: 'wrap',
-        gap: 8,
+        gap: 6,
         flex: 1,
     },
     chip: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 5,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        gap: 3.5,
     },
     chipText: {
         fontFamily: AppFonts.interMedium,
@@ -303,17 +323,16 @@ const cardStyles = StyleSheet.create({
         color: AppColors.grayText,
     },
     screenDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        marginRight: 4,
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
     },
     duplicateBadge: {
         backgroundColor: AppColors.roseBg,
         borderColor: AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
-        paddingVertical: 2,
+        paddingVertical: 1.5,
         borderRadius: 4,
     },
     duplicateText: {
@@ -321,31 +340,18 @@ const cardStyles = StyleSheet.create({
         fontSize: 9,
         color: AppColors.rose600,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
     },
     categoryBadge: {
         borderWidth: 1,
         paddingHorizontal: 5,
-        paddingVertical: 2,
+        paddingVertical: 1.5,
         borderRadius: 4,
     },
     categoryText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 9,
+        fontSize: 8.5,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
-    },
-    miniGraphWrapper: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        height: 18,
-        gap: 2,
-        marginLeft: 12,
-    },
-    miniGraphBar: {
-        width: 4,
-        borderRadius: 2,
-        opacity: 0.7,
+        letterSpacing: 0.4,
     },
 });
 export default AnalyticsEventCard;

package/dist/esm/components/ConsoleLogCard.js

@@ -17,36 +17,57 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const fullPrefix = match[1];
         const remainingText = message.substring(fullPrefix.length);
         const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
-        const getTagColor = (tag) => {
-            const cleanTag = tag
-                .replace(/[\[\]]/g, '')
-                .trim()
-                .toUpperCase();
-            if (cleanTag === 'API')
-                return AppColors.sky600;
-            if (cleanTag === 'TEST')
-                return AppColors.green600;
-            if (cleanTag === 'APP')
-                return AppColors.indigo600;
-            if (cleanTag === 'WARN')
-                return AppColors.darkOrange || AppColors.lightOrange;
-            if (cleanTag === 'ERROR')
-                return AppColors.errorColor;
-            return AppColors.slate600;
+        const getTagDecorator = (tag) => {
+            const clean = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
+            if (clean === 'AXIOS') {
+                return { color: '#059669', icon: '⚡', label: 'AXIOS' };
+            }
+            if (clean === 'API' || clean === 'FETCH' || clean === 'HTTP' || clean === 'NETWORK') {
+                return { color: '#0284C7', icon: '🌐', label: clean };
+            }
+            if (clean === 'SAMPLE' || clean === 'BATCH') {
+                return { color: '#4F46E5', icon: '🎲', label: clean };
+            }
+            if (clean === 'REDUX' || clean === 'STORE' || clean === 'STATE') {
+                return { color: '#7C3AED', icon: '⚛️', label: clean };
+            }
+            if (clean === 'ANALYTICS' || clean === 'FIREBASE' || clean === 'GA4' || clean === 'GA') {
+                return { color: '#0D9488', icon: '📊', label: clean };
+            }
+            if (clean === 'AUTH' || clean === 'TOKEN' || clean === 'SESSION') {
+                return { color: '#D97706', icon: '🔑', label: clean };
+            }
+            if (clean === 'APP') {
+                return { color: '#4F46E5', icon: '📱', label: 'APP' };
+            }
+            if (clean === 'TEST') {
+                return { color: '#10B981', icon: '🧪', label: 'TEST' };
+            }
+            if (clean === 'WARN' || clean === 'WARNING') {
+                return { color: '#D97706', icon: '⚠️', label: 'WARN' };
+            }
+            if (clean === 'ERROR' || clean === 'CRASH' || clean === 'BUG') {
+                return { color: '#DC2626', icon: '💥', label: 'ERROR' };
+            }
+            if (clean === 'PERF' || clean === 'RENDER') {
+                return { color: '#8B5CF6', icon: '⚡', label: clean };
+            }
+            return { color: AppColors.slate600, icon: '🏷️', label: clean };
         };
         return (<View style={{ flexDirection: 'column', gap: 6 }}>
-        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 5 }}>
           {tags.map((tag, i) => {
-                const color = getTagColor(tag);
+                const dec = getTagDecorator(tag);
                 return (<View key={i} style={[
                         styles.prefixTag,
                         {
-                            backgroundColor: `${color}15`,
-                            borderColor: `${color}35`,
+                            backgroundColor: `${dec.color}15`,
+                            borderColor: `${dec.color}35`,
                         },
                     ]}>
-                <Text style={[styles.prefixTagText, { color }]}>
-                  {tag.replace(/[\[\]]/g, '')}
+                <Text style={{ fontSize: 9.5 }}>{dec.icon}</Text>
+                <Text style={[styles.prefixTagText, { color: dec.color }]}>
+                  {dec.label}
                 </Text>
               </View>);
             })}
@@ -410,9 +431,12 @@ const styles = StyleSheet.create({
         fontSize: 9,
     },
     prefixTag: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3.5,
+        paddingHorizontal: 6.5,
+        paddingVertical: 2,
+        borderRadius: 5,
         borderWidth: 1,
     },
     prefixTagText: {

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

@@ -6,6 +6,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private handleReset;
     private handleCopyTrace;
-    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+    render(): React.ReactNode;
 }
 export default ErrorBoundary;

package/dist/esm/components/ErrorBoundary.js

@@ -1,9 +1,10 @@
-import React, { Component } from 'react';
-import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native';
+import { Component } from 'react';
+import { StyleSheet } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { copyToClipboard } from '../helpers';
-import { WarningTriangleIcon, CopyIcon } from './NetworkIcons';
+import { handleInterceptedCrash } from '../customHooks/crashHandler';
+import { CrashType } from '../types/enums';
 function parseStackTrace(stack) {
     if (!stack)
         return null;
@@ -68,119 +69,15 @@ ${error.stack}`;
         return { hasError: true, error };
     }
     componentDidCatch(error, errorInfo) {
-        console.error('InAppInspector ErrorBoundary caught a crash:', error, errorInfo);
+        try {
+            const stack = error?.stack || errorInfo?.componentStack;
+            handleInterceptedCrash(error, stack, false, CrashType.Render, errorInfo?.componentStack);
+        }
+        catch { }
     }
     render() {
         if (this.state.hasError) {
-            const isInline = this.props.fallbackType === 'inline';
-            if (isInline) {
-                return (<View style={styles.inlineContainer}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <WarningTriangleIcon color={AppColors.redErrorText} size={14}/>
-              <Text style={styles.inlineTitle}>Inspector Crash</Text>
-            </View>
-            <TouchableOpacity style={styles.inlineResetBtn} onPress={this.handleReset}>
-              <Text style={styles.inlineResetText}>Reload</Text>
-            </TouchableOpacity>
-          </View>);
-            }
-            const error = this.state.error;
-            const isNativeCrash = error ? (error.message.includes('Native') || error.message.includes('native') || error.message.includes('Swift') || error.message.includes('Java')) : false;
-            const parsed = error && error.stack ? parseStackTrace(error.stack) : null;
-            return (<View style={styles.container}>
-          <View style={styles.card}>
-            <View style={{ marginBottom: 12, alignItems: 'center' }}>
-            <WarningTriangleIcon color={AppColors.amber500} size={44}/>
-          </View>
-            <Text style={styles.title}>Something went wrong</Text>
-            
-            <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    backgroundColor: isNativeCrash ? `${AppColors.errorColor}1A` : `${AppColors.amber500}1A`,
-                    paddingHorizontal: 10,
-                    paddingVertical: 4,
-                    borderRadius: 20,
-                    marginBottom: 12,
-                    gap: 4
-                }}>
-              <View style={{
-                    width: 8,
-                    height: 8,
-                    borderRadius: 4,
-                    backgroundColor: isNativeCrash ? AppColors.errorColor : AppColors.amber500,
-                }}/>
-              <Text style={{
-                    fontSize: 10,
-                    fontWeight: 'bold',
-                    color: isNativeCrash ? AppColors.errorColor : AppColors.amber500,
-                    fontFamily: AppFonts.interBold || 'System'
-                }}>
-                {isNativeCrash ? 'NATIVE CRASH' : 'JAVASCRIPT CRASH'}
-              </Text>
-            </View>
-
-            <Text style={styles.subtitle}>
-              The In-App Inspector or active view encountered an error. Traceback details are parsed below:
-            </Text>
-
-            {parsed && (<View style={{
-                        backgroundColor: AppColors.slate100,
-                        borderRadius: 8,
-                        padding: 10,
-                        width: '100%',
-                        marginBottom: 10,
-                        borderWidth: 1,
-                        borderColor: AppColors.slate200,
-                        gap: 4
-                    }}>
-                <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: AppColors.slate600, fontFamily: AppFonts.interMedium }} numberOfLines={1}>
-                  <Text style={{ fontWeight: 'bold' }}>File:</Text> {parsed.file}
-                </Text>
-                <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>)}
-
-            {error && (<ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
-                <Text style={styles.code}>
-                  {error.message}
-                  {'\n\n'}
-                  {error.stack}
-                </Text>
-              </ScrollView>)}
-
-            <View style={{ width: '100%', gap: 8, marginBottom: 12 }}>
-              <TouchableOpacity style={{
-                    backgroundColor: AppColors.slate900,
-                    height: 38,
-                    borderRadius: 8,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    flexDirection: 'row',
-                    gap: 6
-                }} onPress={this.handleCopyTrace}>
-                <CopyIcon color={AppColors.white} size={14}/>
-                <Text style={{ color: AppColors.white, fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts.interBold || 'System' }}>
-                  Copy Crash Traceback
-                </Text>
-              </TouchableOpacity>
-            </View>
-
-            <View style={styles.btnRow}>
-              <TouchableOpacity style={styles.resetBtn} onPress={this.handleReset}>
-                <Text style={styles.resetBtnText}>Retry / Reload</Text>
-              </TouchableOpacity>
-              
-              {this.props.onClose && (<TouchableOpacity style={styles.closeBtn} onPress={this.props.onClose}>
-                  <Text style={styles.closeBtnText}>Close Inspector</Text>
-                </TouchableOpacity>)}
-            </View>
-          </View>
-        </View>);
+            return null;
         }
         return this.props.children;
     }

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AnalyticsFilterModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+declare const AnalyticsFilterModal: React.FC<AnalyticsFilterModalProps>;
+export default AnalyticsFilterModal;