react-native-inapp-inspector 2.3.16 → 2.3.18

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;

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -143,3 +143,11 @@ export declare const HeadphonesIcon: ({ color, size, }: IconProps) => React.JSX.
 export declare const HelpCircleIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const SendIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const LifeBuoyIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const CameraIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const VideoCameraIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const MicrophoneIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const GifIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const PlayIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const PauseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ImageIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const FilmIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.StarIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.LifeBuoyIcon = exports.SendIcon = exports.HelpCircleIcon = exports.HeadphonesIcon = exports.TurtleIcon = exports.RocketIcon = exports.UnlockIcon = exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = exports.DiagnosticsIcon = void 0;
+exports.FilmIcon = exports.ImageIcon = exports.PauseIcon = exports.PlayIcon = exports.GifIcon = exports.MicrophoneIcon = exports.VideoCameraIcon = exports.CameraIcon = exports.LifeBuoyIcon = exports.SendIcon = exports.HelpCircleIcon = exports.HeadphonesIcon = exports.TurtleIcon = exports.RocketIcon = exports.UnlockIcon = exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = exports.DiagnosticsIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AppColors_1 = require("../styles/AppColors");
@@ -960,3 +960,53 @@ const LifeBuoyIcon = ({ color = AppColors_1.AppColors.white, size = 20, }) => (<
     <react_native_svg_1.Line x1="4.93" y1="19.07" x2="9.17" y2="14.83" stroke={color} strokeWidth="2" strokeLinecap="round"/>
   </react_native_svg_1.default>);
 exports.LifeBuoyIcon = LifeBuoyIcon;
+const CameraIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Circle cx="12" cy="13" r="4" stroke={color} strokeWidth="2"/>
+  </react_native_svg_1.default>);
+exports.CameraIcon = CameraIcon;
+const VideoCameraIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M23 7l-7 5 7 5V7z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Rect x="1" y="5" width="15" height="14" rx="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.VideoCameraIcon = VideoCameraIcon;
+const MicrophoneIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M19 10v2a7 7 0 0 1-14 0v-2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Line x1="12" y1="19" x2="12" y2="23" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    <react_native_svg_1.Line x1="8" y1="23" x2="16" y2="23" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </react_native_svg_1.default>);
+exports.MicrophoneIcon = MicrophoneIcon;
+const GifIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="2" y="4" width="20" height="16" rx="3" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Path d="M7 10h-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h1v-2H6.5" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M12 10v4" stroke={color} strokeWidth="1.75" strokeLinecap="round"/>
+    <react_native_svg_1.Path d="M18 10h-2v4M16 12h1.5" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.GifIcon = GifIcon;
+const PlayIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M5 3l14 9-14 9V3z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.PlayIcon = PlayIcon;
+const PauseIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="6" y="4" width="4" height="16" fill={color} rx="1"/>
+    <react_native_svg_1.Rect x="14" y="4" width="4" height="16" fill={color} rx="1"/>
+  </react_native_svg_1.default>);
+exports.PauseIcon = PauseIcon;
+const ImageIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Circle cx="8.5" cy="8.5" r="1.5" fill={color}/>
+    <react_native_svg_1.Path d="M21 15l-5-5L5 21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.ImageIcon = ImageIcon;
+const FilmIcon = ({ color = AppColors_1.AppColors.white, size = 18, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="2" y="2" width="20" height="20" rx="2.18" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Line x1="7" y1="2" x2="7" y2="22" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Line x1="17" y1="2" x2="17" y2="22" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Line x1="2" y1="12" x2="22" y2="12" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Line x1="2" y1="7" x2="7" y2="7" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Line x1="2" y1="17" x2="7" y2="17" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Line x1="17" y1="17" x2="22" y2="17" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Line x1="17" y1="7" x2="22" y2="7" stroke={color} strokeWidth="2"/>
+  </react_native_svg_1.default>);
+exports.FilmIcon = FilmIcon;

package/dist/commonjs/components/SectionHeader.js

@@ -1,42 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const CopyButton_1 = __importDefault(require("./CopyButton"));
@@ -45,18 +12,6 @@ const NetworkIcons_1 = require("./NetworkIcons");
 const styles_1 = __importDefault(require("../styles"));
 const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, showSearch, isSearching, onToggleSearch, }) => {
     const isOpen = expanded === undefined ? false : !!expanded;
-    const chevronAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
-    (0, react_1.useEffect)(() => {
-        react_native_1.Animated.timing(chevronAnim, {
-            toValue: isOpen ? 1 : 0,
-            duration: 220,
-            useNativeDriver: true,
-        }).start();
-    }, [isOpen]);
-    const chevronRotate = chevronAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '180deg'],
-    });
     return (<react_native_1.View style={styles_1.default.sectionHeaderGradient}>
       <react_native_1.View style={styles_1.default.sectionHeaderRow}>
         <react_native_1.Pressable style={styles_1.default.sectionTitleRow} onPress={onToggleExpand} hitSlop={12}>
@@ -78,9 +33,9 @@ const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDif
             </TouchableScale_1.default>)}
           <CopyButton_1.default value={value} label={title}/>
           <TouchableScale_1.default onPress={onToggleExpand} hitSlop={12} style={styles_1.default.iconSquareBtn}>
-            <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+            <react_native_1.View style={{ transform: [{ rotate: isOpen ? '180deg' : '0deg' }] }}>
               <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
-            </react_native_1.Animated.View>
+            </react_native_1.View>
           </TouchableScale_1.default>
         </react_native_1.View>
       </react_native_1.View>

package/dist/commonjs/components/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/SourcePageCard.js

@@ -45,8 +45,8 @@ const NetworkIcons_1 = require("./NetworkIcons");
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
 const SourcePageCard = ({ routeInfo }) => {
-    const main = (0, useAccordion_1.default)(true, 600, 280);
-    const params = (0, useAccordion_1.default)(false, 800, 260);
+    const main = (0, useAccordion_1.default)(true);
+    const params = (0, useAccordion_1.default)(false);
     const hasParams = routeInfo.params && Object.keys(routeInfo.params).length > 0;
     return (<react_native_1.View style={styles_1.default.sourcePageCard}>
       <react_native_1.Pressable onPress={main.toggleOpen} hitSlop={12}>
@@ -70,59 +70,57 @@ const SourcePageCard = ({ routeInfo }) => {
           <react_native_1.View style={styles_1.default.sourcePageHeaderRight}>
             <CopyButton_1.default value={routeInfo.path} label="Source Path"/>
             <react_native_1.View style={styles_1.default.iconSquareBtn}>
-              <react_native_1.Animated.View style={main.chevronStyle}>
+              <react_native_1.View style={main.chevronStyle}>
                 <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
-              </react_native_1.Animated.View>
+              </react_native_1.View>
             </react_native_1.View>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Pressable>
 
-      <react_native_1.Animated.View style={main.bodyStyle}>
-        {hasParams && (<react_native_1.View style={styles_1.default.sourceParamsBox}>
-            <react_native_1.Pressable onPress={params.toggleOpen} hitSlop={10}>
-              <react_native_1.View style={styles_1.default.paramsAccordionHeader}>
-                <react_native_1.View style={styles_1.default.paramsAccordionLeft}>
-                  <react_native_1.Text style={styles_1.default.sourceParamsLabel}>Parameters</react_native_1.Text>
-                  <react_native_1.View style={styles_1.default.headerCountBadge}>
-                    <react_native_1.Text style={styles_1.default.headerCountText}>
-                      {Object.keys(routeInfo.params).length}
-                    </react_native_1.Text>
+      {main.isOpen && (<react_native_1.View>
+          {hasParams && (<react_native_1.View style={styles_1.default.sourceParamsBox}>
+              <react_native_1.Pressable onPress={params.toggleOpen} hitSlop={10}>
+                <react_native_1.View style={styles_1.default.paramsAccordionHeader}>
+                  <react_native_1.View style={styles_1.default.paramsAccordionLeft}>
+                    <react_native_1.Text style={styles_1.default.sourceParamsLabel}>Parameters</react_native_1.Text>
+                    <react_native_1.View style={styles_1.default.headerCountBadge}>
+                      <react_native_1.Text style={styles_1.default.headerCountText}>
+                        {Object.keys(routeInfo.params).length}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
-                <react_native_1.View style={styles_1.default.paramsAccordionRight}>
-                  <CopyButton_1.default value={routeInfo.params} label="Parameters"/>
-                  <react_native_1.View style={styles_1.default.iconSquareBtn}>
-                    <react_native_1.Animated.View style={params.chevronStyle}>
-                      <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
-                    </react_native_1.Animated.View>
+                  <react_native_1.View style={styles_1.default.paramsAccordionRight}>
+                    <CopyButton_1.default value={routeInfo.params} label="Parameters"/>
+                    <react_native_1.View style={styles_1.default.iconSquareBtn}>
+                      <react_native_1.View style={params.chevronStyle}>
+                        <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
+                      </react_native_1.View>
+                    </react_native_1.View>
                   </react_native_1.View>
                 </react_native_1.View>
-              </react_native_1.View>
-            </react_native_1.Pressable>
+              </react_native_1.Pressable>
 
-            <react_native_1.Animated.View style={params.bodyStyle}>
-              <react_native_1.View style={styles_1.default.paramsBody}>
-                {Object.entries(routeInfo.params).map(([key, val], i, arr) => (<react_native_1.View key={key} style={[
-                    styles_1.default.paramRow,
-                    i < arr.length - 1 ? styles_1.default.paramRowBorder : null,
-                ]}>
-                    <react_native_1.Text style={styles_1.default.paramKey}>{key}</react_native_1.Text>
-                    <react_native_1.View style={styles_1.default.paramValueRow}>
-                      <react_native_1.Text selectable style={styles_1.default.paramValue}>
-                        {typeof val === 'object'
-                    ? JSON.stringify(val)
-                    : String(val)}
-                      </react_native_1.Text>
-                      <CopyButton_1.default value={typeof val === 'object'
-                    ? JSON.stringify(val)
-                    : String(val)} label={key}/>
-                    </react_native_1.View>
-                  </react_native_1.View>))}
-              </react_native_1.View>
-            </react_native_1.Animated.View>
-          </react_native_1.View>)}
-      </react_native_1.Animated.View>
+              {params.isOpen && (<react_native_1.View style={styles_1.default.paramsBody}>
+                  {Object.entries(routeInfo.params).map(([key, val], i, arr) => (<react_native_1.View key={key} style={[
+                            styles_1.default.paramRow,
+                            i < arr.length - 1 ? styles_1.default.paramRowBorder : null,
+                        ]}>
+                      <react_native_1.Text style={styles_1.default.paramKey}>{key}</react_native_1.Text>
+                      <react_native_1.View style={styles_1.default.paramValueRow}>
+                        <react_native_1.Text selectable style={styles_1.default.paramValue}>
+                          {typeof val === 'object'
+                            ? JSON.stringify(val)
+                            : String(val)}
+                        </react_native_1.Text>
+                        <CopyButton_1.default value={typeof val === 'object'
+                            ? JSON.stringify(val)
+                            : String(val)} label={key}/>
+                      </react_native_1.View>
+                    </react_native_1.View>))}
+                </react_native_1.View>)}
+            </react_native_1.View>)}
+        </react_native_1.View>)}
     </react_native_1.View>);
 };
 exports.default = SourcePageCard;

package/dist/commonjs/components/Toast.js

@@ -54,13 +54,13 @@ const Toast = react_1.default.memo(() => {
                 react_native_1.Animated.timing(opacityAnim, {
                     toValue: 1,
                     duration: 180,
-                    useNativeDriver: true,
+                    useNativeDriver: false,
                 }),
                 react_native_1.Animated.spring(translateYAnim, {
                     toValue: 0,
                     tension: 80,
                     friction: 8,
-                    useNativeDriver: true,
+                    useNativeDriver: false,
                 }),
             ]).start();
             hideTimerRef.current = setTimeout(() => {
@@ -68,12 +68,12 @@ const Toast = react_1.default.memo(() => {
                     react_native_1.Animated.timing(opacityAnim, {
                         toValue: 0,
                         duration: 200,
-                        useNativeDriver: true,
+                        useNativeDriver: false,
                     }),
                     react_native_1.Animated.timing(translateYAnim, {
                         toValue: 20,
                         duration: 200,
-                        useNativeDriver: true,
+                        useNativeDriver: false,
                     }),
                 ]).start(() => {
                     setToastMessage(null);