react-native-inapp-inspector 2.0.3 → 2.0.5

package/dist/esm/components/Inspector/NetworkTab.js

@@ -89,11 +89,105 @@ const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, })
     </TouchableScale>);
 });
 const NetworkTab = React.memo(() => {
-    const { groupedData, search, setSearch, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
+    const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
     const filtersAccordion = useAccordion(false, 300, 260);
     const apisListRef = useRef(null);
     const [isSearchFocused, setIsSearchFocused] = React.useState(false);
+    const quickCounts = useMemo(() => {
+        let errorCount = 0;
+        let successCount = 0;
+        let slowCount = 0;
+        let postCount = 0;
+        let getCount = 0;
+        let gqlCount = 0;
+        logs.forEach(l => {
+            const s = typeof l.status === 'number'
+                ? l.status
+                : parseInt(String(l.status), 10);
+            if (l.status === 0 || l.status == null || (!isNaN(s) && s >= 400)) {
+                errorCount++;
+            }
+            else if (!isNaN(s) && s >= 200 && s < 400) {
+                successCount++;
+            }
+            if ((l.duration || 0) >= 500) {
+                slowCount++;
+            }
+            const m = (l.method || '').toUpperCase();
+            if (m === 'POST')
+                postCount++;
+            if (m === 'GET')
+                getCount++;
+            const u = (l.url || '').toLowerCase();
+            const c = (l.client || '').toLowerCase();
+            if (u.includes('graphql') ||
+                c.includes('graphql') ||
+                c.includes('apollo')) {
+                gqlCount++;
+            }
+        });
+        return {
+            all: logs.length,
+            errors: errorCount,
+            success: successCount,
+            slow: slowCount,
+            post: postCount,
+            get: getCount,
+            graphql: gqlCount,
+        };
+    }, [logs]);
+    const QUICK_CHIPS = useMemo(() => [
+        {
+            id: 'all',
+            label: 'All',
+            count: quickCounts.all,
+            color: AppColors.purple,
+        },
+        {
+            id: 'errors',
+            label: 'Errors',
+            count: quickCounts.errors,
+            color: AppColors.errorColor,
+        },
+        {
+            id: 'success',
+            label: '2xx OK',
+            count: quickCounts.success,
+            color: AppColors.greenColor,
+        },
+        {
+            id: 'slow',
+            label: 'Slow >500ms',
+            count: quickCounts.slow,
+            color: AppColors.warningIconGold,
+        },
+        {
+            id: 'POST',
+            label: 'POST',
+            count: quickCounts.post,
+            color: METHOD_COLORS.POST || '#3B82F6',
+        },
+        {
+            id: 'GET',
+            label: 'GET',
+            count: quickCounts.get,
+            color: METHOD_COLORS.GET || '#10B981',
+        },
+        {
+            id: 'graphql',
+            label: 'GraphQL',
+            count: quickCounts.graphql,
+            color: '#E10098',
+        },
+    ], [quickCounts]);
+    const SEARCH_SCOPES = [
+        { id: 'all', label: 'All' },
+        { id: 'url', label: 'URL / Path' },
+        { id: 'reqBody', label: 'Payload' },
+        { id: 'resBody', label: 'Response' },
+        { id: 'headers', label: 'Headers' },
+    ];
     const QUICK_API_QUERY_TAGS = useMemo(() => [
         { label: '⚠️ Failed', query: 'is:error' },
         { label: '🐢 Slow >1s', query: 'slow:>1s' },
@@ -239,6 +333,7 @@ const NetworkTab = React.memo(() => {
                 </View>
               </View>)}
 
+            {/* Toolbar Row with Search & Actions */}
             <View style={styles.toolbarRow}>
               <View style={[
                 styles.searchContainer,
@@ -247,8 +342,65 @@ const NetworkTab = React.memo(() => {
                     borderWidth: 1.5,
                 },
             ]}>
-                <SearchIcon color={isSearchFocused ? AppColors.purple : AppColors.grayTextWeak} size={16}/>
+                <SearchIcon color={isSearchFocused
+                ? AppColors.purple
+                : AppColors.grayTextWeak} size={15}/>
                 <TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+
+                {/* Match Case (Aa) & Regex (.*) Quick Toggles */}
+                <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3,
+                marginRight: 2,
+            }}>
+                  <Pressable hitSlop={8} onPress={() => setIsCaseSensitive(prev => !prev)} style={{
+                paddingHorizontal: 4.5,
+                paddingVertical: 2,
+                borderRadius: 4,
+                backgroundColor: isCaseSensitive
+                    ? AppColors.purple
+                    : 'transparent',
+                borderWidth: 1,
+                borderColor: isCaseSensitive
+                    ? AppColors.purple
+                    : `${AppColors.grayBorderSecondary}`,
+            }}>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 9.5,
+                color: isCaseSensitive
+                    ? AppColors.white
+                    : AppColors.grayTextWeak,
+            }}>
+                      Aa
+                    </Text>
+                  </Pressable>
+
+                  <Pressable hitSlop={8} onPress={() => setIsRegexSearch(prev => !prev)} style={{
+                paddingHorizontal: 4.5,
+                paddingVertical: 2,
+                borderRadius: 4,
+                backgroundColor: isRegexSearch
+                    ? AppColors.purple
+                    : 'transparent',
+                borderWidth: 1,
+                borderColor: isRegexSearch
+                    ? AppColors.purple
+                    : `${AppColors.grayBorderSecondary}`,
+            }}>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 9.5,
+                color: isRegexSearch
+                    ? AppColors.white
+                    : AppColors.grayTextWeak,
+            }}>
+                      .*
+                    </Text>
+                  </Pressable>
+                </View>
+
                 {search.length > 0 && (<View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
@@ -257,19 +409,19 @@ const NetworkTab = React.memo(() => {
                     <View style={{
                     backgroundColor: `${AppColors.purple}20`,
                     borderRadius: 10,
-                    paddingHorizontal: 6,
-                    paddingVertical: 2,
+                    paddingHorizontal: 5,
+                    paddingVertical: 1.5,
                 }}>
                       <Text style={{
                     color: AppColors.purple,
-                    fontSize: 10,
+                    fontSize: 9.5,
                     fontFamily: AppFonts.interBold,
                 }}>
                         {filteredLogs.length}
                       </Text>
                     </View>
                     <Pressable onPress={() => setSearch('')} hitSlop={10} style={styles.clearBtn}>
-                      <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                      <ClearIcon color={AppColors.grayTextWeak} size={13}/>
                     </Pressable>
                   </View>)}
               </View>
@@ -318,12 +470,124 @@ const NetworkTab = React.memo(() => {
               </View>
             </View>
 
+            {/* Quick Filter Horizontal Chips Bar with Live Counts */}
+            <View style={{ marginBottom: 8 }}>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                paddingHorizontal: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+                {QUICK_CHIPS.map(chip => {
+                const isActive = quickFilter === chip.id;
+                const chipColor = chip.color || AppColors.purple;
+                return (<TouchableScale key={chip.id} onPress={() => {
+                        setQuickFilter(isActive ? 'all' : chip.id);
+                    }}>
+                      <View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingHorizontal: 9,
+                        paddingVertical: 4.5,
+                        borderRadius: 8,
+                        backgroundColor: isActive
+                            ? chipColor
+                            : `${chipColor}12`,
+                        borderWidth: 1,
+                        borderColor: isActive
+                            ? chipColor
+                            : `${chipColor}30`,
+                        gap: 5,
+                    }}>
+                        <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10.5,
+                        color: isActive
+                            ? AppColors.white
+                            : AppColors.primaryBlack,
+                    }}>
+                          {chip.label}
+                        </Text>
+                        <View style={{
+                        backgroundColor: isActive
+                            ? 'rgba(255,255,255,0.25)'
+                            : `${chipColor}20`,
+                        paddingHorizontal: 5,
+                        paddingVertical: 1,
+                        borderRadius: 8,
+                    }}>
+                          <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9,
+                        color: isActive ? AppColors.white : chipColor,
+                    }}>
+                            {chip.count}
+                          </Text>
+                        </View>
+                      </View>
+                    </TouchableScale>);
+            })}
+              </ScrollView>
+            </View>
+
+            {/* Search Scope Selector Bar (Visible on search or focus) */}
+            {(isSearchFocused || search.length > 0) && (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingHorizontal: 12,
+                    marginBottom: 6,
+                    gap: 6,
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors.grayTextWeak,
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.5,
+                }}>
+                  Scope:
+                </Text>
+                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                  {SEARCH_SCOPES.map(s => {
+                    const isSelected = searchScope === s.id;
+                    return (<TouchableScale key={s.id} onPress={() => setSearchScope(s.id)}>
+                        <View style={{
+                            paddingHorizontal: 7,
+                            paddingVertical: 2.5,
+                            borderRadius: 5,
+                            backgroundColor: isSelected
+                                ? AppColors.purple
+                                : `${AppColors.grayBorderSecondary}40`,
+                            borderWidth: 1,
+                            borderColor: isSelected
+                                ? AppColors.purple
+                                : AppColors.grayBorderSecondary,
+                        }}>
+                          <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: isSelected
+                                ? AppColors.white
+                                : AppColors.grayText,
+                        }}>
+                            {s.label}
+                          </Text>
+                        </View>
+                      </TouchableScale>);
+                })}
+                </ScrollView>
+              </View>)}
+
             {/* Advanced Search Quick Query Suggestions Bar */}
-            {(isSearchFocused || search.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
+            {(isSearchFocused || search.length > 0) && (<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 8, maxHeight: 28 }} contentContainerStyle={{
                     paddingHorizontal: 12,
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 6,
+                    gap: 5,
                 }}>
                 {QUICK_API_QUERY_TAGS.map(item => {
                     const isSelected = search.includes(item.query);
@@ -336,9 +600,9 @@ const NetworkTab = React.memo(() => {
                             }
                         }}>
                       <View style={{
-                            paddingHorizontal: 8,
-                            paddingVertical: 3.5,
-                            borderRadius: 6,
+                            paddingHorizontal: 7,
+                            paddingVertical: 2.5,
+                            borderRadius: 5,
                             backgroundColor: isSelected
                                 ? AppColors.purple
                                 : `${AppColors.purple}14`,
@@ -349,7 +613,7 @@ const NetworkTab = React.memo(() => {
                         }}>
                         <Text style={{
                             fontFamily: AppFonts.interBold,
-                            fontSize: 10,
+                            fontSize: 9.5,
                             color: isSelected
                                 ? AppColors.white
                                 : AppColors.purple,
@@ -361,6 +625,47 @@ const NetworkTab = React.memo(() => {
                 })}
               </ScrollView>)}
 
+            {/* Active Filter Helper Status Bar */}
+            {(quickFilter !== 'all' ||
+                search.trim().length > 0 ||
+                statusFilters.size > 0 ||
+                methodFilters.size > 0 ||
+                filteredLogs.length !== logs.length) && (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginHorizontal: 12,
+                    marginBottom: 8,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5.5,
+                    backgroundColor: `${AppColors.purple}10`,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: `${AppColors.purple}25`,
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 10.5,
+                    color: AppColors.purple,
+                }}>
+                  Showing {filteredLogs.length} of {logs.length} requests
+                </Text>
+                <TouchableScale onPress={() => {
+                    setSearch('');
+                    setQuickFilter('all');
+                    setStatusFilters(new Set());
+                    setMethodFilters(new Set());
+                }}>
+                  <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors.errorColor,
+                }}>
+                    Clear All Filters
+                  </Text>
+                </TouchableScale>
+              </View>)}
+
             <Animated.View style={[
                 filtersAccordion.bodyStyle,
                 { overflow: 'hidden' },

package/dist/esm/components/Inspector/NpmUpdateToast.js

@@ -4,20 +4,30 @@ import Svg, { Path } from 'react-native-svg';
 import { useInspector } from './InspectorContext';
 import { LIB_VERSION } from '../../constants';
 import { NpmIcon } from '../NetworkIcons';
+import { copyToClipboard } from '../../helpers';
+import { showToast } from '../../helpers/toast';
 const CloseSvg = ({ size = 13, color = '#94A3B8' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
-const ExternalLinkSvg = ({ size = 12, color = '#FFFFFF' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+const CopySvg = ({ size = 11, color = '#94A3B8' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const CheckSvg = ({ size = 11, color = '#10B981' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+const ExternalLinkSvg = ({ size = 11, color = '#FFFFFF' }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     <Path d="M15 3h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     <Path d="M10 14L21 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
-const TOAST_TIMEOUT_MS = 6500;
+const TOAST_TIMEOUT_MS = 7000;
 export const NpmUpdateToast = () => {
     const { updateAvailable, latestNpmVersion, showUpdateToast } = useInspector();
     const [dismissed, setDismissed] = useState(false);
     const [visible, setVisible] = useState(false);
-    const translateYAnim = useRef(new Animated.Value(50)).current;
+    const [copied, setCopied] = useState(false);
+    const translateYAnim = useRef(new Animated.Value(60)).current;
     const opacityAnim = useRef(new Animated.Value(0)).current;
     const progressAnim = useRef(new Animated.Value(1)).current;
     const timerRef = useRef(null);
@@ -60,12 +70,12 @@ export const NpmUpdateToast = () => {
         Animated.parallel([
             Animated.timing(opacityAnim, {
                 toValue: 0,
-                duration: 200,
+                duration: 180,
                 useNativeDriver: true,
             }),
             Animated.timing(translateYAnim, {
-                toValue: 50,
-                duration: 200,
+                toValue: 60,
+                duration: 180,
                 useNativeDriver: true,
             }),
         ]).start(() => {
@@ -73,6 +83,14 @@ export const NpmUpdateToast = () => {
             setDismissed(true);
         });
     };
+    const handleCopyCommand = () => {
+        copyToClipboard('npm install react-native-inapp-inspector@latest', 'Install Command');
+        setCopied(true);
+        showToast('Copied npm install command!');
+        setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+    };
     const handleOpenNpm = () => {
         Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
         handleDismiss();
@@ -93,7 +111,7 @@ export const NpmUpdateToast = () => {
       <View style={styles.contentRow}>
         {/* Left NPM Badge Icon */}
         <View style={styles.npmIconContainer}>
-          <NpmIcon size={14} color="#CB3837"/>
+          <NpmIcon size={15} color="#CB3837"/>
         </View>
 
         {/* Text Details */}
@@ -109,6 +127,14 @@ export const NpmUpdateToast = () => {
           </Text>
         </View>
 
+        {/* Copy command quick button */}
+        <TouchableOpacity style={styles.copyButton} onPress={handleCopyCommand} hitSlop={6} activeOpacity={0.75}>
+          {copied ? <CheckSvg size={11} color="#10B981"/> : <CopySvg size={11} color="#94A3B8"/>}
+          <Text style={[styles.copyButtonText, copied && { color: '#10B981' }]}>
+            {copied ? 'Copied' : 'Copy'}
+          </Text>
+        </TouchableOpacity>
+
         {/* Action Button: View */}
         <TouchableOpacity style={styles.actionButton} onPress={handleOpenNpm} activeOpacity={0.8}>
           <Text style={styles.actionButtonText}>View</Text>
@@ -140,37 +166,42 @@ const styles = StyleSheet.create({
     container: {
         position: 'absolute',
         bottom: 24,
-        left: 16,
-        right: 16,
+        left: 14,
+        right: 14,
         backgroundColor: '#0F172A',
         borderRadius: 16,
         borderWidth: 1,
         borderColor: '#334155',
         shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 10 },
-        shadowOpacity: 0.35,
-        shadowRadius: 20,
-        elevation: 20,
+        shadowOffset: { width: 0, height: 12 },
+        shadowOpacity: 0.4,
+        shadowRadius: 24,
+        elevation: 24,
         overflow: 'hidden',
         zIndex: 99999,
     },
     contentRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 14,
-        gap: 10,
+        paddingVertical: 11,
+        paddingHorizontal: 12,
+        gap: 8,
     },
     npmIconContainer: {
         width: 32,
         height: 32,
-        borderRadius: 10,
+        borderRadius: 9,
         backgroundColor: '#FFFFFF',
         justifyContent: 'center',
         alignItems: 'center',
         borderWidth: 1,
-        borderColor: '#CBD5E1',
+        borderColor: '#E2E8F0',
         flexShrink: 0,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.15,
+        shadowRadius: 2,
+        elevation: 2,
     },
     textContainer: {
         flex: 1,
@@ -179,73 +210,91 @@ const styles = StyleSheet.create({
     titleRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 6,
+        gap: 5,
     },
     titleText: {
-        fontSize: 13,
+        fontSize: 12.5,
         fontWeight: '700',
         color: '#F8FAFC',
         letterSpacing: -0.2,
         ...fontStack,
     },
     versionPill: {
-        backgroundColor: '#7C3AED26',
-        paddingHorizontal: 6,
+        backgroundColor: '#7C3AED33',
+        paddingHorizontal: 5.5,
         paddingVertical: 1.5,
-        borderRadius: 6,
+        borderRadius: 5,
         borderWidth: 1,
-        borderColor: '#7C3AED59',
+        borderColor: '#8B5CF680',
     },
     versionPillText: {
-        fontSize: 10.5,
+        fontSize: 10,
         fontWeight: '700',
-        color: '#A78BFA',
+        color: '#C4B5FD',
         ...fontStack,
     },
     subtitleText: {
-        fontSize: 11,
+        fontSize: 10.5,
+        color: '#94A3B8',
+        marginTop: 1,
+        ...fontStack,
+    },
+    copyButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3.5,
+        backgroundColor: '#1E293B',
+        paddingVertical: 5.5,
+        paddingHorizontal: 8,
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: '#334155',
+        flexShrink: 0,
+    },
+    copyButtonText: {
+        fontSize: 10.5,
+        fontWeight: '600',
         color: '#94A3B8',
-        marginTop: 1.5,
         ...fontStack,
     },
     actionButton: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 4,
+        gap: 3.5,
         backgroundColor: '#7C3AED',
-        paddingVertical: 6,
-        paddingHorizontal: 10,
-        borderRadius: 8,
+        paddingVertical: 5.5,
+        paddingHorizontal: 9,
+        borderRadius: 7,
         flexShrink: 0,
         shadowColor: '#7C3AED',
         shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.3,
+        shadowOpacity: 0.35,
         shadowRadius: 4,
         elevation: 3,
     },
     actionButtonText: {
-        fontSize: 11.5,
+        fontSize: 11,
         fontWeight: '700',
         color: '#FFFFFF',
         ...fontStack,
     },
     closeButton: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
+        width: 22,
+        height: 22,
+        borderRadius: 11,
         backgroundColor: '#1E293B',
         justifyContent: 'center',
         alignItems: 'center',
         flexShrink: 0,
     },
     progressBarTrack: {
-        height: 3,
+        height: 2.5,
         width: '100%',
         backgroundColor: '#1E293B',
     },
     progressBarFill: {
         height: '100%',
-        backgroundColor: '#7C3AED',
+        backgroundColor: '#8B5CF6',
     },
 });
 export default NpmUpdateToast;