react-native-inapp-inspector 2.3.15 → 2.3.17

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

@@ -8,12 +8,12 @@ export const SkeletonPlaceholder = React.memo(function SkeletonPlaceholder({ car
             Animated.timing(shimmerAnim, {
                 toValue: 0.85,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(shimmerAnim, {
                 toValue: 0.35,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         animation.start();

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { View, Text, ScrollView, FlatList, TextInput, Modal, Alert, StyleSheet, ActivityIndicator, Platform, } from 'react-native';
 import TouchableScale from '../TouchableScale';
-import globalStyles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
@@ -397,28 +396,6 @@ export const StorageTab = React.memo(() => {
                     </Text>
                   </TouchableScale>)}
               </View>} ListFooterComponent={<View style={{ height: 60 }}/>}/>
-
-          <TouchableScale onPress={() => {
-                try {
-                    listRef.current?.scrollToOffset({
-                        offset: 0,
-                        animated: true,
-                    });
-                }
-                catch {
-                    try {
-                        listRef.current?.scrollToIndex({
-                            index: 0,
-                            animated: true,
-                        });
-                    }
-                    catch { }
-                }
-            }} hitSlop={12} style={globalStyles.scrollTopBtn}>
-            <View style={{ transform: [{ rotate: '180deg' }] }}>
-              <ChevronIcon color={AppColors.white} size={18}/>
-            </View>
-          </TouchableScale>
         </>)}
 
       
@@ -713,7 +690,7 @@ const styles = StyleSheet.create({
         borderColor: `${AppColors.grayBorderSecondary}80`,
     },
     valuePreviewText: {
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         fontSize: 11,
         color: AppColors.primaryBlack,
         lineHeight: 16,
@@ -778,7 +755,7 @@ const styles = StyleSheet.create({
         color: AppColors.purple,
     },
     connectGuideCode: {
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         fontSize: 10,
         color: AppColors.grayText,
         lineHeight: 15,
@@ -843,7 +820,7 @@ const styles = StyleSheet.create({
     textAreaInput: {
         minHeight: 90,
         maxHeight: 160,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         fontSize: 11,
     },
     typeSelectorStrip: {

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Animated, Platform, ScrollView, Text, View, } from 'react-native';
+import { Platform, ScrollView, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
+import { AppFonts } from '../../styles/AppFonts';
 import TouchableScale from '../TouchableScale';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
@@ -16,60 +17,70 @@ const TabBar = React.memo(() => {
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
             {
+                id: 1,
                 key: 'apis',
                 label: 'APIs',
                 count: logs.length,
                 icon: 'apis',
             },
             {
+                id: 2,
                 key: 'logs',
                 label: 'Logs',
                 count: consoleLogs.length,
                 icon: 'logs',
             },
             {
+                id: 3,
                 key: 'analytics',
                 label: 'Analytics',
                 count: analyticsEvents.length,
                 icon: 'analytics',
             },
             {
+                id: 4,
                 key: 'redux',
                 label: 'Redux',
                 count: 0,
                 icon: 'redux',
             },
             {
-                key: 'bundle',
-                label: 'Bundle',
+                id: 5,
+                key: 'storage',
+                label: 'Storage',
                 count: 0,
-                icon: 'bundle',
+                icon: 'storage',
             },
             {
-                key: 'performance',
-                label: 'Performance',
+                id: 6,
+                key: 'device',
+                label: 'Device',
                 count: 0,
-                icon: 'performance',
+                icon: 'device',
             },
             {
+                id: 7,
                 key: 'crash',
                 label: 'Crash',
                 count: crashRecords?.length || 0,
                 icon: 'crash',
             },
             {
-                key: 'device',
-                label: 'Device',
+                id: 8,
+                key: 'bundle',
+                label: 'Bundle',
                 count: 0,
-                icon: 'device',
+                icon: 'bundle',
             },
             {
-                key: 'storage',
-                label: 'Storage',
+                id: 9,
+                key: 'performance',
+                label: 'Performance',
                 count: 0,
-                icon: 'storage',
+                icon: 'performance',
             },
             {
+                id: 10,
                 key: 'debugging',
                 label: 'Debugging',
                 count: 0,
@@ -98,10 +109,8 @@ const TabBar = React.memo(() => {
                     ? AppColors.errorColor
                     : AppColors.grayText;
             const countLabel = tab.count > 9 ? '9+' : String(tab.count);
-            const hasUnreadApis = activeTab !== 'apis' &&
-                logs.length > lastReadApisCount;
-            const hasUnreadLogs = activeTab !== 'logs' &&
-                consoleLogs.length > lastReadLogsCount;
+            const hasUnreadApis = activeTab !== 'apis' && logs.length > lastReadApisCount;
+            const hasUnreadLogs = activeTab !== 'logs' && consoleLogs.length > lastReadLogsCount;
             const hasUnreadCrashes = activeTab !== 'crash' &&
                 (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
             return (<TouchableScale key={tab.key} onPress={() => {
@@ -119,30 +128,51 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'logs' && (<TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'debugging' && (<QrCodeIcon color={iconColor} size={14}/>)}
+                  <View style={{
+                    minWidth: 20,
+                    height: 20,
+                    paddingHorizontal: 4,
+                    borderRadius: 10,
+                    backgroundColor: isActive
+                        ? `${AppColors.white}33`
+                        : `${AppColors.purple}1F`,
+                    borderWidth: 1,
+                    borderColor: isActive
+                        ? `${AppColors.white}66`
+                        : `${AppColors.purple}40`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9.5,
+                    lineHeight: 12,
+                    color: isActive ? AppColors.white : AppColors.purple,
+                }}>
+                      #{tab.id}
+                    </Text>
+                  </View>
                   <Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles.contentTabButtonText,
-                    isActive &&
-                        styles.contentTabButtonTextActive,
+                    isActive && styles.contentTabButtonTextActive,
                 ]}>
-                    {tab.label}{' '}
-                    {tab.count > 0 ? `(${countLabel})` : ''}
+                    {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
                   </Text>
                   {((tab.key === 'apis' && hasUnreadApis) ||
                     (tab.key === 'logs' && hasUnreadLogs) ||
-                    (tab.key === 'crash' && hasUnreadCrashes)) && (<Animated.View style={{
+                    (tab.key === 'crash' && hasUnreadCrashes)) && (<View style={{
                         width: 6,
                         height: 6,
                         borderRadius: 3,
                         backgroundColor: AppColors.errorColor,
                         marginLeft: 4,
                         alignSelf: 'center',
-                        transform: [{ scale: unreadPulseAnim }],
                     }}/>)}
                 </View>
               </TouchableScale>);

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Platform, Linking, } from 'react-native';
+import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Linking, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { BrandSquareIcon } from '../BrandSquareIcon';
 import { NpmIcon } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
+import { AppFonts } from '../../styles/AppFonts';
 const CopySvg = ({ size = 14, color = '#64748B' }) => (<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"/>
@@ -168,15 +169,9 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
       </View>
     </Modal>);
 };
-const fontStack = Platform.select({
-    ios: {
-        fontFamily: 'System',
-    },
-    android: {
-        fontFamily: 'sans-serif',
-    },
-    default: {},
-});
+const fontStack = {
+    fontFamily: AppFonts.interRegular,
+};
 const styles = StyleSheet.create({
     overlay: {
         flex: 1,
@@ -377,7 +372,7 @@ const styles = StyleSheet.create({
     commandText: {
         flex: 1,
         fontSize: 11,
-        fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         color: '#38BDF8',
     },
     copyIconWrapper: {

package/dist/esm/components/JsonViewer.js

@@ -168,25 +168,23 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1
                 {t('network.jsonViewer.emptyPayload')}
               </Text>
             </View>) : (wrap ? (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
-              </ScrollView>) : (<ScrollView style={scrollStyle} contentContainerStyle={{ flexGrow: 1 }}>
-                <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
-              </ScrollView>)) : (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
-                <View style={styles.codeBlock}>{tree}</View>
-              </ScrollView>) : (<ScrollView style={scrollStyle}>
-                <ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+                  <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
+                </ScrollView>) : (<View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>)) : (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
+                  <ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+                    <View style={styles.codeBlock}>{tree}</View>
+                  </ScrollView>
+                </ScrollView>) : (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
                   <View style={styles.codeBlock}>{tree}</View>
-                </ScrollView>
-              </ScrollView>))))}
+                </ScrollView>))))}
 
-        {mode === 'raw' && (<ScrollView style={scrollStyle} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true} nestedScrollEnabled={true}>
-            <HighlightText text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
+        {mode === 'raw' && (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true}>
+              <HighlightText text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
                 backgroundColor: AppColors.yellowHighlight,
                 color: AppColors.primaryBlack,
                 borderRadius: 3,
                 paddingHorizontal: 2,
             }}/>
-            {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
+              {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
                     marginTop: 10,
                     backgroundColor: `${AppColors.brandPurple}15`,
                     paddingVertical: 8,
@@ -196,21 +194,46 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1
                     borderWidth: 1,
                     borderColor: `${AppColors.brandPurple}30`,
                 }}>
-                <Text style={{
+                  <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 11,
                     color: AppColors.brandPurple,
                 }}>
-                  Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
-                </Text>
-              </TouchableOpacity>)}
-          </ScrollView>)}
+                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                  </Text>
+                </TouchableOpacity>)}
+            </ScrollView>) : (<View style={localStyles.rawContainer}>
+              <HighlightText text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
+                backgroundColor: AppColors.yellowHighlight,
+                color: AppColors.primaryBlack,
+                borderRadius: 3,
+                paddingHorizontal: 2,
+            }}/>
+              {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
+                    marginTop: 10,
+                    backgroundColor: `${AppColors.brandPurple}15`,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: `${AppColors.brandPurple}30`,
+                }}>
+                  <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors.brandPurple,
+                }}>
+                    Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                  </Text>
+                </TouchableOpacity>)}
+            </View>))}
 
-        {mode === 'table' && (fullHeight ? (<ScrollView style={scrollStyle}>
+        {mode === 'table' && (fullHeight ? (<ScrollView style={{ flex: 1 }}>
               {renderTableMode()}
-            </ScrollView>) : (<ScrollView style={scrollStyle}>
+            </ScrollView>) : (<View style={localStyles.tableView}>
               {renderTableMode()}
-            </ScrollView>))}
+            </View>))}
       </View>
     </View>);
 });

package/dist/esm/components/LogCard.js

@@ -63,7 +63,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             Animated.timing(shimmerOpacity, {
                 toValue: 0,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [isNew]);
@@ -321,10 +321,10 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             </View>)}
         </View>
 
-        <Animated.View pointerEvents="none" style={[
-            StyleSheet.absoluteFill,
-            { backgroundColor: methodColor, opacity: shimmerOpacity },
-        ]}/>
+        {isNew && (<Animated.View pointerEvents="none" style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: methodColor, opacity: shimmerOpacity },
+            ]}/>)}
       </TouchableScale>
     </View>);
 });

package/dist/esm/components/MetaAccordion.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from '../i18n';
-import { View, Pressable, Text, Animated } from 'react-native';
+import { View, Pressable, Text } from 'react-native';
 import { DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
 import useAccordion from '../customHooks/useAccordion';
 import { getDurationColor, handleOpenExternalLink } from '../helpers';
@@ -13,7 +13,7 @@ import styles from '../styles';
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
     const { t } = useTranslation();
     const [urlExpanded, setUrlExpanded] = useState(false);
-    const { toggleOpen, chevronStyle, bodyStyle } = useAccordion(true, 800, 390);
+    const { isOpen, toggleOpen, chevronStyle } = useAccordion(true);
     const isFailed = status === 0 || status == null;
     const renderFormattedUrl = (rawUrl) => {
         if (!rawUrl)
@@ -65,24 +65,23 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             contentType: contentType || 'application/json',
             url: url || '',
         }} label="Metadata"/>
-            <Animated.View style={chevronStyle}>
+            <View style={chevronStyle}>
               <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
-            </Animated.View>
+            </View>
           </View>
         </View>
       </Pressable>
 
-      <Animated.View style={bodyStyle}>
-        <View style={styles.metaBody}>
+      {isOpen && (<View style={styles.metaBody}>
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <CalendarIcon color={AppColors.grayTextWeak} size={14}/>
               <Text style={styles.metaLabel}>{t('network.triggeredAt')}</Text>
             </View>
             <Text style={[
-            styles.metaValue,
-            { color: AppColors.purple, fontSize: 12 },
-        ]}>
+                styles.metaValue,
+                { color: AppColors.purple, fontSize: 12 },
+            ]}>
               {triggeredAt}
             </Text>
           </View>
@@ -94,16 +93,16 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <Text style={styles.metaLabel}>{t('network.methodHeader')}</Text>
             </View>
             <View style={[
-            styles.statusChip,
-            {
-                borderColor: `${AppColors.brandPurple}40`,
-                backgroundColor: `${AppColors.brandPurple}14`,
-            },
-        ]}>
+                styles.statusChip,
+                {
+                    borderColor: `${AppColors.brandPurple}40`,
+                    backgroundColor: `${AppColors.brandPurple}14`,
+                },
+            ]}>
               <Text style={[
-            styles.statusText,
-            { color: AppColors.purple, fontFamily: AppFonts.interBold },
-        ]}>
+                styles.statusText,
+                { color: AppColors.purple, fontFamily: AppFonts.interBold },
+            ]}>
                 {method || 'GET'}
               </Text>
             </View>
@@ -116,20 +115,20 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <Text style={styles.metaLabel}>{t('network.statusHeader')}</Text>
             </View>
             <View style={[
-            styles.statusChip,
-            {
-                borderColor: isFailed
-                    ? `${AppColors.errorColor}40`
-                    : `${statusColor}40`,
-                backgroundColor: isFailed
-                    ? `${AppColors.errorColor}15`
-                    : `${statusColor}15`,
-            },
-        ]}>
+                styles.statusChip,
+                {
+                    borderColor: isFailed
+                        ? `${AppColors.errorColor}40`
+                        : `${statusColor}40`,
+                    backgroundColor: isFailed
+                        ? `${AppColors.errorColor}15`
+                        : `${statusColor}15`,
+                },
+            ]}>
               <Text style={[
-            styles.statusText,
-            { color: isFailed ? AppColors.errorColor : statusColor },
-        ]}>
+                styles.statusText,
+                { color: isFailed ? AppColors.errorColor : statusColor },
+            ]}>
                 {isFailed ? t('network.failedNetworkError') : String(status)}
               </Text>
             </View>
@@ -154,21 +153,21 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </View>
             <View style={styles.metaValueRow}>
               {duration != null && !isFailed && (<View style={[
-                styles.perfBadge,
-                {
-                    backgroundColor: `${getDurationColor(duration)}15`,
-                    borderColor: `${getDurationColor(duration)}40`,
-                },
-            ]}>
+                    styles.perfBadge,
+                    {
+                        backgroundColor: `${getDurationColor(duration)}15`,
+                        borderColor: `${getDurationColor(duration)}40`,
+                    },
+                ]}>
                   <Text style={[
-                styles.perfBadgeText,
-                { color: getDurationColor(duration) },
-            ]}>
+                    styles.perfBadgeText,
+                    { color: getDurationColor(duration) },
+                ]}>
                     {duration < DURATION_FAST_MS
-                ? t('network.perf.fast')
-                : duration < DURATION_SLOW_MS
-                    ? t('network.perf.moderate')
-                    : t('network.perf.slow')}
+                    ? t('network.perf.fast')
+                    : duration < DURATION_SLOW_MS
+                        ? t('network.perf.moderate')
+                        : t('network.perf.slow')}
                   </Text>
                 </View>)}
               <Text style={styles.metaValue}>
@@ -185,25 +184,25 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 </Text>
                 <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 10.5, color: getDurationColor(duration) }}>
                   {duration < DURATION_FAST_MS
-                ? t('network.perf.fast')
-                : duration < DURATION_SLOW_MS
-                    ? t('network.perf.moderate')
-                    : t('network.perf.slow')}
+                    ? t('network.perf.fast')
+                    : duration < DURATION_SLOW_MS
+                        ? t('network.perf.moderate')
+                        : t('network.perf.slow')}
                 </Text>
               </View>
 
               <View style={{
-                height: 6,
-                backgroundColor: AppColors.grayBorderSecondary,
-                borderRadius: 3,
-                overflow: 'hidden',
-            }}>
+                    height: 6,
+                    backgroundColor: AppColors.grayBorderSecondary,
+                    borderRadius: 3,
+                    overflow: 'hidden',
+                }}>
                 <View style={{
-                height: '100%',
-                width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
-                backgroundColor: getDurationColor(duration),
-                borderRadius: 3,
-            }}/>
+                    height: '100%',
+                    width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
+                    backgroundColor: getDurationColor(duration),
+                    borderRadius: 3,
+                }}/>
               </View>
 
               <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 1 }}>
@@ -239,21 +238,21 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                 {url && url.length > 50 && (<TouchableScale onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
                     <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors.purple,
-            }}>
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors.purple,
+                }}>
                       {urlExpanded ? t('network.showLess') : t('network.showMore')}
                     </Text>
                   </TouchableScale>)}
                 
                 {url && (<TouchableScale onPress={() => handleOpenExternalLink(url)} hitSlop={8}>
                     <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors.purple,
-                textDecorationLine: 'underline',
-            }}>
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors.purple,
+                    textDecorationLine: 'underline',
+                }}>
                       {t('network.open')}
                     </Text>
                   </TouchableScale>)}
@@ -261,25 +260,24 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </View>
             
             <View style={{
-            backgroundColor: AppColors.slate50,
-            borderRadius: 8,
-            padding: 8,
-            borderWidth: 1.5,
-            borderColor: AppColors.slate200,
-            width: '100%',
-            marginTop: 2,
-        }}>
+                backgroundColor: AppColors.slate50,
+                borderRadius: 8,
+                padding: 8,
+                borderWidth: 1.5,
+                borderColor: AppColors.slate200,
+                width: '100%',
+                marginTop: 2,
+            }}>
               <Text selectable={true} numberOfLines={urlExpanded ? undefined : 2} ellipsizeMode="tail" style={{
-            fontSize: 11,
-            textAlign: 'left',
-            lineHeight: 16.5,
-        }}>
+                fontSize: 11,
+                textAlign: 'left',
+                lineHeight: 16.5,
+            }}>
                 {renderFormattedUrl(url)}
               </Text>
             </View>
           </View>
-        </View>
-      </Animated.View>
+        </View>)}
     </View>);
 };
 export default MetaAccordion;