react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/components/AnalyticsEventCard.js

@@ -2,44 +2,85 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
+import { formatGap, formatTime } from '../helpers';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
 // ─── Palette (Google Analytics colours) ───────────────────────────────────────
 const EVENT_PALETTE = [
-    '#4285F4', // blue
-    '#34A853', // green
-    '#9C27B0', // purple
-    '#00897B', // teal
-    '#E53935', // red
-    '#F57C00', // orange
-    '#1565C0', // dark blue
-    '#2E7D32', // dark green
+    AppColors.googleBlue, // blue
+    AppColors.googleGreen, // green
+    AppColors.googlePurple, // purple
+    AppColors.googleTeal, // teal
+    AppColors.googleRed, // red
+    AppColors.googleOrange, // orange
+    AppColors.blue700, // dark blue
+    AppColors.materialGreen, // dark green
 ];
 export function getEventColor(name) {
+    const safeName = typeof name === 'string' ? name : String(name || '');
     let hash = 0;
-    for (let i = 0; i < name.length; i++) {
-        hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    for (let i = 0; i < safeName.length; i++) {
+        hash = (hash * 31 + safeName.charCodeAt(i)) | 0;
     }
     return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
 }
 // ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatTime(ts) {
-    const d = new Date(ts);
-    const hh = String(d.getHours()).padStart(2, '0');
-    const mm = String(d.getMinutes()).padStart(2, '0');
-    const ss = String(d.getSeconds()).padStart(2, '0');
-    const ms = String(d.getMilliseconds()).padStart(3, '0');
-    return `${hh}:${mm}:${ss}.${ms}`;
+function getEventCategory(name) {
+    if (!name)
+        return 'Custom';
+    const lowercaseName = name.toLowerCase();
+    if (lowercaseName === 'screen_view' || lowercaseName === 'page_view') {
+        return 'Page View';
+    }
+    // Ecommerce events
+    const ecommerceEvents = [
+        'purchase', 'add_to_cart', 'begin_checkout', 'view_item',
+        'select_item', 'remove_from_cart', 'view_cart',
+        'add_shipping_info', 'add_payment_info', 'refund',
+        'view_item_list', 'select_promotion', 'view_promotion'
+    ];
+    if (ecommerceEvents.includes(lowercaseName)) {
+        return 'Ecommerce';
+    }
+    // Firebase System Auto-events
+    const systemEvents = [
+        'first_open', 'session_start', 'user_engagement',
+        'app_clear_data', 'app_exception', 'app_update', 'os_update',
+        'notification_receive', 'notification_open', 'notification_dismiss',
+        'screen_active', 'screen_inactive'
+    ];
+    if (systemEvents.includes(lowercaseName) || lowercaseName.startsWith('firebase_') || lowercaseName.startsWith('_')) {
+        return 'System';
+    }
+    return 'Custom';
 }
-function formatGap(ms) {
-    if (ms < 1000)
-        return `+${ms}ms`;
-    const s = Math.round(ms / 1000);
-    if (s < 60)
-        return `+${s}s`;
-    const m = Math.floor(s / 60);
-    const rem = s % 60;
-    return rem > 0 ? `+${m}m ${rem}s` : `+${m}m`;
+function getCategoryColors(category) {
+    switch (category) {
+        case 'Page View':
+            return {
+                bg: AppColors.blueBg,
+                border: AppColors.blueBorder,
+                text: AppColors.blue800,
+            };
+        case 'Ecommerce':
+            return {
+                bg: AppColors.greenBg,
+                border: AppColors.greenBorder,
+                text: AppColors.materialGreen,
+            };
+        case 'System':
+            return {
+                bg: AppColors.greyBg,
+                border: AppColors.greyBorder,
+                text: AppColors.grey600,
+            };
+        default:
+            return {
+                bg: AppColors.purpleBg,
+                border: AppColors.purpleBorder,
+                text: AppColors.purpleText,
+            };
+    }
 }
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
@@ -89,6 +130,19 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
               <HighlightText text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
             </View>
 
+            {(() => {
+            const category = getEventCategory(event.name);
+            const tagColors = getCategoryColors(category);
+            return (<View style={[
+                    cardStyles.categoryBadge,
+                    { backgroundColor: tagColors.bg, borderColor: tagColors.border },
+                ]}>
+                  <Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
+                    {category}
+                  </Text>
+                </View>);
+        })()}
+
             {event.count !== undefined ? (<View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
@@ -112,20 +166,24 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
         {/* Bottom Row: Metadata Chips & Sparkline */}
         <View style={cardStyles.cardBody}>
           <View style={cardStyles.chipsRow}>
-            {computedScreenName ||
-            event.screenName ||
-            event.params?.firebase_screen ||
-            event.params?.screen_name ||
-            event.params?.firebase_screen_class ? (<View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
-                <View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
-                <Text style={[cardStyles.chipText, { color: AppColors.grayText }]} numberOfLines={1}>
-                  {computedScreenName ||
+            {(() => {
+            const rawScreenName = computedScreenName ||
                 event.screenName ||
                 event.params?.firebase_screen ||
                 event.params?.screen_name ||
-                event.params?.firebase_screen_class}
-                </Text>
-              </View>) : null}
+                event.params?.firebase_screen_class;
+            if (!rawScreenName)
+                return null;
+            const screenNameStr = typeof rawScreenName === 'object'
+                ? JSON.stringify(rawScreenName)
+                : String(rawScreenName);
+            return (<View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
+                  <View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
+                  <Text style={[cardStyles.chipText, { color: AppColors.grayText }]} numberOfLines={1}>
+                    {screenNameStr}
+                  </Text>
+                </View>);
+        })()}
 
             <View style={[cardStyles.chip, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
               <Text style={[cardStyles.chipText, { color: AppColors.grayText }]}>
@@ -140,8 +198,8 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<View style={[cardStyles.chip, { backgroundColor: '#FEF3C7', borderColor: '#FDE68A' }]}>
-                    <Text style={[cardStyles.chipText, { color: '#D97706', fontFamily: AppFonts.interBold }]}>
+                return (<View style={[cardStyles.chip, { backgroundColor: AppColors.amberBg, borderColor: AppColors.amberBorder }]}>
+                    <Text style={[cardStyles.chipText, { color: AppColors.amber700, fontFamily: AppFonts.interBold }]}>
                       🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
                     </Text>
                   </View>);
@@ -155,8 +213,8 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
             if (isPrimitive) {
                 const currencyStr = typeof currency === 'string' || typeof currency === 'number' ? String(currency) : '';
-                return (<View style={[cardStyles.chip, { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' }]}>
-                    <Text style={[cardStyles.chipText, { color: '#059669', fontFamily: AppFonts.interBold }]}>
+                return (<View style={[cardStyles.chip, { backgroundColor: AppColors.emeraldBg, borderColor: AppColors.emeraldBorder }]}>
+                    <Text style={[cardStyles.chipText, { color: AppColors.emerald600, fontFamily: AppFonts.interBold }]}>
                       💰 {String(val)} {currencyStr}
                     </Text>
                   </View>);
@@ -185,12 +243,12 @@ const cardStyles = StyleSheet.create({
         letterSpacing: 0.5,
     },
     modernCard: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors.white,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#EFEFEF',
+        borderColor: AppColors.dividerColor,
         padding: 8,
-        shadowColor: '#000',
+        shadowColor: AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
@@ -220,7 +278,7 @@ const cardStyles = StyleSheet.create({
         color: AppColors.grayTextWeak,
     },
     highlight: {
-        backgroundColor: '#FFE44D',
+        backgroundColor: AppColors.yellowHighlight,
         color: AppColors.primaryBlack,
         borderRadius: 2,
     },
@@ -258,8 +316,8 @@ const cardStyles = StyleSheet.create({
         marginRight: 4,
     },
     duplicateBadge: {
-        backgroundColor: '#FFE4E6',
-        borderColor: '#FCC2D7',
+        backgroundColor: AppColors.roseBg,
+        borderColor: AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
         paddingVertical: 2,
@@ -268,7 +326,19 @@ const cardStyles = StyleSheet.create({
     duplicateText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9,
-        color: '#E11D48',
+        color: AppColors.rose600,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    categoryBadge: {
+        borderWidth: 1,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    categoryText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
     },

package/dist/esm/components/AnalyticsGraph.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-import { AnalyticsEvent } from '../types';
-interface Props {
-    event: AnalyticsEvent;
-    accentColor: string;
-}
-declare const AnalyticsGraph: ({ event, accentColor }: Props) => React.JSX.Element;
+import { AnalyticsGraphProps } from '../types';
+declare const AnalyticsGraph: ({ event, accentColor }: AnalyticsGraphProps) => React.JSX.Element;
 export default AnalyticsGraph;

package/dist/esm/components/AnalyticsGraph.js

@@ -53,7 +53,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
     const typeData = [
         { label: 'Strings', value: paramTypes.string, color: AppColors.purple },
         { label: 'Numbers', value: paramTypes.number, color: AppColors.skyBlue },
-        { label: 'Booleans', value: paramTypes.boolean, color: '#F59E0B' }, // Amber
+        { label: 'Booleans', value: paramTypes.boolean, color: AppColors.amber500 }, // Amber
         { label: 'Objects', value: paramTypes.object, color: AppColors.greenColor },
     ].filter(d => d.value > 0);
     strings.sort((a, b) => b.value - a.value);
@@ -94,7 +94,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
           <BarChart data={filteredItems.map((item, i) => ({
                 label: item.item_name || item.item_id || `Item ${i + 1}`,
                 value: item.price,
-            }))} accentColor={AppColors.successGreen || '#22C55E'} maxBarWidth={maxBarWidth} isGradient={false}/>
+            }))} accentColor={AppColors.successGreen} maxBarWidth={maxBarWidth} isGradient={false}/>
         </View>)}
     </View>);
 };
@@ -181,12 +181,12 @@ const GaugeChart = ({ data, accentColor, }) => {
             paddingTop: 6,
             paddingBottom: 6,
         }}>
-      {data.map((d, i) => {
+      {data.map(d => {
             const fillPct = Math.min(Math.abs(d.value) / maxVal, 1);
             const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001); // avoid exact 0
             return (<View key={d.label} style={{ alignItems: 'center', width: 70 }}>
             <Svg width="60" height="60" viewBox="0 0 60 60">
-              <Circle cx="30" cy="30" r={radius} stroke="#F3F4F6" strokeWidth={stroke} fill="none"/>
+              <Circle cx="30" cy="30" r={radius} stroke={AppColors.grayBorderSecondary} strokeWidth={stroke} fill="none"/>
               <Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
             </Svg>
             <View style={{
@@ -248,12 +248,12 @@ const CalendarChart = ({ data, accentColor, }) => {
             <View style={{
                     width: 58,
                     height: 62,
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors.white,
                     borderRadius: 8,
                     borderWidth: 1,
                     borderColor: AppColors.grayBorderSecondary,
                     overflow: 'hidden',
-                    shadowColor: '#000',
+                    shadowColor: AppColors.black,
                     shadowOpacity: 0.05,
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
@@ -269,7 +269,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                 <Text style={{
                     fontFamily: AppFonts.interBold,
                     fontSize: 9,
-                    color: '#FFF',
+                    color: AppColors.white,
                     textTransform: 'uppercase',
                     letterSpacing: 0.5,
                 }}>
@@ -281,7 +281,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                     flex: 1,
                     justifyContent: 'center',
                     alignItems: 'center',
-                    backgroundColor: '#FAFAFA',
+                    backgroundColor: AppColors.grayBackground,
                 }}>
                 <Text style={{
                     fontFamily: AppFonts.interBold,

package/dist/esm/components/AnalyticsTabView.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AnalyticsEvent } from '../types';
+interface AnalyticsTabViewProps {
+    analyticsSearch: string;
+    onSetAnalyticsSearch: (val: string) => void;
+    onDeleteEvents: () => void;
+    selectedEvent: AnalyticsEvent | null;
+    onSelectEvent: (event: AnalyticsEvent | null) => void;
+    filteredAnalyticsEvents: AnalyticsEvent[];
+    visibleAnalyticsEvents: AnalyticsEvent[];
+    currentUserProperties: Record<string, any>;
+    currentUserId: string | null;
+}
+export declare const AnalyticsTabView: React.FC<AnalyticsTabViewProps>;
+export default AnalyticsTabView;

package/dist/esm/components/AnalyticsTabView.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import { FlatList, Pressable, Text, TextInput, View, } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from './TouchableScale';
+import AnalyticsEventCard from './AnalyticsEventCard';
+import AnalyticsDetail from './AnalyticsDetail';
+import EmptyState from './EmptyState';
+import AnimatedEntrance from './AnimatedEntrance';
+import { SearchIcon, ClearIcon, WipeIcon, UserIcon, } from './NetworkIcons';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import styles from '../styles';
+export const AnalyticsTabView = React.memo(({ analyticsSearch, onSetAnalyticsSearch, onDeleteEvents, selectedEvent, onSelectEvent, filteredAnalyticsEvents, visibleAnalyticsEvents, currentUserProperties, currentUserId, }) => {
+    const { t } = useTranslation();
+    const [userPropsExpanded, setUserPropsExpanded] = React.useState(false);
+    const renderItem = React.useCallback(({ item, index }) => (<AnimatedEntrance index={index} distance={8}>
+        <AnalyticsEventCard event={item} searchStr={analyticsSearch} onPress={() => onSelectEvent(item)}/>
+      </AnimatedEntrance>), [analyticsSearch, onSelectEvent]);
+    const keyExtractor = React.useCallback((item, index) => item.id != null ? item.id.toString() : index.toString(), []);
+    const renderAnalyticsHeader = () => {
+        const hasProps = Object.keys(currentUserProperties ?? {}).length > 0;
+        const total = visibleAnalyticsEvents.length;
+        const filtered = filteredAnalyticsEvents.length;
+        return (<View style={{ paddingHorizontal: 16, paddingTop: 8, paddingBottom: 4 }}>
+        {(hasProps || currentUserId) && (<View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    marginBottom: 10,
+                    overflow: 'hidden',
+                }}>
+            <Pressable onPress={() => setUserPropsExpanded(v => !v)} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: 10,
+                    backgroundColor: AppColors.grayBackground,
+                }}>
+              <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                <UserIcon color={AppColors.purple} size={14}/>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 12,
+                    color: AppColors.primaryBlack,
+                }}>
+                  {t('analytics.user_context')}
+                </Text>
+                {currentUserId && (<View style={{
+                        backgroundColor: 'rgba(104,75,155,0.1)',
+                        paddingHorizontal: 6,
+                        paddingVertical: 1,
+                        borderRadius: 4,
+                    }}>
+                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9,
+                        color: AppColors.purple,
+                    }}>
+                      {t('analytics.id')}: {currentUserId}
+                    </Text>
+                  </View>)}
+              </View>
+              <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 11,
+                    color: AppColors.purple,
+                }}>
+                {userPropsExpanded ? t('analytics.hide_props') : t('analytics.show_props')}
+              </Text>
+            </Pressable>
+
+            {userPropsExpanded && hasProps && (<View style={{
+                        padding: 10,
+                        borderTopWidth: 1,
+                        borderTopColor: AppColors.dividerColor,
+                        gap: 4,
+                    }}>
+                {Object.entries(currentUserProperties ?? {}).map(([k, v]) => (<View key={k} style={{
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                        }}>
+                    <Text style={{
+                            fontFamily: AppFonts.interMedium,
+                            fontSize: 11,
+                            color: AppColors.grayTextWeak,
+                        }}>
+                      {k}
+                    </Text>
+                    <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors.primaryBlack,
+                        }}>
+                      {String(v)}
+                    </Text>
+                  </View>))}
+              </View>)}
+          </View>)}
+
+        <Text style={[styles.resultCount, { marginBottom: 4 }]}>
+          {t('filters.showing_analytics', { filtered, total })}
+        </Text>
+      </View>);
+    };
+    return (<View style={{ flex: 1 }}>
+      {selectedEvent != null ? (<AnalyticsDetail event={selectedEvent} onClose={() => onSelectEvent(null)}/>) : (<View style={{ flex: 1 }}>
+          <View style={{
+                backgroundColor: AppColors.white,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors.dividerColor,
+                paddingBottom: 6,
+            }}>
+            <View style={[
+                styles.toolbarRow,
+                { marginTop: 12, marginBottom: 8 },
+            ]}>
+              <View style={styles.searchContainer}>
+                <SearchIcon color={AppColors.grayTextWeak} size={16}/>
+                <TextInput placeholder={t('search.analytics_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={analyticsSearch} onChangeText={onSetAnalyticsSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                {analyticsSearch.length > 0 && (<Pressable onPress={() => onSetAnalyticsSearch('')} hitSlop={10} style={styles.clearBtn}>
+                    <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+                  </Pressable>)}
+              </View>
+
+              <View style={styles.toolbarRight}>
+                <TouchableScale style={[
+                styles.toolbarBtn,
+                {
+                    borderColor: 'rgba(255,46,87,0.22)',
+                    backgroundColor: 'rgba(255,46,87,0.06)',
+                },
+            ]} onPress={onDeleteEvents} hitSlop={6}>
+                  <WipeIcon color={AppColors.errorColor} size={15}/>
+                </TouchableScale>
+              </View>
+            </View>
+          </View>
+
+          <FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={renderAnalyticsHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={analyticsSearch.length > 0}/>} contentContainerStyle={[
+                styles.listContent,
+                filteredAnalyticsEvents.length === 0 && { flexGrow: 1 },
+            ]} keyboardShouldPersistTaps="handled"/>
+        </View>)}
+    </View>);
+});
+export default AnalyticsTabView;

package/dist/esm/components/AnimatedEntrance.d.ts

@@ -8,5 +8,5 @@ interface AnimatedEntranceProps {
     index?: number;
     style?: ViewStyle | ViewStyle[];
 }
-declare const AnimatedEntrance: ({ children, delay, distance, duration, index, style, }: AnimatedEntranceProps) => React.JSX.Element;
+declare const AnimatedEntrance: React.NamedExoticComponent<AnimatedEntranceProps>;
 export default AnimatedEntrance;

package/dist/esm/components/AnimatedEntrance.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated } from 'react-native';
-const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) => {
+const AnimatedEntrance = React.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
     const progress = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         progress.setValue(0);
@@ -33,5 +33,5 @@ const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220,
         ]}>
       {children}
     </Animated.View>);
-};
+});
 export default AnimatedEntrance;

package/dist/esm/components/ApiDetailView.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NetworkLog } from '../types';
+import { ApiDetailTab } from '../enums';
+interface ApiDetailViewProps {
+    selected: NetworkLog;
+    apiDetailActiveTab: ApiDetailTab | 'metadata' | 'headers' | 'request' | 'response';
+    onSetApiDetailActiveTab: (tab: ApiDetailTab | 'metadata' | 'headers' | 'request' | 'response') => void;
+    detailSearch: string;
+    onSetDetailSearch: (val: string) => void;
+    reqExpanded: boolean;
+    onToggleReqExpanded: () => void;
+    resExpanded: boolean;
+    onToggleResExpanded: () => void;
+    showReqDiff: boolean;
+    onToggleShowReqDiff: () => void;
+    showResDiff: boolean;
+    onToggleShowResDiff: () => void;
+    prevRequestData: any;
+    prevResponseData: any;
+}
+export declare const ApiDetailView: React.FC<ApiDetailViewProps>;
+export default ApiDetailView;