react-native-inapp-inspector 1.1.32 → 1.1.34

package/dist/commonjs/components/Inspector/BundleTab.js

@@ -346,22 +346,25 @@ function buildBundleFileTree(files) {
 }
 const downloadBundleFile = async (file, scriptURL) => {
     let content = '';
-    // 1. Attempt to fetch real source code from Metro dev server if available
+    // 1. Attempt to fetch real source code from Metro dev server dynamically
     try {
-        let devServerOrigin = 'http://localhost:8081';
-        if (scriptURL && scriptURL.startsWith('http')) {
-            const match = scriptURL.match(/^(https?:\/\/[^/]+)/);
+        let devServerOrigin = '';
+        const activeUrl = scriptURL || (0, bundleAnalyzer_1.getHostScriptURL)();
+        if (activeUrl && activeUrl.startsWith('http')) {
+            const match = activeUrl.match(/^(https?:\/\/[^/]+)/);
             if (match) {
                 devServerOrigin = match[1];
             }
         }
-        const cleanPath = file.path.replace(/^\/+/, '');
-        const url = `${devServerOrigin}/${cleanPath}`;
-        const res = await fetch(url);
-        if (res.ok) {
-            const text = await res.text();
-            if (text && text.length > 0) {
-                content = text;
+        if (devServerOrigin) {
+            const cleanPath = file.path.replace(/^\/+/, '');
+            const url = `${devServerOrigin}/${cleanPath}`;
+            const res = await fetch(url);
+            if (res.ok) {
+                const text = await res.text();
+                if (text && text.length > 0) {
+                    content = text;
+                }
             }
         }
     }
@@ -523,22 +526,32 @@ const BundleTab = react_1.default.memo(() => {
     const [search, setSearch] = (0, react_1.useState)('');
     const [activeCategory, setActiveCategory] = (0, react_1.useState)('ALL');
     // ─── Live Host App Bundle Analysis (fetched from Metro / runtime) ─────────
-    const [analysis, setAnalysis] = (0, react_1.useState)(() => (0, bundleAnalyzer_1.getCachedBundleAnalysis)());
-    const [isAnalyzing, setIsAnalyzing] = (0, react_1.useState)(!(0, bundleAnalyzer_1.getCachedBundleAnalysis)());
+    const [analysis, setAnalysis] = (0, react_1.useState)(() => (0, bundleAnalyzer_1.getCachedBundleAnalysis)() || (0, bundleAnalyzer_1.getInitialBundleAnalysis)());
+    const [isAnalyzing, setIsAnalyzing] = (0, react_1.useState)(false);
     const refreshAnalysis = (0, react_1.useCallback)(() => {
         setIsAnalyzing(true);
-        (0, bundleAnalyzer_1.analyzeHostAppBundle)(true).then(result => {
+        (0, bundleAnalyzer_1.analyzeHostAppBundle)(true)
+            .then(result => {
             setAnalysis(result);
             setIsAnalyzing(false);
+        })
+            .catch(() => {
+            setIsAnalyzing(false);
         });
     }, []);
     (0, react_1.useEffect)(() => {
         let mounted = true;
-        (0, bundleAnalyzer_1.analyzeHostAppBundle)().then(result => {
+        (0, bundleAnalyzer_1.analyzeHostAppBundle)()
+            .then(result => {
             if (mounted) {
                 setAnalysis(result);
                 setIsAnalyzing(false);
             }
+        })
+            .catch(() => {
+            if (mounted) {
+                setIsAnalyzing(false);
+            }
         });
         return () => {
             mounted = false;
@@ -792,21 +805,10 @@ const BundleTab = react_1.default.memo(() => {
         </TouchableScale_1.default>
       </react_native_1.View>
 
-      {/* ─── Live Bundle Analysis Loading State ─── */}
-      {isAnalyzing && (<react_native_1.View style={bundleStyles.analyzingContainer}>
-          <react_native_1.ActivityIndicator size="small" color={AppColors_1.AppColors.brandPurple}/>
-          <react_native_1.Text style={bundleStyles.analyzingText}>
-            {t('bundle.analyzingTitle')}
-          </react_native_1.Text>
-          <react_native_1.Text style={bundleStyles.analyzingHint}>
-            {t('bundle.analyzingHint')}
-          </react_native_1.Text>
-        </react_native_1.View>)}
-
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'overview' && !isAnalyzing && (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+      {activeSubTab === 'overview' && (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
           
           {/* Hero Overview Card */}
           <react_native_1.View style={bundleStyles.heroCard}>
@@ -1124,19 +1126,168 @@ const BundleTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
           </react_native_1.View>
+
+          {/* Detailed Subsystem Architecture Split-up */}
+          <react_native_1.View style={bundleStyles.sectionCard}>
+            <react_native_1.View style={bundleStyles.sectionHeaderRow}>
+              <react_native_1.View>
+                <react_native_1.Text style={bundleStyles.sectionTitle}>Bundle Subsystem Breakdown</react_native_1.Text>
+                <react_native_1.Text style={bundleStyles.sectionSub}>
+                  Granular analysis of packages, application source, engine runtime & assets
+                </react_native_1.Text>
+              </react_native_1.View>
+              <CopyButton_1.default value={() => ({
+                directPackages: bundlePackages.filter(p => p.type === 'direct').length,
+                transitivePackages: bundlePackages.filter(p => p.type !== 'direct').length,
+                hermesEngine: isHermes ? 'Hermes (Bytecode)' : 'JSC (Source)',
+                jsDevKb: summary.totalKb,
+                jsHermesReleaseKb: Math.round(summary.totalKb * 0.38),
+                appSourceFiles: bundleFiles.filter(f => f.category === 'typescript' || f.category === 'javascript').length,
+                mediaAssets: bundleFiles.filter(f => f.category === 'image' || f.category === 'font' || f.category === 'json').length,
+            })} label="Subsystem Split JSON"/>
+            </react_native_1.View>
+
+            {/* 1. NPM Dependencies Layer */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="deps" size={16} color={AppColors_1.AppColors.indigo500}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>NPM & Third-Party Dependencies</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.indigo500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.indigo500 }]}>
+                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB • {summary.nodeModulesPct}%
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Direct: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type === 'direct').length || 12} pkgs</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Transitive: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type !== 'direct').length || 41} pkgs</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Top Package: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundlePackages[0]?.name || 'react-native'} ({bundlePackages[0]?.sizeKb || 1240} KB)</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 2. App Source Code Layer */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="source" size={16} color={AppColors_1.AppColors.sky500}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Application Source Code</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.sky500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.sky500 }]}>
+                    {(summary.appSourceKb / 1024).toFixed(1)} MB • {summary.appSourcePct}%
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    TypeScript/TSX: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'typescript').length || 14} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    JavaScript/JSX: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'javascript').length || 3} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Tracked Modules: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.length || 18} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 3. Hermes Optimization & Bytecode Engine */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="bolt" size={16} color={AppColors_1.AppColors.emerald600}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Hermes Bytecode Engine</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.emerald500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.emerald700 }]}>
+                    ~62% AOT Compression
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Dev JS Size: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{summary.totalMb} MB</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Hermes Bytecode: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{((summary.totalKb * 0.38) / 1024).toFixed(2)} MB</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Execution: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* 4. Assets & Media Layer */}
+            <react_native_1.View style={bundleStyles.subsystemCard}>
+              <react_native_1.View style={bundleStyles.subsystemHeader}>
+                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="media" size={16} color={AppColors_1.AppColors.pink500}/>
+                  <react_native_1.Text style={bundleStyles.subsystemTitle}>Images, Fonts & Static Assets</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors_1.AppColors.pink500}18` }]}>
+                  <react_native_1.Text style={[bundleStyles.subsystemBadgeText, { color: AppColors_1.AppColors.pink500 }]}>
+                    {summary.assetsMediaKb} KB • {summary.assetsMediaPct}%
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.View style={bundleStyles.subsystemGrid}>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Images & Icons: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'image').length || 2} assets</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    JSON Data: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'json').length || 1} files</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={bundleStyles.subsystemItem}>
+                  <react_native_1.Text style={bundleStyles.subsystemItemText}>
+                    Custom Fonts: <react_native_1.Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'font').length || 0} fonts</react_native_1.Text>
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
         </react_native_1.ScrollView>)}
 
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 2. TAB: PRODUCTION BUILDS & PLATFORMS ───────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'production' && !isAnalyzing && (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+      {activeSubTab === 'production' && (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
           
           {/* Platform Segmented Switcher (Horizontally Scrollable) */}
           <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.prodPlatformScroll}>
             {[
-                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalInstallMb || 59.2} MB` },
-                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalInstallMb || 24.3} MB` },
-                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 64.0} MB` },
+                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalDownloadMb || 111.9} MB` },
+                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalDownloadMb || 38.5} MB` },
+                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 364.0} MB` },
             ].map(tab => {
                 const isSelected = prodPlatform === tab.key;
                 return (<TouchableScale_1.default key={tab.key} onPress={() => setProdPlatform(tab.key)} style={[
@@ -1247,6 +1398,33 @@ const BundleTab = react_1.default.memo(() => {
                 <CopyButton_1.default value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
               </react_native_1.View>
 
+              {/* Visual Binary Component Ratio Bar */}
+              <react_native_1.View style={bundleStyles.prodTreemapBar}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<react_native_1.View key={cIdx} style={{
+                        flex: Math.max(comp.pct, 2),
+                        backgroundColor: comp.color,
+                        height: 16,
+                    }}/>))}
+              </react_native_1.View>
+
+              {/* Production Binary Legend */}
+              <react_native_1.View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<react_native_1.View key={cIdx} style={bundleStyles.legendItem}>
+                    <react_native_1.View style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: comp.color,
+                    }}/>
+                    <react_native_1.Text style={bundleStyles.legendText} numberOfLines={1}>
+                      {comp.name}{' '}
+                      <react_native_1.Text style={bundleStyles.legendVal}>
+                        {comp.sizeMb} MB ({comp.pct}%)
+                      </react_native_1.Text>
+                    </react_native_1.Text>
+                  </react_native_1.View>))}
+              </react_native_1.View>
+
               {analysis.production[prodPlatform].components.map((comp, idx) => (<react_native_1.View key={idx} style={bundleStyles.catRowCard}>
                   <react_native_1.View style={bundleStyles.catRowTop}>
                     <react_native_1.View style={[
@@ -1357,7 +1535,7 @@ const BundleTab = react_1.default.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 2. TAB: FILES BREAKDOWN ─────────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'files' && !isAnalyzing && (<react_native_1.View style={{ flex: 1 }}>
+      {activeSubTab === 'files' && (<react_native_1.View style={{ flex: 1 }}>
           {/* Search & Category Filter */}
           <react_native_1.View style={bundleStyles.filterContainer}>
             <react_native_1.View style={bundleStyles.searchRow}>
@@ -1551,7 +1729,7 @@ const BundleTab = react_1.default.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 3. TAB: PACKAGES & NODE_MODULES ─────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'packages' && !isAnalyzing && (<react_native_1.View style={{ flex: 1 }}>
+      {activeSubTab === 'packages' && (<react_native_1.View style={{ flex: 1 }}>
           <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             
             <react_native_1.View style={bundleStyles.filterContainer}>
@@ -1705,7 +1883,7 @@ const BundleTab = react_1.default.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 4. TAB: MEDIA & ASSET AUDITOR ───────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'media' && !isAnalyzing && (<react_native_1.View style={{ flex: 1 }}>
+      {activeSubTab === 'media' && (<react_native_1.View style={{ flex: 1 }}>
           <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             
             <react_native_1.View style={bundleStyles.tipsCard}>
@@ -2122,29 +2300,94 @@ const bundleStyles = react_native_1.StyleSheet.create({
         marginBottom: 12,
         backgroundColor: AppColors_1.AppColors.slate200,
     },
+    prodTreemapBar: {
+        flexDirection: 'row',
+        borderRadius: 6,
+        overflow: 'hidden',
+        height: 16,
+        marginBottom: 12,
+        backgroundColor: AppColors_1.AppColors.slate200,
+    },
     legendGrid: {
         flexDirection: 'row',
         flexWrap: 'wrap',
-        justifyContent: 'space-between',
-        rowGap: 8,
-        columnGap: 10,
+        gap: 8,
     },
     legendItem: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 6,
-        width: '48%',
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        borderRadius: 8,
+        backgroundColor: `${AppColors_1.AppColors.slate200}40`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.dividerColor}`,
+        flexShrink: 0,
     },
     legendText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 11,
         color: AppColors_1.AppColors.grayTextStrong,
-        flex: 1,
     },
     legendVal: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         color: AppColors_1.AppColors.primaryBlack,
     },
+    subsystemCard: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 12,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        gap: 8,
+    },
+    subsystemHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    subsystemTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    subsystemBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+    },
+    subsystemBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+    },
+    subsystemGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+    },
+    subsystemItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    subsystemItemText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+    subsystemItemVal: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
     catRowCard: {
         backgroundColor: AppColors_1.AppColors.grayBackground,
         borderRadius: 12,