react-native-inapp-inspector 2.3.15 → 2.3.17

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

@@ -44,12 +44,12 @@ exports.SkeletonPlaceholder = react_1.default.memo(function SkeletonPlaceholder(
             react_native_1.Animated.timing(shimmerAnim, {
                 toValue: 0.85,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             react_native_1.Animated.timing(shimmerAnim, {
                 toValue: 0.35,
                 duration: 750,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         animation.start();

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

@@ -40,7 +40,6 @@ exports.StorageTab = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
 const i18n_1 = require("../../i18n");
@@ -436,28 +435,6 @@ exports.StorageTab = react_1.default.memo(() => {
                     </react_native_1.Text>
                   </TouchableScale_1.default>)}
               </react_native_1.View>} ListFooterComponent={<react_native_1.View style={{ height: 60 }}/>}/>
-
-          <TouchableScale_1.default onPress={() => {
-                try {
-                    listRef.current?.scrollToOffset({
-                        offset: 0,
-                        animated: true,
-                    });
-                }
-                catch {
-                    try {
-                        listRef.current?.scrollToIndex({
-                            index: 0,
-                            animated: true,
-                        });
-                    }
-                    catch { }
-                }
-            }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
-            <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
-              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
-            </react_native_1.View>
-          </TouchableScale_1.default>
         </>)}
 
       
@@ -752,7 +729,7 @@ const styles = react_native_1.StyleSheet.create({
         borderColor: `${AppColors_1.AppColors.grayBorderSecondary}80`,
     },
     valuePreviewText: {
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts_1.AppFonts.interRegular,
         fontSize: 11,
         color: AppColors_1.AppColors.primaryBlack,
         lineHeight: 16,
@@ -817,7 +794,7 @@ const styles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.purple,
     },
     connectGuideCode: {
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts_1.AppFonts.interRegular,
         fontSize: 10,
         color: AppColors_1.AppColors.grayText,
         lineHeight: 15,
@@ -882,7 +859,7 @@ const styles = react_native_1.StyleSheet.create({
     textAreaInput: {
         minHeight: 90,
         maxHeight: 160,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts_1.AppFonts.interRegular,
         fontSize: 11,
     },
     typeSelectorStrip: {

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

@@ -8,6 +8,7 @@ const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const NetworkIcons_1 = require("../NetworkIcons");
 const reduxLogger_1 = require("../../customHooks/reduxLogger");
@@ -21,60 +22,70 @@ const TabBar = react_1.default.memo(() => {
       <react_native_1.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,
@@ -103,10 +114,8 @@ const TabBar = react_1.default.memo(() => {
                     ? AppColors_1.AppColors.errorColor
                     : AppColors_1.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_1.default key={tab.key} onPress={() => {
@@ -124,30 +133,51 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'device' && (<NetworkIcons_1.SmartphoneIcon color={iconColor} size={14}/>)}
-                  {tab.icon === 'storage' && (<NetworkIcons_1.DatabaseIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'debugging' && (<NetworkIcons_1.QrCodeIcon color={iconColor} size={14}/>)}
+                  <react_native_1.View style={{
+                    minWidth: 20,
+                    height: 20,
+                    paddingHorizontal: 4,
+                    borderRadius: 10,
+                    backgroundColor: isActive
+                        ? `${AppColors_1.AppColors.white}33`
+                        : `${AppColors_1.AppColors.purple}1F`,
+                    borderWidth: 1,
+                    borderColor: isActive
+                        ? `${AppColors_1.AppColors.white}66`
+                        : `${AppColors_1.AppColors.purple}40`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    lineHeight: 12,
+                    color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
+                }}>
+                      #{tab.id}
+                    </react_native_1.Text>
+                  </react_native_1.View>
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
-                    isActive &&
-                        styles_1.default.contentTabButtonTextActive,
+                    isActive && styles_1.default.contentTabButtonTextActive,
                 ]}>
-                    {tab.label}{' '}
-                    {tab.count > 0 ? `(${countLabel})` : ''}
+                    {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
                   </react_native_1.Text>
                   {((tab.key === 'apis' && hasUnreadApis) ||
                     (tab.key === 'logs' && hasUnreadLogs) ||
-                    (tab.key === 'crash' && hasUnreadCrashes)) && (<react_native_1.Animated.View style={{
+                    (tab.key === 'crash' && hasUnreadCrashes)) && (<react_native_1.View style={{
                         width: 6,
                         height: 6,
                         borderRadius: 3,
                         backgroundColor: AppColors_1.AppColors.errorColor,
                         marginLeft: 4,
                         alignSelf: 'center',
-                        transform: [{ scale: unreadPulseAnim }],
                     }}/>)}
                 </react_native_1.View>
               </TouchableScale_1.default>);

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

@@ -42,6 +42,7 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const constants_1 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const toast_1 = require("../../helpers/toast");
+const AppFonts_1 = require("../../styles/AppFonts");
 const CopySvg = ({ size = 14, color = '#64748B' }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.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"/>
     <react_native_svg_1.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"/>
@@ -205,15 +206,9 @@ const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
     </react_native_1.Modal>);
 };
 exports.UpdateAvailableModal = UpdateAvailableModal;
-const fontStack = react_native_1.Platform.select({
-    ios: {
-        fontFamily: 'System',
-    },
-    android: {
-        fontFamily: 'sans-serif',
-    },
-    default: {},
-});
+const fontStack = {
+    fontFamily: AppFonts_1.AppFonts.interRegular,
+};
 const styles = react_native_1.StyleSheet.create({
     overlay: {
         flex: 1,
@@ -414,7 +409,7 @@ const styles = react_native_1.StyleSheet.create({
     commandText: {
         flex: 1,
         fontSize: 11,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Courier' : 'monospace',
+        fontFamily: AppFonts_1.AppFonts.interRegular,
         color: '#38BDF8',
     },
     copyIconWrapper: {

package/dist/commonjs/components/JsonViewer.js

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

package/dist/commonjs/components/LogCard.js

@@ -101,7 +101,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             react_native_1.Animated.timing(shimmerOpacity, {
                 toValue: 0,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }).start();
         }
     }, [isNew]);
@@ -359,10 +359,10 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             </react_native_1.View>)}
         </react_native_1.View>
 
-        <react_native_1.Animated.View pointerEvents="none" style={[
-            react_native_1.StyleSheet.absoluteFill,
-            { backgroundColor: methodColor, opacity: shimmerOpacity },
-        ]}/>
+        {isNew && (<react_native_1.Animated.View pointerEvents="none" style={[
+                react_native_1.StyleSheet.absoluteFill,
+                { backgroundColor: methodColor, opacity: shimmerOpacity },
+            ]}/>)}
       </TouchableScale_1.default>
     </react_native_1.View>);
 });

package/dist/commonjs/components/MetaAccordion.js

@@ -51,7 +51,7 @@ const styles_1 = __importDefault(require("../styles"));
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
     const { t } = (0, i18n_1.useTranslation)();
     const [urlExpanded, setUrlExpanded] = (0, react_1.useState)(false);
-    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 800, 390);
+    const { isOpen, toggleOpen, chevronStyle } = (0, useAccordion_1.default)(true);
     const isFailed = status === 0 || status == null;
     const renderFormattedUrl = (rawUrl) => {
         if (!rawUrl)
@@ -103,24 +103,23 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             contentType: contentType || 'application/json',
             url: url || '',
         }} label="Metadata"/>
-            <react_native_1.Animated.View style={chevronStyle}>
+            <react_native_1.View style={chevronStyle}>
               <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-            </react_native_1.Animated.View>
+            </react_native_1.View>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Pressable>
 
-      <react_native_1.Animated.View style={bodyStyle}>
-        <react_native_1.View style={styles_1.default.metaBody}>
+      {isOpen && (<react_native_1.View style={styles_1.default.metaBody}>
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.triggeredAt')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.Text style={[
-            styles_1.default.metaValue,
-            { color: AppColors_1.AppColors.purple, fontSize: 12 },
-        ]}>
+                styles_1.default.metaValue,
+                { color: AppColors_1.AppColors.purple, fontSize: 12 },
+            ]}>
               {triggeredAt}
             </react_native_1.Text>
           </react_native_1.View>
@@ -132,16 +131,16 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.methodHeader')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={[
-            styles_1.default.statusChip,
-            {
-                borderColor: `${AppColors_1.AppColors.brandPurple}40`,
-                backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
-            },
-        ]}>
+                styles_1.default.statusChip,
+                {
+                    borderColor: `${AppColors_1.AppColors.brandPurple}40`,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
+                },
+            ]}>
               <react_native_1.Text style={[
-            styles_1.default.statusText,
-            { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold },
-        ]}>
+                styles_1.default.statusText,
+                { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold },
+            ]}>
                 {method || 'GET'}
               </react_native_1.Text>
             </react_native_1.View>
@@ -154,20 +153,20 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.statusHeader')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={[
-            styles_1.default.statusChip,
-            {
-                borderColor: isFailed
-                    ? `${AppColors_1.AppColors.errorColor}40`
-                    : `${statusColor}40`,
-                backgroundColor: isFailed
-                    ? `${AppColors_1.AppColors.errorColor}15`
-                    : `${statusColor}15`,
-            },
-        ]}>
+                styles_1.default.statusChip,
+                {
+                    borderColor: isFailed
+                        ? `${AppColors_1.AppColors.errorColor}40`
+                        : `${statusColor}40`,
+                    backgroundColor: isFailed
+                        ? `${AppColors_1.AppColors.errorColor}15`
+                        : `${statusColor}15`,
+                },
+            ]}>
               <react_native_1.Text style={[
-            styles_1.default.statusText,
-            { color: isFailed ? AppColors_1.AppColors.errorColor : statusColor },
-        ]}>
+                styles_1.default.statusText,
+                { color: isFailed ? AppColors_1.AppColors.errorColor : statusColor },
+            ]}>
                 {isFailed ? t('network.failedNetworkError') : String(status)}
               </react_native_1.Text>
             </react_native_1.View>
@@ -192,21 +191,21 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </react_native_1.View>
             <react_native_1.View style={styles_1.default.metaValueRow}>
               {duration != null && !isFailed && (<react_native_1.View style={[
-                styles_1.default.perfBadge,
-                {
-                    backgroundColor: `${(0, helpers_1.getDurationColor)(duration)}15`,
-                    borderColor: `${(0, helpers_1.getDurationColor)(duration)}40`,
-                },
-            ]}>
+                    styles_1.default.perfBadge,
+                    {
+                        backgroundColor: `${(0, helpers_1.getDurationColor)(duration)}15`,
+                        borderColor: `${(0, helpers_1.getDurationColor)(duration)}40`,
+                    },
+                ]}>
                   <react_native_1.Text style={[
-                styles_1.default.perfBadgeText,
-                { color: (0, helpers_1.getDurationColor)(duration) },
-            ]}>
+                    styles_1.default.perfBadgeText,
+                    { color: (0, helpers_1.getDurationColor)(duration) },
+                ]}>
                     {duration < constants_1.DURATION_FAST_MS
-                ? t('network.perf.fast')
-                : duration < constants_1.DURATION_SLOW_MS
-                    ? t('network.perf.moderate')
-                    : t('network.perf.slow')}
+                    ? t('network.perf.fast')
+                    : duration < constants_1.DURATION_SLOW_MS
+                        ? t('network.perf.moderate')
+                        : t('network.perf.slow')}
                   </react_native_1.Text>
                 </react_native_1.View>)}
               <react_native_1.Text style={styles_1.default.metaValue}>
@@ -223,25 +222,25 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 </react_native_1.Text>
                 <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 10.5, color: (0, helpers_1.getDurationColor)(duration) }}>
                   {duration < constants_1.DURATION_FAST_MS
-                ? t('network.perf.fast')
-                : duration < constants_1.DURATION_SLOW_MS
-                    ? t('network.perf.moderate')
-                    : t('network.perf.slow')}
+                    ? t('network.perf.fast')
+                    : duration < constants_1.DURATION_SLOW_MS
+                        ? t('network.perf.moderate')
+                        : t('network.perf.slow')}
                 </react_native_1.Text>
               </react_native_1.View>
 
               <react_native_1.View style={{
-                height: 6,
-                backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
-                borderRadius: 3,
-                overflow: 'hidden',
-            }}>
+                    height: 6,
+                    backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
+                    borderRadius: 3,
+                    overflow: 'hidden',
+                }}>
                 <react_native_1.View style={{
-                height: '100%',
-                width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
-                backgroundColor: (0, helpers_1.getDurationColor)(duration),
-                borderRadius: 3,
-            }}/>
+                    height: '100%',
+                    width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
+                    backgroundColor: (0, helpers_1.getDurationColor)(duration),
+                    borderRadius: 3,
+                }}/>
               </react_native_1.View>
 
               <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 1 }}>
@@ -277,21 +276,21 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                 {url && url.length > 50 && (<TouchableScale_1.default onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
                     <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors_1.AppColors.purple,
-            }}>
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors_1.AppColors.purple,
+                }}>
                       {urlExpanded ? t('network.showLess') : t('network.showMore')}
                     </react_native_1.Text>
                   </TouchableScale_1.default>)}
                 
                 {url && (<TouchableScale_1.default onPress={() => (0, helpers_1.handleOpenExternalLink)(url)} hitSlop={8}>
                     <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors_1.AppColors.purple,
-                textDecorationLine: 'underline',
-            }}>
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors_1.AppColors.purple,
+                    textDecorationLine: 'underline',
+                }}>
                       {t('network.open')}
                     </react_native_1.Text>
                   </TouchableScale_1.default>)}
@@ -299,25 +298,24 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </react_native_1.View>
             
             <react_native_1.View style={{
-            backgroundColor: AppColors_1.AppColors.slate50,
-            borderRadius: 8,
-            padding: 8,
-            borderWidth: 1.5,
-            borderColor: AppColors_1.AppColors.slate200,
-            width: '100%',
-            marginTop: 2,
-        }}>
+                backgroundColor: AppColors_1.AppColors.slate50,
+                borderRadius: 8,
+                padding: 8,
+                borderWidth: 1.5,
+                borderColor: AppColors_1.AppColors.slate200,
+                width: '100%',
+                marginTop: 2,
+            }}>
               <react_native_1.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)}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
-        </react_native_1.View>
-      </react_native_1.Animated.View>
+        </react_native_1.View>)}
     </react_native_1.View>);
 };
 exports.default = MetaAccordion;