react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/AnalyticsTabView.js

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

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

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) => {
+const AnimatedEntrance = react_1.default.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
     const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         progress.setValue(0);
@@ -68,5 +68,5 @@ const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220,
         ]}>
       {children}
     </react_native_1.Animated.View>);
-};
+});
 exports.default = AnimatedEntrance;

package/dist/commonjs/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;

package/dist/commonjs/components/ApiDetailView.js

@@ -0,0 +1,304 @@
+"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 });
+exports.ApiDetailView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const CopyButton_1 = __importDefault(require("./CopyButton"));
+const SectionHeader_1 = __importDefault(require("./SectionHeader"));
+const JsonViewer_1 = __importDefault(require("./JsonViewer"));
+const DiffViewer_1 = __importDefault(require("./DiffViewer"));
+const HeadersSection_1 = __importDefault(require("./HeadersSection"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const constants_1 = require("../constants");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+const helpers_1 = require("../helpers");
+const ApiDetailView = ({ selected, apiDetailActiveTab, onSetApiDetailActiveTab, detailSearch, onSetDetailSearch, reqExpanded, onToggleReqExpanded, resExpanded, onToggleResExpanded, showReqDiff, onToggleShowReqDiff, showResDiff, onToggleShowResDiff, prevRequestData, prevResponseData, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const detailDisplayUrl = (0, helpers_1.formatDisplayUrl)(selected.url);
+    let hostStr = '';
+    let pathStr = detailDisplayUrl;
+    let queryStr = '';
+    try {
+        const qIndex = detailDisplayUrl.indexOf('?');
+        let cleanUrlForParsing = detailDisplayUrl;
+        if (qIndex !== -1) {
+            pathStr = detailDisplayUrl.substring(0, qIndex);
+            queryStr = detailDisplayUrl.substring(qIndex);
+            cleanUrlForParsing = pathStr;
+        }
+        const schemeIndex = cleanUrlForParsing.indexOf('://');
+        if (schemeIndex !== -1) {
+            const withoutScheme = cleanUrlForParsing.substring(schemeIndex + 3);
+            const firstSlash = withoutScheme.indexOf('/');
+            if (firstSlash !== -1) {
+                hostStr = withoutScheme.substring(0, firstSlash);
+                pathStr = withoutScheme.substring(firstSlash);
+            }
+            else {
+                hostStr = withoutScheme;
+                pathStr = '/';
+            }
+        }
+    }
+    catch (e) { }
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {/* Non-scrollable details header */}
+      <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
+        <react_native_1.View style={styles_1.default.detailInfoBar}>
+          <react_native_1.View style={styles_1.default.detailInfoTop}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <react_native_1.View style={[
+            styles_1.default.methodBadge,
+            {
+                backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
+                    AppColors_1.AppColors.grayText,
+            },
+        ]}>
+                <react_native_1.Text style={styles_1.default.methodBadgeText}>{selected.method}</react_native_1.Text>
+              </react_native_1.View>
+              {selected.status != null && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}15`,
+                    borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}30`,
+                },
+            ]}>
+                  {selected.status !== 0 && (<react_native_svg_1.default width="10" height="10" viewBox="0 0 10 10">
+                      <react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
+                    </react_native_svg_1.default>)}
+                  <react_native_1.Text style={[
+                styles_1.default.chipText,
+                {
+                    color: selected.status === 0
+                        ? AppColors_1.AppColors.errorColor
+                        : (0, helpers_1.getStatusColor)(selected.status),
+                },
+            ]}>
+                    {selected.status === 0
+                ? 'Failed'
+                : String(selected.status)}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+
+              {selected.duration != null && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: 'rgba(104,75,155,0.08)',
+                    borderColor: 'rgba(104,75,155,0.18)',
+                },
+            ]}>
+                  <react_native_1.Text style={[
+                styles_1.default.chipText,
+                { color: AppColors_1.AppColors.purple },
+            ]}>
+                    {selected.duration}ms
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.detailInfoRight}>
+              <TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              </TouchableScale_1.default>
+              <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
+              <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
+              <CopyButton_1.default value={detailDisplayUrl} label="URL"/>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          <react_native_1.Pressable style={{
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+            borderRadius: 10,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.dividerColor,
+            padding: 10,
+            marginTop: 6,
+        }} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 2,
+        }}>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+            flex: 1,
+        }} numberOfLines={1}>
+                {hostStr || 'API Endpoint'}
+              </react_native_1.Text>
+              {queryStr ? (<react_native_1.View style={{
+                backgroundColor: 'rgba(104,75,155,0.08)',
+                paddingHorizontal: 5,
+                paddingVertical: 1,
+                borderRadius: 4,
+            }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 8.5,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                    Query Params
+                  </react_native_1.Text>
+                </react_native_1.View>) : null}
+            </react_native_1.View>
+            <react_native_1.Text selectable={true} style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 12,
+            color: AppColors_1.AppColors.primaryBlack,
+            marginTop: 2,
+        }} numberOfLines={2}>
+              {pathStr}
+            </react_native_1.Text>
+            {queryStr ? (<react_native_1.Text selectable={true} style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10,
+                color: AppColors_1.AppColors.grayTextWeak,
+                marginTop: 4,
+            }} numberOfLines={1}>
+                {queryStr}
+              </react_native_1.Text>) : null}
+          </react_native_1.Pressable>
+        </react_native_1.View>
+
+        {/* Tab Selection */}
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles_1.default.detailTabBar}>
+          {['response', 'request', 'headers', 'metadata'].map(tab => (<TouchableScale_1.default key={tab} style={[
+                styles_1.default.detailTab,
+                apiDetailActiveTab === tab && styles_1.default.detailTabActive,
+            ]} onPress={() => onSetApiDetailActiveTab(tab)}>
+              <react_native_1.Text style={[
+                styles_1.default.detailTabText,
+                apiDetailActiveTab === tab && styles_1.default.detailTabTextActive,
+            ]}>
+                {t(`details.tab_${tab}`)}
+              </react_native_1.Text>
+            </TouchableScale_1.default>))}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* Scrollable details content */}
+      <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 6, gap: 4 }} keyboardShouldPersistTaps="handled" nestedScrollEnabled={true}>
+        {apiDetailActiveTab === 'metadata' && (<react_native_1.View style={styles_1.default.sectionContainer}>
+            <react_native_1.View style={styles_1.default.metadataCard}>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.duration')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {selected.duration != null
+                ? `${selected.duration} ms`
+                : '—'}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.timestamp')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {new Date(selected.startTime).toLocaleString()}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.request_size')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {(0, helpers_1.getSize)(selected.request)}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.response_size')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {(0, helpers_1.getSize)(selected.response)}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {selected.caller && (<react_native_1.View style={[
+                    styles_1.default.metadataRow,
+                    { flexDirection: 'column', alignItems: 'flex-start', gap: 4 },
+                ]}>
+                  <react_native_1.Text style={styles_1.default.metadataLabel}>Caller Stack</react_native_1.Text>
+                  <react_native_1.Text style={[styles_1.default.metadataValue, { fontSize: 11 }]} selectable>
+                    {selected.caller}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </react_native_1.View>)}
+
+        {apiDetailActiveTab === 'headers' && (<>
+            <HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch}/>
+            <HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch}/>
+          </>)}
+
+        {apiDetailActiveTab === 'request' && (<>
+            <react_native_1.View style={styles_1.default.detailSearchRow}>
+              <react_native_1.View style={styles_1.default.detailSearchBox}>
+                <react_native_1.TextInput placeholder="Search request..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={onSetDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.Pressable>)}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles_1.default.sectionContainer}>
+              <SectionHeader_1.default title="Request Payload" value={selected.request} expanded={reqExpanded} onToggleExpand={onToggleReqExpanded} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={onToggleShowReqDiff}/>
+              {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen={reqExpanded} wrap/>)}
+            </react_native_1.View>
+          </>)}
+
+        {apiDetailActiveTab === 'response' && (<>
+            <react_native_1.View style={styles_1.default.detailSearchRow}>
+              <react_native_1.View style={styles_1.default.detailSearchBox}>
+                <react_native_1.TextInput placeholder="Search response..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={onSetDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.Pressable>)}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles_1.default.sectionContainer}>
+              <SectionHeader_1.default title="Response" value={selected.response} expanded={resExpanded} onToggleExpand={onToggleResExpanded} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={onToggleShowResDiff}/>
+              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded} wrap/>)}
+            </react_native_1.View>
+          </>)}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+};
+exports.ApiDetailView = ApiDetailView;
+exports.default = exports.ApiDetailView;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { NetworkLog, StatusFilter, Method, SortOrder, GroupedListItem, LocalFilter } from '../types';
+interface ApisTabViewProps {
+    search: string;
+    onSetSearch: (val: string) => void;
+    sortOrder: SortOrder;
+    onToggleSortOrder: () => void;
+    statusFilters: Set<StatusFilter>;
+    onToggleStatusFilter: (filter: StatusFilter) => void;
+    methodFilters: Set<Method>;
+    onToggleMethodFilter: (method: Method) => void;
+    availableMethods: Method[];
+    sectionFilters: Record<string, Set<LocalFilter>>;
+    onToggleSectionFilter: (section: string, filter: LocalFilter) => void;
+    groupByDomain: boolean;
+    onToggleGroupByDomain: () => void;
+    collapsedDomains: Set<string>;
+    onToggleCollapseDomain: (domain: string) => void;
+    onDeleteLogs: () => void;
+    selectedLogs: Set<number>;
+    onToggleSelectLog: (id: number) => void;
+    filteredLogs: NetworkLog[];
+    groupedListItems: GroupedListItem[];
+    onSelectLog: (log: NetworkLog) => void;
+    apisListRef: React.RefObject<FlatList<any> | null>;
+    logCounts: {
+        total: number;
+        filtered: number;
+    };
+}
+export declare const ApisTabView: React.FC<ApisTabViewProps>;
+export default ApisTabView;