react-native-inapp-inspector 1.1.21 → 1.1.23

package/dist/commonjs/i18n/locales/en.json

@@ -10,8 +10,12 @@
         "failed": "Failed",
         "copy": "Copy",
         "copied": "Copied!",
+        "copyJson": "Copy JSON",
+        "collapseAll": "Collapse All",
+        "expandAll": "Expand All",
         "viewOnNpm": "View on NPM",
-        "later": "Later"
+        "later": "Later",
+        "source": "SOURCE"
     },
     "header": {
         "updateAvailableTitle": "Update Available",
@@ -227,7 +231,16 @@
         "parameters": "Parameters",
         "noParams": "No parameters",
         "recentEvents": "Recent Events",
-        "analyticsError": "Analytics Error"
+        "analyticsError": "Analytics Error",
+        "duplicate": "Duplicate",
+        "params": "params",
+        "props": "props",
+        "item": "item",
+        "items": "items",
+        "pageViewCategory": "Page View",
+        "ecommerceCategory": "Ecommerce",
+        "systemCategory": "System",
+        "customCategory": "Custom"
     },
     "redux": {
         "title": "Redux",
@@ -255,6 +268,216 @@
         "autoRefresh": "Auto-refresh",
         "paused": "Paused"
     },
+    "performance": {
+        "title": "Performance",
+        "fpsTarget": "60 FPS Target Monitor",
+        "healthScore": "FPS Health Score",
+        "excellent": "Excellent (60 FPS)",
+        "good": "Good (Minor Janks)",
+        "needsOptimization": "Needs Optimization",
+        "liveFps": "Live FPS & Refresh Cycle",
+        "realtimeWindow": "Real-Time (1s window)",
+        "uiRenderThread": "UI Render Thread",
+        "optimalFrame": "Optimal (<16.6ms)",
+        "slowFrame": "Slow Frame (>16.6ms)",
+        "budgetUsage": "60 FPS Budget Usage",
+        "avgFrameTime": "Avg Frame Time",
+        "peakTime": "Peak Time",
+        "jsThread": "JS Thread",
+        "uiThread": "UI Thread",
+        "jsiLatency": "JSI Latency",
+        "heapImpact": "Heap Impact",
+        "optimizationTip": "Optimization Tip:",
+        "recordedEvents": "Recorded Events & Interactions",
+        "liveStream": "Live Session Stream",
+        "emptyTitle": "No performance events captured yet",
+        "emptySubtitle": "Perform actions in your app to see thread timings, render cost, and FPS tracking.",
+        "tabOverview": "Overview",
+        "tabRenders": "Renders",
+        "tabInteractions": "Interactions",
+        "tabMemory": "Memory",
+        "filterAll": "All",
+        "filterSlow": "Slow (>16ms)",
+        "filterCritical": "Critical (>33ms)",
+        "searchPlaceholder": "Search component, interaction...",
+        "avgRenderTime": "Avg Render",
+        "totalRenders": "Total Renders",
+        "renderCost": "Render Cost",
+        "slowRenders": "Slow Renders",
+        "unnecessaryRenders": "Wasteful Renders",
+        "heapAllocated": "Heap Allocated",
+        "heapLimit": "Heap Limit",
+        "gcEvents": "GC Events",
+        "leakRisk": "Leak Risk",
+        "lowRisk": "Low Risk",
+        "mediumRisk": "Medium Risk",
+        "highRisk": "High Risk",
+        "memoryTimeline": "Memory Timeline",
+        "clearPerformance": "Clear Performance Data",
+        "clearConfirmation": "Are you sure you want to clear all performance tracking data?",
+        "liveFpsDip": "Live Frame Rate Dip ({{fps}} FPS)",
+        "liveFpsDipDetail": "Main thread frame duration extended to {{duration}}ms during view update.",
+        "liveFpsDipAdvice": "Heavy JavaScript execution during frame pass delayed display presentation.",
+        "yogaLayout": "Yoga Flexbox Layout",
+        "hermesGc": "Hermes Garbage Collection",
+        "jsEngine": "JS Engine",
+        "uiReconciler": "UI Reconciler",
+        "memoryHeap": "Memory Heap",
+        "allLogs": "All Logs",
+        "jankySlow": "Janky / Slow",
+        "navigation": "Navigation",
+        "components": "Components",
+        "memoryGc": "Memory & GC",
+        "networkIo": "Network & I/O",
+        "budgetHeadroom": "~{{time}}ms Headroom ({{percent}}%)",
+        "jsExec": "JS Exec: {{time}}ms",
+        "yogaLayoutTime": "Yoga Layout: {{time}}ms",
+        "uiRenderTime": "UI Render: {{time}}ms",
+        "freeTime": "Free: {{time}}ms",
+        "heapAllocatedSub": "{{allocated}} MB allocated",
+        "hermesAot": "Hermes (AOT)",
+        "v8Jit": "V8 (JIT)",
+        "jscEngine": "JSC",
+        "bytecodeCompiled": "Bytecode compiled",
+        "jitEngine": "JIT Engine",
+        "webkitEngine": "Webkit Engine",
+        "fabricJsi": "Fabric / JSI",
+        "paperBridge": "Paper / Bridge",
+        "directCppBindings": "Direct C++ bindings",
+        "asyncJsonBridge": "Async JSON Bridge",
+        "fpsUnit": "FPS",
+        "jsLag": "JS Lag",
+        "jankRate": "Jank Rate",
+        "live": "Live",
+        "msTotal": "{{duration}}ms total • {{time}}"
+    },
+    "bundle": {
+        "heroTitle": "Bundle & Asset Architecture",
+        "heroSubtitle": "Real-time size breakdown across all assets, code, and dependencies",
+        "heroSubtitleLive": "Live analysis of {{scriptUrl}}",
+        "bundleOverviewJson": "Bundle Overview JSON",
+        "devBundleSize": "DEV BUNDLE SIZE",
+        "devBundleHint": "{{kb}} KB • {{modules}} modules",
+        "trackedFilesHint": "{{count}} Tracked files",
+        "imagesMedia": "IMAGES & MEDIA",
+        "pctOfTrackedAssets": "{{pct}}% of tracked assets",
+        "tsJsSource": "TS / JS SOURCE",
+        "jsEngine": "JS ENGINE",
+        "bytecodeAot": "Bytecode AOT",
+        "standard": "Standard",
+        "splitUpTitle": "Development Bundle Split-Up",
+        "splitUpSub": "Measured {{mb}} MB JS bundle • {{files}} files • {{packages}} packages",
+        "splitUpJson": "Split-Up JSON",
+        "splitAppSource": "App Source Code",
+        "splitNodeModules": "node_modules Dependencies",
+        "splitAssetsMedia": "Assets & Media",
+        "splitMetroOverhead": "Metro Dev Overhead",
+        "splitSize": "{{kb}} KB • {{mb}} MB",
+        "productionFootprint": "PRODUCTION FOOTPRINT",
+        "productionValue": "iOS {{ios}} MB • Android {{android}} MB",
+        "productionDownload": "Download: iOS ~{{ios}} MB • AAB ~{{aab}} MB • APK ~{{apk}} MB",
+        "treemapTitle": "Asset & File Type Ratio Treemap",
+        "treemapSub": "Total ~{{mb}} MB",
+        "treemapJson": "Ratio Treemap JSON",
+        "legendImages": "Images:",
+        "legendTs": "TS/TSX:",
+        "legendJs": "JS Libs:",
+        "legendFonts": "Fonts:",
+        "legendJson": "JSON:",
+        "categoryBreakdown": "Category Breakdown",
+        "categoriesJson": "Categories Breakdown JSON",
+        "catImagesTitle": "Images & Media Assets",
+        "catImagesDesc": "PNG, WebP, SVG, and JPG assets in bundle",
+        "catJsTitle": "Compiled Node Modules & JS",
+        "catJsDesc": "Third-party dependencies and native bridges",
+        "catFontsTitle": "Custom Fonts & Vector Glyphs",
+        "catFontsDesc": "Font assets in bundle",
+        "catTsTitle": "TypeScript & JSX Components",
+        "catTsDesc": "App screen components, hooks, and business logic",
+        "catJsonTitle": "JSON Data & Localizations",
+        "catJsonDesc": "i18n translation dictionaries and static configs",
+        "catRowSub": "{{count}} items • {{desc}}",
+        "totalBundleAssets": "TOTAL BUNDLE ASSETS",
+        "totalBundleValue": "{{kb}} KB (~{{mb}} MB)",
+        "totalFormula": "Sum: {{images}} KB + {{js}} KB + {{fonts}} KB + {{ts}} KB + {{json}} KB = {{total}} KB ({{count}} items • 100%)",
+        "tabOverview": "Overview",
+        "tabFiles": "Files ({{count}})",
+        "tabPackages": "Packages ({{count}})",
+        "tabMedia": "Media ({{count}})",
+        "tabOptimizer": "Optimizer",
+        "analyzingTitle": "Analyzing host app bundle from Metro…",
+        "analyzingHint": "Fetching bundle & extracting real modules",
+        "searchFilesPlaceholder": "Search by file name (.png, .tsx, .ttf, path)...",
+        "filteredFilesJson": "Filtered Files JSON",
+        "catAll": "All Files",
+        "catUnused": "Not Consumed (Dead)",
+        "catConsumed": "In-Use / Active",
+        "catImages": "Images & Media",
+        "catTypescript": "TypeScript / TSX",
+        "catJavascript": "JS & Node Modules",
+        "catFonts": "Fonts & Glyphs",
+        "catJson": "JSON & Data",
+        "treeView": "Tree View",
+        "flatList": "Flat List",
+        "expand": "Expand",
+        "collapse": "Collapse",
+        "showingFilesOf": "Showing {{shown}} of {{total}} files",
+        "filesOf": "{{count}} of {{total}} Files",
+        "notConsumed": "Not Consumed",
+        "consumed": "Consumed",
+        "copyFileInfo": "Copy {{name}} Info",
+        "fileDetailsJson": "File Details JSON",
+        "file": "file",
+        "files": "files",
+        "fileSizeKb": "{{size}} KB",
+        "fileSizeMb": "{{size}} MB",
+        "mbValue": "~{{size}} MB",
+        "kbMbValue": "{{kb}} KB ({{mb}} MB)",
+        "legendValue": "{{kb}} KB ({{pct}}%)",
+        "mediaSavings": "{{size}} KB",
+        "searchPackagesPlaceholder": "Search package (react-native, axios, navigation)...",
+        "dependenciesJson": "Dependencies JSON",
+        "showingDependencies": "Showing {{count}} dependencies",
+        "versionPrefix": "v{{version}}",
+        "bundled": "bundled",
+        "deprecated": "DEPRECATED",
+        "updateAvailable": "Update: v{{version}}",
+        "upToDate": "Up to date",
+        "bundledBadge": "Bundled",
+        "packageDetailsJson": "Package Details JSON",
+        "direct": "Direct",
+        "transitive": "Transitive",
+        "minified": "~{{size}} KB minified",
+        "npmLink": "npm ↗",
+        "dependenciesCount": "{{count}} Dependencies",
+        "mediaAuditorTitle": "Media Compression Auditor",
+        "mediaAssetsJson": "Media Assets JSON",
+        "mediaAuditorPrefix": "Images & Fonts constitute",
+        "mediaAuditorMid": "of total assets (~{{kb}} KB). Converting PNGs to WebP and font subsetting can reduce size by up to",
+        "mediaAuditorSuffix": "KB.",
+        "mediaAssetsList": "Media Assets & Fonts ({{count}} items)",
+        "mediaItemJson": "Media Item JSON",
+        "mediaAndFonts": "{{count}} Media & Fonts",
+        "optimizerTitle": "React Native Bundle Optimization Checklist",
+        "optimizationChecklist": "Optimization Checklist",
+        "optTip1Title": "Convert Heavy PNGs to WebP / SVGs",
+        "optTip1Desc": "Images account for >40% of final app download size. Converting 2x/3x raster PNGs to WebP saves 60-70% size with no visible fidelity loss.",
+        "optTip2Title": "Enable Hermes Bytecode Engine",
+        "optTip2DescActive": "Hermes is active! JavaScript is compiled into optimized bytecode Ahead-Of-Time.",
+        "optTip2DescInactive": "Hermes is disabled. Enable hermes in your app config for ~40% smaller payload and instant TTI startup.",
+        "optTip3Title": "Font Subsetting & Weight Pruning",
+        "optTip3Desc": "Include only the font weights you actively use (e.g. Regular & Bold). Remove unused glyph ranges to save 100KB+ per font file.",
+        "optTip4Title": "Selective Path Imports (Tree-shaking)",
+        "optTip4Desc": "Import from specific subpaths (e.g. lodash/get or specific vector icon sets) instead of importing large monolithic packages.",
+        "optTip5Title": "Screen Lazy-Loading",
+        "optTip5Desc": "Lazy load secondary screens and heavy modal sheets using dynamic imports and InteractionManager to reduce initial bundle evaluation.",
+        "highImpact": "High Impact",
+        "mediumImpact": "Medium Impact",
+        "bestPractice": "Best Practice",
+        "actionRequired": "Action Required",
+        "active": "Active",
+        "tipDetails": "Tip Details"
+    },
     "errors": {
         "title": "Something went wrong",
         "message": "An unexpected error occurred.",

package/dist/commonjs/styles/AppColors.d.ts

@@ -74,6 +74,61 @@ declare const LightColors: {
     googleRed: string;
     googlePurple: string;
     googleTeal: string;
+    npmRed: string;
+    npmRedTint: string;
+    npmRedBorder: string;
+    npmDark: string;
+    reactCyan: string;
+    pink500: string;
+    pink400: string;
+    rose500: string;
+    sky500: string;
+    sky400: string;
+    indigo500: string;
+    purple500: string;
+    purple400: string;
+    fuchsia500: string;
+    emerald400: string;
+    amber400: string;
+    orange500: string;
+    red500: string;
+    teal400: string;
+    teal500: string;
+    lime500: string;
+    yellow400: string;
+    yellow500: string;
+    slate800: string;
+    slate850: string;
+    reanimatedNavy: string;
+    expoViolet: string;
+    hermesPurple: string;
+    cyan500: string;
+    indigo400: string;
+    indigo600Alt: string;
+    purple800: string;
+    purple900: string;
+    purple50: string;
+    purple100: string;
+    purple200: string;
+    rose700: string;
+    red600: string;
+    red50: string;
+    red100: string;
+    amber100: string;
+    amber200: string;
+    amber800Warm: string;
+    yellow200: string;
+    yellow800: string;
+    green100: string;
+    emerald100: string;
+    emerald700: string;
+    pink100: string;
+    sky100: string;
+    indigo50: string;
+    gray100: string;
+    gray200: string;
+    gray500: string;
+    gray600: string;
     errorCardBg: string;
     warnCardBg: string;
     blueTintBg: string;
@@ -174,6 +229,61 @@ export declare const getThemeColors: (isDark: boolean) => {
     googleRed: string;
     googlePurple: string;
     googleTeal: string;
+    npmRed: string;
+    npmRedTint: string;
+    npmRedBorder: string;
+    npmDark: string;
+    reactCyan: string;
+    pink500: string;
+    pink400: string;
+    rose500: string;
+    sky500: string;
+    sky400: string;
+    indigo500: string;
+    purple500: string;
+    purple400: string;
+    fuchsia500: string;
+    emerald400: string;
+    amber400: string;
+    orange500: string;
+    red500: string;
+    teal400: string;
+    teal500: string;
+    lime500: string;
+    yellow400: string;
+    yellow500: string;
+    slate800: string;
+    slate850: string;
+    reanimatedNavy: string;
+    expoViolet: string;
+    hermesPurple: string;
+    cyan500: string;
+    indigo400: string;
+    indigo600Alt: string;
+    purple800: string;
+    purple900: string;
+    purple50: string;
+    purple100: string;
+    purple200: string;
+    rose700: string;
+    red600: string;
+    red50: string;
+    red100: string;
+    amber100: string;
+    amber200: string;
+    amber800Warm: string;
+    yellow200: string;
+    yellow800: string;
+    green100: string;
+    emerald100: string;
+    emerald700: string;
+    pink100: string;
+    sky100: string;
+    indigo50: string;
+    gray100: string;
+    gray200: string;
+    gray500: string;
+    gray600: string;
     errorCardBg: string;
     warnCardBg: string;
     blueTintBg: string;

package/dist/commonjs/styles/AppColors.js

@@ -81,6 +81,63 @@ const LightColors = {
     googleRed: '#E53935',
     googlePurple: '#5C2D91',
     googleTeal: '#00897B',
+    // ─── NPM / Package / Tailwind Spectrum Helpers ───
+    npmRed: '#CB3837',
+    npmRedTint: '#CB383714',
+    npmRedBorder: '#CB383733',
+    npmDark: '#20232A',
+    reactCyan: '#61DAFB',
+    pink500: '#EC4899',
+    pink400: '#F472B6',
+    rose500: '#F43F5E',
+    sky500: '#0EA5E9',
+    sky400: '#38BDF8',
+    indigo500: '#6366F1',
+    purple500: '#8B5CF6',
+    purple400: '#A78BFA',
+    fuchsia500: '#D946EF',
+    emerald400: '#34D399',
+    amber400: '#FBBF24',
+    orange500: '#F97316',
+    red500: '#EF4444',
+    teal400: '#2DD4BF',
+    teal500: '#14B8A6',
+    lime500: '#84CC16',
+    yellow400: '#FACC15',
+    yellow500: '#EAB308',
+    slate800: '#1E293B',
+    slate850: '#0F172A',
+    // ─── Bundle / Extended Spectrum ───
+    reanimatedNavy: '#001A72',
+    expoViolet: '#5A29E4',
+    hermesPurple: '#5B44E0',
+    cyan500: '#06B6D4',
+    indigo400: '#818CF8',
+    indigo600Alt: '#4F46E5',
+    purple800: '#6B21A8',
+    purple900: '#581C87',
+    purple50: '#FAF5FF',
+    purple100: '#F3E8FF',
+    purple200: '#E9D5FF',
+    rose700: '#BE123C',
+    red600: '#DC2626',
+    red50: '#FFFBFB',
+    red100: '#FEE2E2',
+    amber100: '#FEF3C7',
+    amber200: '#FDE68A',
+    amber800Warm: '#B45309',
+    yellow200: '#FEF08A',
+    yellow800: '#854D0E',
+    green100: '#DCFCE7',
+    emerald100: '#D1FAE5',
+    emerald700: '#047857',
+    pink100: '#FCE7F3',
+    sky100: '#E0F2FE',
+    indigo50: '#EEF2FF',
+    gray100: '#F3F4F6',
+    gray200: '#E5E7EB',
+    gray500: '#6B7280',
+    gray600: '#4B5563',
     // ─── Tint Backgrounds / Borders (Theme-Aware) ───
     errorCardBg: '#FFF1F3',
     warnCardBg: '#FDFBF4',
@@ -194,6 +251,63 @@ const DarkColors = {
     googleRed: '#F87171',
     googlePurple: '#C084FC',
     googleTeal: '#2DD4BF',
+    // ─── NPM / Package / Tailwind Spectrum Helpers ───
+    npmRed: '#CB3837',
+    npmRedTint: '#CB383714',
+    npmRedBorder: '#CB383733',
+    npmDark: '#20232A',
+    reactCyan: '#61DAFB',
+    pink500: '#EC4899',
+    pink400: '#F472B6',
+    rose500: '#F43F5E',
+    sky500: '#0EA5E9',
+    sky400: '#38BDF8',
+    indigo500: '#6366F1',
+    purple500: '#8B5CF6',
+    purple400: '#A78BFA',
+    fuchsia500: '#D946EF',
+    emerald400: '#34D399',
+    amber400: '#FBBF24',
+    orange500: '#F97316',
+    red500: '#EF4444',
+    teal400: '#2DD4BF',
+    teal500: '#14B8A6',
+    lime500: '#84CC16',
+    yellow400: '#FACC15',
+    yellow500: '#EAB308',
+    slate800: '#1E293B',
+    slate850: '#0F172A',
+    // ─── Bundle / Extended Spectrum ───
+    reanimatedNavy: '#6B8CFF',
+    expoViolet: '#A78BFA',
+    hermesPurple: '#9B8AFF',
+    cyan500: '#22D3EE',
+    indigo400: '#A5B4FC',
+    indigo600Alt: '#818CF8',
+    purple800: '#C084FC',
+    purple900: '#A855F7',
+    purple50: '#2D1B40',
+    purple100: '#3B2252',
+    purple200: '#4C2D6B',
+    rose700: '#FB7185',
+    red600: '#F87171',
+    red50: '#34151B',
+    red100: '#451A1A',
+    amber100: '#422D0D',
+    amber200: '#5C3D0F',
+    amber800Warm: '#FBBF24',
+    yellow200: '#5C3D0F',
+    yellow800: '#FBBF24',
+    green100: '#122D1B',
+    emerald100: '#122D25',
+    emerald700: '#34D399',
+    pink100: '#341626',
+    sky100: '#0C2744',
+    indigo50: '#1E1B3A',
+    gray100: '#2A2438',
+    gray200: '#362C4E',
+    gray500: '#A197B8',
+    gray600: '#8F8A9E',
     errorCardBg: '#34151B',
     warnCardBg: '#342B16',
     blueTintBg: '#15243B',

package/dist/esm/components/AnalyticsDetail.js

@@ -9,7 +9,9 @@ import { AppFonts } from '../styles/AppFonts';
 import { getSize } from '../helpers';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
+import { useTranslation } from '../i18n';
 const AnalyticsDetail = ({ event, }) => {
+    const { t } = useTranslation();
     const [expandDepth, setExpandDepth] = useState(1);
     const [treeKey, setTreeKey] = useState(0);
     const params = event.params ?? {};
@@ -29,7 +31,7 @@ const AnalyticsDetail = ({ event, }) => {
     }
     else if (isArray) {
         typeLabel = 'array';
-        countLabel = `${jsonData.length} items`;
+        countLabel = `${jsonData.length} ${t('analytics.items')}`;
     }
     else if (isObject) {
         typeLabel = 'object';
@@ -69,7 +71,7 @@ const AnalyticsDetail = ({ event, }) => {
             fontSize: 12,
             color: AppColors.purple,
         }}>
-              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+              {expandDepth === 99 ? t('common.collapseAll') : t('common.expandAll')}
             </Text>
           </TouchableScale>
           <View style={{
@@ -106,7 +108,7 @@ const AnalyticsDetail = ({ event, }) => {
           </View>
         </View>
 
-        <CopyButton value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
+        <CopyButton value={JSON.stringify(jsonData, null, 2)} label={t('common.copyJson')}/>
       </View>
 
       {/* Direct JSON Viewer View */}

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { AnalyticsEventCardProps } from '../types';
-export declare function getEventColor(name: string): string;
 declare const AnalyticsEventCard: React.NamedExoticComponent<AnalyticsEventCardProps>;
 export default AnalyticsEventCard;