react-native-inapp-inspector 1.1.21 → 1.1.23

package/dist/esm/components/AnalyticsEventCard.js

@@ -2,88 +2,14 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
-import { formatGap, formatTime } from '../helpers';
+import { formatGap, formatTime, getEventColor, getEventCategory, getCategoryColors, } from '../helpers';
+import { useTranslation } from '../i18n';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
-// ─── Palette (Google Analytics colours) ───────────────────────────────────────
-const EVENT_PALETTE = [
-    AppColors.googleBlue, // blue
-    AppColors.googleGreen, // green
-    AppColors.googlePurple, // purple
-    AppColors.googleTeal, // teal
-    AppColors.googleRed, // red
-    AppColors.googleOrange, // orange
-    AppColors.blue700, // dark blue
-    AppColors.materialGreen, // dark green
-];
-export function getEventColor(name) {
-    const safeName = typeof name === 'string' ? name : String(name || '');
-    let hash = 0;
-    for (let i = 0; i < safeName.length; i++) {
-        hash = (hash * 31 + safeName.charCodeAt(i)) | 0;
-    }
-    return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
-}
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-function getEventCategory(name) {
-    if (!name)
-        return 'Custom';
-    const lowercaseName = name.toLowerCase();
-    if (lowercaseName === 'screen_view' || lowercaseName === 'page_view') {
-        return 'Page View';
-    }
-    // Ecommerce events
-    const ecommerceEvents = [
-        'purchase', 'add_to_cart', 'begin_checkout', 'view_item',
-        'select_item', 'remove_from_cart', 'view_cart',
-        'add_shipping_info', 'add_payment_info', 'refund',
-        'view_item_list', 'select_promotion', 'view_promotion'
-    ];
-    if (ecommerceEvents.includes(lowercaseName)) {
-        return 'Ecommerce';
-    }
-    // Firebase System Auto-events
-    const systemEvents = [
-        'first_open', 'session_start', 'user_engagement',
-        'app_clear_data', 'app_exception', 'app_update', 'os_update',
-        'notification_receive', 'notification_open', 'notification_dismiss',
-        'screen_active', 'screen_inactive'
-    ];
-    if (systemEvents.includes(lowercaseName) || lowercaseName.startsWith('firebase_') || lowercaseName.startsWith('_')) {
-        return 'System';
-    }
-    return 'Custom';
-}
-function getCategoryColors(category) {
-    switch (category) {
-        case 'Page View':
-            return {
-                bg: AppColors.blueBg,
-                border: AppColors.blueBorder,
-                text: AppColors.blue800,
-            };
-        case 'Ecommerce':
-            return {
-                bg: AppColors.greenBg,
-                border: AppColors.greenBorder,
-                text: AppColors.materialGreen,
-            };
-        case 'System':
-            return {
-                bg: AppColors.greyBg,
-                border: AppColors.greyBorder,
-                text: AppColors.grey600,
-            };
-        default:
-            return {
-                bg: AppColors.purpleBg,
-                border: AppColors.purpleBorder,
-                text: AppColors.purpleText,
-            };
-    }
-}
+import { CartIcon, MoneyIcon } from './NetworkIcons';
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
+    const { t } = useTranslation();
     const color = getEventColor(event.name);
     const paramCount = event.params ? Object.keys(event.params).length : 0;
     const userPropCount = event.userProperties
@@ -104,11 +30,19 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
     return (<View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<View style={cardStyles.gapContainer}>
-          <Text style={[cardStyles.gapText, { color: AppColors.grayTextWeak }]}>{formatGap(msSincePrev)}</Text>
+          <Text style={[cardStyles.gapText, { color: AppColors.grayTextWeak }]}>
+            {formatGap(msSincePrev)}
+          </Text>
         </View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
-      <TouchableScale onPress={onPress} style={[cardStyles.modernCard, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
+      <TouchableScale onPress={onPress} style={[
+            cardStyles.modernCard,
+            {
+                backgroundColor: AppColors.primaryLight,
+                borderColor: AppColors.grayBorderSecondary,
+            },
+        ]}>
         <Animated.View style={[
             StyleSheet.absoluteFill,
             {
@@ -131,14 +65,21 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             </View>
 
             {(() => {
-            const category = getEventCategory(event.name);
-            const tagColors = getCategoryColors(category);
+            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 }]}>
-                    {category}
+                    {categoryLabel}
                   </Text>
                 </View>);
         })()}
@@ -154,7 +95,8 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                 cardStyles.duplicateText,
                 event.count === 1 && { color: AppColors.grayTextStrong },
             ]}>
-                  {event.count}×{event.count > 1 ? ' Duplicate' : ''}
+                  {event.count}×
+                  {event.count > 1 ? ` ${t('analytics.duplicate')}` : ''}
                 </Text>
               </View>) : null}
           </View>
@@ -177,7 +119,13 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             const screenNameStr = typeof rawScreenName === 'object'
                 ? JSON.stringify(rawScreenName)
                 : String(rawScreenName);
-            return (<View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
+            return (<View style={[
+                    cardStyles.chip,
+                    {
+                        backgroundColor: AppColors.grayBackground,
+                        borderColor: AppColors.grayBorderSecondary,
+                    },
+                ]}>
                   <View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
                   <Text style={[cardStyles.chipText, { color: AppColors.grayText }]} numberOfLines={1}>
                     {screenNameStr}
@@ -185,22 +133,52 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                 </View>);
         })()}
 
-            <View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
+            <View style={[
+            cardStyles.chip,
+            {
+                backgroundColor: AppColors.grayBackground,
+                borderColor: AppColors.grayBorderSecondary,
+            },
+        ]}>
               <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>
-                {'{} '} {paramCount} params
+                {'{} '} {paramCount} {t('analytics.params')}
               </Text>
             </View>
 
-            {userPropCount > 0 && (<View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
-                <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>★ {userPropCount} props</Text>
+            {userPropCount > 0 && (<View style={[
+                cardStyles.chip,
+                {
+                    backgroundColor: AppColors.grayBackground,
+                    borderColor: AppColors.grayBorderSecondary,
+                },
+            ]}>
+                <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>
+                  ★ {userPropCount} {t('analytics.props')}
+                </Text>
               </View>)}
 
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<View style={[cardStyles.chip, { backgroundColor: AppColors.amberBg, borderColor: AppColors.amberBorder }]}>
-                    <Text style={[cardStyles.chipText, { color: AppColors.amber700, fontFamily: AppFonts.interBold }]}>
-                      🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
+                return (<View style={[
+                        cardStyles.chip,
+                        {
+                            backgroundColor: AppColors.amberBg,
+                            borderColor: AppColors.amberBorder,
+                        },
+                    ]}>
+                    <CartIcon color={AppColors.amber700} size={12}/>
+                    <Text style={[
+                        cardStyles.chipText,
+                        {
+                            color: AppColors.amber700,
+                            fontFamily: AppFonts.interBold,
+                        },
+                    ]}>
+                      {items.length}{' '}
+                      {items.length === 1
+                        ? t('analytics.item')
+                        : t('analytics.items')}
                     </Text>
                   </View>);
             }
@@ -212,10 +190,25 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             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) : '';
-                return (<View style={[cardStyles.chip, { backgroundColor: AppColors.emeraldBg, borderColor: AppColors.emeraldBorder }]}>
-                    <Text style={[cardStyles.chipText, { color: AppColors.emerald600, fontFamily: AppFonts.interBold }]}>
-                      💰 {String(val)} {currencyStr}
+                const currencyStr = typeof currency === 'string' || typeof currency === 'number'
+                    ? String(currency)
+                    : '';
+                return (<View style={[
+                        cardStyles.chip,
+                        {
+                            backgroundColor: AppColors.emeraldBg,
+                            borderColor: AppColors.emeraldBorder,
+                        },
+                    ]}>
+                    <MoneyIcon color={AppColors.emerald600} size={12}/>
+                    <Text style={[
+                        cardStyles.chipText,
+                        {
+                            color: AppColors.emerald600,
+                            fontFamily: AppFonts.interBold,
+                        },
+                    ]}>
+                      {String(val)} {currencyStr}
                     </Text>
                   </View>);
             }

package/dist/esm/components/ErrorBoundary.js

@@ -3,6 +3,7 @@ import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-nati
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { copyToClipboard } from '../helpers';
+import { WarningTriangleIcon, CopyIcon } from './NetworkIcons';
 function parseStackTrace(stack) {
     if (!stack)
         return null;
@@ -74,7 +75,10 @@ ${error.stack}`;
             const isInline = this.props.fallbackType === 'inline';
             if (isInline) {
                 return (<View style={styles.inlineContainer}>
-            <Text style={styles.inlineTitle}>⚠️ Inspector Crash</Text>
+            <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>
@@ -85,7 +89,9 @@ ${error.stack}`;
             const parsed = error && error.stack ? parseStackTrace(error.stack) : null;
             return (<View style={styles.container}>
           <View style={styles.card}>
-            <Text style={styles.emoji}>⚠️</Text>
+            <View style={{ marginBottom: 12, alignItems: 'center' }}>
+            <WarningTriangleIcon color={AppColors.amber500} size={44}/>
+          </View>
             <Text style={styles.title}>Something went wrong</Text>
             
             <View style={{
@@ -98,13 +104,19 @@ ${error.stack}`;
                     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'}
+                {isNativeCrash ? 'NATIVE CRASH' : 'JAVASCRIPT CRASH'}
               </Text>
             </View>
 
@@ -151,8 +163,9 @@ ${error.stack}`;
                     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
+                  Copy Crash Traceback
                 </Text>
               </TouchableOpacity>
             </View>
@@ -194,10 +207,6 @@ const styles = StyleSheet.create({
         shadowRadius: 12,
         elevation: 8,
     },
-    emoji: {
-        fontSize: 40,
-        marginBottom: 12,
-    },
     title: {
         fontFamily: AppFonts.interBold || 'System',
         fontSize: 18,

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

@@ -32,6 +32,7 @@ export interface BundlePackageItem {
     lastActive?: string;
     npmUrl?: string;
 }
+export type BundleIconType = 'source' | 'deps' | 'media' | 'overhead' | 'image' | 'typescript' | 'javascript' | 'font' | 'json' | 'folder' | 'ban' | 'bolt';
 export interface TreeNode {
     id: string;
     name: string;