react-native-inapp-inspector 1.0.0

package/dist/commonjs/components/DomainHeader.js

@@ -0,0 +1,136 @@
+"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_native_1 = require("react-native");
+// Stylesheet
+const AppColors_1 = require("../styles/AppColors");
+// Helpers
+const helpers_1 = require("../helpers");
+// Assets
+const NetworkIcons_1 = require("./NetworkIcons");
+// Stylesheet
+const styles_1 = __importDefault(require("../styles"));
+const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, isCollapsed, onToggleCollapse, isFirst, timestamp, }) => {
+    const chevronAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(isCollapsed ? 0 : 1)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(chevronAnim, {
+            toValue: isCollapsed ? 0 : 1,
+            duration: 220,
+            useNativeDriver: true,
+        }).start();
+    }, [isCollapsed]);
+    const chevronRotate = chevronAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['-90deg', '0deg'],
+    });
+    const visibleStats = ['success', 'failed', 'loading'];
+    return (<react_native_1.Pressable style={[styles_1.default.domainHeaderRow, !isFirst && styles_1.default.domainHeaderSeparator]} onPress={() => onToggleCollapse(pageName)}>
+      <react_native_1.View style={styles_1.default.domainHeaderLeft}>
+        <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+        </react_native_1.Animated.View>
+        <NetworkIcons_1.ScreenIcon color={color} size={16}/>
+        <react_native_1.View style={{ flex: 1, marginLeft: 6, justifyContent: 'center' }}>
+          <react_native_1.Text style={[styles_1.default.domainHeaderText, { color, marginLeft: 0 }]} numberOfLines={1}>
+            {pageName}
+          </react_native_1.Text>
+          <react_native_1.View style={styles_1.default.domainSubRow}>
+            <react_native_1.Text style={styles_1.default.domainTimestamp}>
+              {(0, helpers_1.formatDateTime)(timestamp)}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles_1.default.domainStatsGroup}>
+        {visibleStats.map((type, index) => {
+            const isLast = index === visibleStats.length - 1;
+            const isActive = activeFilters.has(type);
+            let IconComponent;
+            let activeColor = '';
+            let count = 0;
+            let bgStyle = {};
+            if (type === 'success') {
+                IconComponent = NetworkIcons_1.CheckIcon;
+                activeColor = AppColors_1.AppColors.greenColor;
+                count = stats.success;
+                bgStyle = {
+                    backgroundColor: isActive
+                        ? `${AppColors_1.AppColors.greenColor}15`
+                        : 'transparent',
+                };
+            }
+            else if (type === 'failed') {
+                IconComponent = NetworkIcons_1.FailIcon;
+                activeColor = AppColors_1.AppColors.errorColor;
+                count = stats.failed;
+                bgStyle = {
+                    backgroundColor: isActive
+                        ? `${AppColors_1.AppColors.errorColor}15`
+                        : 'transparent',
+                };
+            }
+            else {
+                IconComponent = NetworkIcons_1.ClockIcon;
+                activeColor = AppColors_1.AppColors.darkOrange;
+                count = stats.loading;
+                bgStyle = {
+                    backgroundColor: isActive
+                        ? `${AppColors_1.AppColors.darkOrange}15`
+                        : 'transparent',
+                };
+            }
+            return (<react_native_1.Pressable key={type} onPress={() => onToggleFilter(pageName, type)} style={[
+                    styles_1.default.groupBtnItem,
+                    bgStyle,
+                    !isLast && styles_1.default.groupBtnBorderRight,
+                ]}>
+              <IconComponent color={isActive ? activeColor : AppColors_1.AppColors.grayTextWeak} size={type === 'failed' ? 8 : 10}/>
+              <react_native_1.Text style={[
+                    styles_1.default.domainStatText,
+                    { color: isActive ? activeColor : AppColors_1.AppColors.grayTextWeak },
+                ]}>
+                {count}
+              </react_native_1.Text>
+            </react_native_1.Pressable>);
+        })}
+      </react_native_1.View>
+    </react_native_1.Pressable>);
+};
+exports.default = DomainHeader;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const EmptyState: ({ isSearch }: {
+    isSearch?: boolean;
+}) => React.JSX.Element;
+export default EmptyState;

package/dist/commonjs/components/EmptyState.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// Components
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+// Assets
+const NetworkIcons_1 = require("./NetworkIcons");
+// Stylesheet
+const AppColors_1 = require("../styles/AppColors");
+const styles_1 = __importDefault(require("../styles"));
+const EmptyState = ({ isSearch }) => {
+    const handleReload = () => {
+        if (__DEV__ && react_native_1.DevSettings && react_native_1.DevSettings.reload) {
+            react_native_1.DevSettings.reload();
+            return;
+        }
+        react_native_1.Alert.alert('Reload', 'App reload is typically only available in development mode.');
+    };
+    return (<react_native_1.View style={styles_1.default.emptyContainer}>
+      <react_native_1.View style={styles_1.default.emptyIconWrap}>
+        <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.purple} size={32}/>
+      </react_native_1.View>
+      <react_native_1.Text style={styles_1.default.emptyTitle}>
+        {isSearch ? 'No matching APIs' : 'No network activity'}
+      </react_native_1.Text>
+      <react_native_1.Text style={styles_1.default.emptySub}>
+        {isSearch
+            ? 'Try adjusting your filters or search.'
+            : 'Listening for incoming API calls...'}
+      </react_native_1.Text>
+      {!isSearch && (<TouchableScale_1.default style={styles_1.default.reloadBtn} onPress={handleReload}>
+          <react_native_1.Text style={styles_1.default.reloadBtnText}>Reload App</react_native_1.Text>
+        </TouchableScale_1.default>)}
+    </react_native_1.View>);
+};
+exports.default = EmptyState;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HeadersSectionProps } from '../types';
+declare const HeadersSection: ({ title, headers, search, resetKey, }: HeadersSectionProps) => React.JSX.Element;
+export default HeadersSection;

package/dist/commonjs/components/HeadersSection.js

@@ -0,0 +1,155 @@
+"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_native_1 = require("react-native");
+// Components
+const CopyButton_1 = __importDefault(require("./CopyButton"));
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+// Helpers
+const helpers_1 = require("../helpers");
+// Custom Hooks
+const useAccordion_1 = __importDefault(require("../customHooks/useAccordion"));
+// Assets
+const NetworkIcons_1 = require("./NetworkIcons");
+// Stylesheet
+const AppColors_1 = require("../styles/AppColors");
+const styles_1 = __importDefault(require("../styles"));
+const HeaderRow = react_1.default.memo(function HeaderRow({ headerKey, value, isLast, index, }) {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const isLong = value.length > 35;
+    const entryAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(entryAnim, {
+            toValue: 1,
+            duration: 220,
+            delay: index * 30,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    const rowAnimStyle = {
+        opacity: entryAnim,
+        transform: [
+            {
+                translateY: entryAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [8, 0],
+                }),
+            },
+        ],
+    };
+    return (<react_native_1.Animated.View style={[styles_1.default.htRow, !isLast && styles_1.default.htRowBorder, rowAnimStyle]}>
+      <react_native_1.View style={styles_1.default.htKeyCell}>
+        <react_native_1.Text style={styles_1.default.htKey} numberOfLines={2}>
+          {headerKey}
+        </react_native_1.Text>
+      </react_native_1.View>
+      <react_native_1.View style={styles_1.default.htCellDivider}/>
+      <react_native_1.Pressable style={styles_1.default.htValueCell} onPress={() => isLong && setExpanded(v => !v)} hitSlop={8}>
+        <react_native_1.Text style={styles_1.default.htValue} selectable numberOfLines={expanded ? undefined : 3}>
+          {value}
+        </react_native_1.Text>
+        {isLong && (<react_native_1.View style={styles_1.default.htExpandRow}>
+            <react_native_1.Text style={styles_1.default.htExpandText}>
+              {expanded ? '▲ less' : '▼ more'}
+            </react_native_1.Text>
+          </react_native_1.View>)}
+      </react_native_1.Pressable>
+      <TouchableScale_1.default onPress={() => (0, helpers_1.copyToClipboard)(value, headerKey)} hitSlop={8} style={styles_1.default.htCopyBtn}>
+        <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+      </TouchableScale_1.default>
+    </react_native_1.Animated.View>);
+});
+const HeadersSection = ({ title, headers, search, resetKey, }) => {
+    const { toggleOpen, forceOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(false, 2400, 300);
+    (0, react_1.useEffect)(() => {
+        forceOpen(false);
+    }, [resetKey]);
+    const entries = (0, react_1.useMemo)(() => (headers ? Object.entries(headers) : []), [headers]);
+    const filtered = (0, react_1.useMemo)(() => {
+        if (!search)
+            return entries;
+        const q = search.toLowerCase();
+        return entries.filter(([k, v]) => k.toLowerCase().includes(q) || v.toLowerCase().includes(q));
+    }, [entries, search]);
+    if (entries.length === 0)
+        return null;
+    const isRequest = title.toLowerCase().includes('request') ||
+        title.toLowerCase().includes('api');
+    const accentColor = isRequest ? AppColors_1.AppColors.offerPurple : AppColors_1.AppColors.greenColor;
+    const accentBg = isRequest
+        ? `${AppColors_1.AppColors.offerPurple}10`
+        : `${AppColors_1.AppColors.greenColor}10`;
+    return (<react_native_1.View style={[styles_1.default.htCard, { borderLeftColor: accentColor }]}>
+      <react_native_1.Pressable onPress={toggleOpen} hitSlop={10}>
+        <react_native_1.View style={styles_1.default.htCardHeader}>
+          <react_native_1.View style={[styles_1.default.htIconWrap, { backgroundColor: accentBg }]}>
+            <NetworkIcons_1.HeadersIcon color={accentColor}/>
+          </react_native_1.View>
+          <react_native_1.Text style={styles_1.default.htTitle}>{title}</react_native_1.Text>
+          <react_native_1.View style={[
+            styles_1.default.htBadge,
+            { backgroundColor: accentBg, borderColor: accentColor },
+        ]}>
+            <react_native_1.Text style={[styles_1.default.htBadgeText, { color: accentColor }]}>
+              {entries.length}
+            </react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.htHeaderSpacer}/>
+          <CopyButton_1.default value={headers} label={title}/>
+          <react_native_1.View style={styles_1.default.htChevronBtn}>
+            <react_native_1.Animated.View style={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.Pressable>
+
+      <react_native_1.Animated.View style={bodyStyle}>
+        <react_native_1.View style={styles_1.default.htColHeadRow}>
+          <react_native_1.Text style={[styles_1.default.htColHead, { width: '30%' }]}>KEY</react_native_1.Text>
+          <react_native_1.Text style={[styles_1.default.htColHead, { flex: 1 }]}>VALUE</react_native_1.Text>
+        </react_native_1.View>
+
+        {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<react_native_1.View style={styles_1.default.htEmpty}>
+            <react_native_1.Text style={styles_1.default.htEmptyText}>No matching headers</react_native_1.Text>
+          </react_native_1.View>)}
+      </react_native_1.Animated.View>
+    </react_native_1.View>);
+};
+exports.default = HeadersSection;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const HighlightText: ({ text, search, style, highlightStyle, detectLinks, ...rest }: any) => React.JSX.Element;
+export default HighlightText;

package/dist/commonjs/components/HighlightText.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// Helpers
+const helpers_1 = require("../helpers");
+const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...rest }) => {
+    const hasNumberOfLines = 'numberOfLines' in rest;
+    const numLines = hasNumberOfLines ? rest.numberOfLines : 1;
+    // Regex to detect absolute URLs
+    const URL_REGEX = /(https?:\/\/[^\s]+)/g;
+    const renderNormalOrHighlighted = (subText, keyPrefix) => {
+        if (!search) {
+            return <react_native_1.Text key={keyPrefix}>{subText}</react_native_1.Text>;
+        }
+        const regex = new RegExp(`(${(0, helpers_1.escapeRegex)(search)})`, 'gi');
+        const parts = subText.split(regex);
+        return (<react_native_1.Text key={keyPrefix}>
+        {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<react_native_1.Text key={i} style={highlightStyle}>
+              {part}
+            </react_native_1.Text>) : (<react_native_1.Text key={i}>{part}</react_native_1.Text>))}
+      </react_native_1.Text>);
+    };
+    if (detectLinks && text) {
+        const parts = text.split(URL_REGEX);
+        return (<react_native_1.Text style={style} numberOfLines={numLines} {...rest}>
+        {parts.map((part, i) => {
+                if (part.match(URL_REGEX)) {
+                    return (<react_native_1.Text key={`link-${i}`} style={{
+                            color: '#007AFF', // skyBlue link color
+                            textDecorationLine: 'underline',
+                        }} onPress={() => {
+                            react_native_1.Linking.openURL(part).catch(() => { });
+                        }}>
+                {part}
+              </react_native_1.Text>);
+                }
+                return renderNormalOrHighlighted(part, `text-${i}`);
+            })}
+      </react_native_1.Text>);
+    }
+    if (!search)
+        return (<react_native_1.Text style={style} numberOfLines={numLines} {...rest}>
+        {text}
+      </react_native_1.Text>);
+    const regex = new RegExp(`(${(0, helpers_1.escapeRegex)(search)})`, 'gi');
+    const parts = text.split(regex);
+    return (<react_native_1.Text style={style} numberOfLines={numLines} {...rest}>
+      {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<react_native_1.Text key={i} style={highlightStyle}>
+            {part}
+          </react_native_1.Text>) : (<react_native_1.Text key={i}>{part}</react_native_1.Text>))}
+    </react_native_1.Text>);
+};
+exports.default = HighlightText;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const JsonViewer: ({ data, search, forceOpen, }: {
+    data: unknown;
+    search?: string;
+    forceOpen?: boolean;
+}) => React.JSX.Element;
+export default JsonViewer;

package/dist/commonjs/components/JsonViewer.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+// Components
+const TreeNode_1 = __importDefault(require("./TreeNode"));
+// Stylesheet
+const styles_1 = __importDefault(require("../styles"));
+const JsonViewer = ({ data, search, forceOpen, }) => {
+    return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
+      <react_native_1.View style={styles_1.default.codeBlock}>
+        <TreeNode_1.default data={data} search={search} forceOpen={forceOpen}/>
+      </react_native_1.View>
+    </react_native_1.ScrollView>);
+};
+exports.default = JsonViewer;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LogCardProps } from '../types';
+declare const LogCard: React.NamedExoticComponent<LogCardProps>;
+export default LogCard;

package/dist/commonjs/components/LogCard.js

@@ -0,0 +1,179 @@
+"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_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const AppColors_1 = require("../styles/AppColors");
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+const NetworkIcons_1 = require("./NetworkIcons");
+const styles_1 = __importDefault(require("../styles"));
+const HighlightText_1 = __importDefault(require("./HighlightText"));
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
+    const methodColor = constants_1.METHOD_COLORS[item.method] ?? constants_1.METHOD_COLORS.ALL;
+    const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
+    const isLoading = item.status == null;
+    const statusColor = (0, helpers_1.getStatusColor)(item.status);
+    const durationColor = (0, helpers_1.getDurationColor)(item.duration);
+    const cardStatusColor = isLoading
+        ? AppColors_1.AppColors.darkOrange
+        : isFailed
+            ? AppColors_1.AppColors.errorColor
+            : AppColors_1.AppColors.greenColor;
+    const leftPercent = timelineTotalRange > 0
+        ? ((item.startTime - timelineMinStart) / timelineTotalRange) * 100
+        : 0;
+    const widthPercent = timelineTotalRange > 0
+        ? ((item.duration || 10) / timelineTotalRange) * 100
+        : 100;
+    const shimmerOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(isNew ? 0.35 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        if (isNew) {
+            react_native_1.Animated.timing(shimmerOpacity, {
+                toValue: 0,
+                duration: 1200,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isNew]);
+    const path = (0, helpers_1.getPath)(item.url);
+    const triggeredAt = (0, helpers_1.formatDateTime)(item.startTime);
+    const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
+    return (<TouchableScale_1.default onPress={onPress} style={[
+            styles_1.default.card,
+            {
+                borderLeftWidth: 4,
+                borderLeftColor: cardStatusColor,
+            },
+        ]}>
+      <react_native_1.View style={styles_1.default.cardBody}>
+        <react_native_1.View style={styles_1.default.cardTopRow}>
+          <react_native_1.Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
+            styles_1.default.smallCheckbox,
+            isSelected && styles_1.default.smallCheckboxChecked,
+        ]}>
+            {isSelected && (<react_native_svg_1.default width={9} height={9} viewBox="0 0 24 24" fill="none">
+                <react_native_svg_1.Path d="M20 6L9 17l-5-5" stroke="#FFF" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
+              </react_native_svg_1.default>)}
+          </react_native_1.Pressable>
+
+          <react_native_1.Text style={styles_1.default.serialNumber}>#{item.id + 1}</react_native_1.Text>
+
+          <react_native_1.View style={[styles_1.default.methodBadge, { backgroundColor: `${methodColor}15` }]}>
+            <react_native_1.Text style={[styles_1.default.methodBadgeText, { color: methodColor }]}>
+              {item.method}
+            </react_native_1.Text>
+          </react_native_1.View>
+
+          <HighlightText_1.default text={path} search={searchStr} style={styles_1.default.urlPathText} highlightStyle={styles_1.default.highlight}/>
+
+          {isJson && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.darkOrange}15`,
+                    borderColor: `${AppColors_1.AppColors.darkOrange}30`,
+                    marginLeft: 6,
+                },
+            ]}>
+              <react_native_1.Text style={[styles_1.default.chipText, { color: AppColors_1.AppColors.darkOrange }]}>
+                .json
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>
+
+        <react_native_1.View style={styles_1.default.cardBottomRow}>
+          <react_native_1.View style={styles_1.default.cardDateRow}>
+            <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
+            <react_native_1.Text style={styles_1.default.cardDateText}>{triggeredAt}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={styles_1.default.cardMetaRow}>
+            {item.duration != null && !isFailed && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${durationColor}15`,
+                    borderColor: `${durationColor}30`,
+                },
+            ]}>
+                <NetworkIcons_1.ClockIcon color={durationColor} size={10}/>
+                <react_native_1.Text style={[styles_1.default.chipText, { color: durationColor }]}>
+                  {item.duration}ms
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            <react_native_1.View style={[
+            styles_1.default.chip,
+            {
+                backgroundColor: isFailed
+                    ? `${AppColors_1.AppColors.errorColor}15`
+                    : `${statusColor}15`,
+                borderColor: isFailed
+                    ? `${AppColors_1.AppColors.errorColor}30`
+                    : `${statusColor}30`,
+            },
+        ]}>
+              <react_native_1.Text style={[
+            styles_1.default.chipText,
+            { color: isFailed ? AppColors_1.AppColors.errorColor : statusColor },
+        ]}>
+                {isFailed ? 'Failed' : item.status}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles_1.default.timelineTrack}>
+          <react_native_1.View style={[
+            styles_1.default.timelineBar,
+            {
+                left: `${Math.max(0, leftPercent)}%`,
+                width: `${Math.min(100, widthPercent)}%`,
+                backgroundColor: methodColor,
+            },
+        ]}/>
+        </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 },
+        ]}/>
+    </TouchableScale_1.default>);
+});
+exports.default = LogCard;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MetaAccordionProps } from '../types';
+declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, }: MetaAccordionProps) => React.JSX.Element;
+export default MetaAccordion;