react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/Inspector/MainScreen.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MainScreen: () => React.JSX.Element;
+export default MainScreen;

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

@@ -0,0 +1,68 @@
+"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");
+const InspectorContext_1 = require("./InspectorContext");
+const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
+const FabLauncher_1 = __importDefault(require("./FabLauncher"));
+const InspectorHeader_1 = __importDefault(require("./InspectorHeader"));
+const TabBar_1 = __importDefault(require("./TabBar"));
+const NetworkTab_1 = __importDefault(require("./NetworkTab"));
+const NetworkDetail_1 = __importDefault(require("./NetworkDetail"));
+const LogDetail_1 = __importDefault(require("./LogDetail"));
+const ConsoleTab_1 = __importDefault(require("./ConsoleTab"));
+const AnalyticsTab_1 = __importDefault(require("./AnalyticsTab"));
+const ReduxTab_1 = __importDefault(require("./ReduxTab"));
+const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
+const MainScreen = () => {
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    return (<>
+      {isEnabled && <FabLauncher_1.default />}
+      <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent>
+      {visible && (<ErrorBoundary_1.default onClose={closeModal}>
+          <react_native_1.View style={styles_1.default.modalBackdrop}>
+            <react_native_1.Pressable style={styles_1.default.modalBackdropPressable} onPress={closeModal}/>
+            <react_native_1.View style={[
+                styles_1.default.modalContentCard,
+                { height: `${modalHeightPercent}%` },
+            ]}>
+              <react_native_1.StatusBar translucent backgroundColor="transparent" barStyle="light-content"/>
+
+              <InspectorHeader_1.default />
+
+              {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
+              {selected == null &&
+                selectedEvent == null &&
+                selectedLog == null &&
+                settingsPage === null ? (<TabBar_1.default />) : null}
+
+              {isReady ? (activeTab === 'analytics' ? (<AnalyticsTab_1.default />) : activeTab === 'apis' && selected == null ? (<NetworkTab_1.default />) : activeTab === 'logs' && selectedLog == null ? (<ConsoleTab_1.default />) : activeTab === 'logs' ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxTab_1.default />) : (<NetworkDetail_1.default />)) : (<react_native_1.View style={styles_1.default.empty}>
+                  <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
+                  <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
+                    Loading logs...
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+
+              {settingsPage !== null && (<react_native_1.View style={[
+                    react_native_1.StyleSheet.absoluteFill,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        zIndex: 99999,
+                    },
+                ]}>
+                  <SettingsPanel_1.default />
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </react_native_1.View>
+        </ErrorBoundary_1.default>)}
+      {hasNavigationContext && (<NavigationTracker_1.default onStateChange={setNavState}/>)}
+    </react_native_1.Modal>
+    </>);
+};
+exports.default = MainScreen;

package/dist/commonjs/components/Inspector/NavigationTracker.d.ts

@@ -0,0 +1,3 @@
+import { NavigationTrackerProps } from '../../types';
+declare const NavigationTracker: ({ onStateChange }: NavigationTrackerProps) => null;
+export default NavigationTracker;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const native_1 = require("@react-navigation/native");
+const NavigationTracker = ({ onStateChange }) => {
+    const navState = (0, native_1.useNavigationState)(state => state);
+    (0, react_1.useEffect)(() => {
+        onStateChange(navState);
+    }, [navState, onStateChange]);
+    return null;
+};
+exports.default = NavigationTracker;

package/dist/commonjs/components/Inspector/NetworkDetail.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NetworkDetail: () => React.JSX.Element;
+export default NetworkDetail;

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

@@ -0,0 +1,405 @@
+"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 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const SegmentedTabs_1 = __importDefault(require("../SegmentedTabs"));
+const MetaAccordion_1 = __importDefault(require("../MetaAccordion"));
+const HeadersSection_1 = __importDefault(require("../HeadersSection"));
+const SourcePageCard_1 = __importDefault(require("../SourcePageCard"));
+const SectionHeader_1 = __importDefault(require("../SectionHeader"));
+const JsonViewer_1 = __importDefault(require("../JsonViewer"));
+const DiffViewer_1 = __importDefault(require("../DiffViewer"));
+const CopyButton_1 = __importDefault(require("../CopyButton"));
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const constants_1 = require("../../constants");
+const helpers_1 = require("../../helpers");
+const NetworkIcons_1 = require("../NetworkIcons");
+const NetworkDetail = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = (0, InspectorContext_1.useInspector)();
+    if (!selected)
+        return null;
+    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}>
+          {(() => {
+            let schemeStr = '';
+            let hostStr = '';
+            let pathStr = detailDisplayUrl;
+            let queryStr = '';
+            try {
+                // Simple parsing fallback for React Native environments
+                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) {
+                    schemeStr = cleanUrlForParsing.substring(0, schemeIndex + 3);
+                    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 = '/';
+                    }
+                }
+                else {
+                    const firstSlash = cleanUrlForParsing.indexOf('/');
+                    if (firstSlash !== -1) {
+                        hostStr = cleanUrlForParsing.substring(0, firstSlash);
+                        pathStr = cleanUrlForParsing.substring(firstSlash);
+                    }
+                    else if (cleanUrlForParsing) {
+                        hostStr = cleanUrlForParsing;
+                        pathStr = '/';
+                    }
+                }
+            }
+            catch (e) { }
+            return (<>
+                <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] ?? constants_1.METHOD_COLORS.ALL,
+                    },
+                ]}>
+                      <react_native_1.Text style={[
+                    styles_1.default.methodBadgeText,
+                    {
+                        color: AppColors_1.AppColors.white,
+                    },
+                ]}>
+                        {selected.method}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+
+                    {selected.status != null && (<react_native_1.View style={[
+                        styles_1.default.chip,
+                        {
+                            backgroundColor: selected.status === 0
+                                ? `${AppColors_1.AppColors.errorColor}15`
+                                : `${(0, helpers_1.getStatusColor)(selected.status)}15`,
+                            borderColor: selected.status === 0
+                                ? `${AppColors_1.AppColors.errorColor}40`
+                                : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
+                        },
+                    ]}>
+                        {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_svg_1.default width={6} height={6} viewBox="0 0 10 10" fill="none">
+                            <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: `${AppColors_1.AppColors.purple}14`,
+                            borderColor: `${AppColors_1.AppColors.purple}2E`,
+                        },
+                    ]}>
+                        <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}>
+                      {schemeStr ? (<>
+                          <react_native_1.Text style={{
+                        color: AppColors_1.AppColors.slate400,
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                    }}>
+                            {schemeStr}
+                          </react_native_1.Text>
+                          {hostStr}
+                        </>) : (hostStr || 'API Endpoint')}
+                    </react_native_1.Text>
+                    {queryStr ? (<react_native_1.View style={{
+                        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                        paddingHorizontal: 5,
+                        paddingVertical: 1,
+                        borderRadius: 4,
+                    }}>
+                        <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 8.5,
+                        color: AppColors_1.AppColors.purple,
+                    }}>
+                          {t('network.queryParams')}
+                        </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>
+      </react_native_1.View>
+
+      {/* Sticky Segment Control */}
+      <SegmentedTabs_1.default tabs={[
+            {
+                key: 'metadata',
+                label: t('network.detailTabs.metadata'),
+                icon: (isActive) => (<NetworkIcons_1.StatusIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+            },
+            {
+                key: 'headers',
+                label: t('network.detailTabs.headers'),
+                icon: (isActive) => (<NetworkIcons_1.HeadersIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+            },
+            ...(selected.request != null
+                ? [
+                    {
+                        key: 'request',
+                        label: t('network.detailTabs.request'),
+                        icon: (isActive) => (<NetworkIcons_1.RequestIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+                    },
+                ]
+                : []),
+            {
+                key: 'response',
+                label: t('network.detailTabs.response'),
+                icon: (isActive) => (<NetworkIcons_1.ResponseIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+            },
+        ]} activeKey={apiDetailActiveTab} onChange={tab => {
+            (0, InspectorContext_1.animateNextLayout)();
+            setApiDetailActiveTab(tab);
+        }} style={{ marginHorizontal: 6, marginBottom: 10, marginTop: 6 }}/>
+
+      {/* Scrollable Tab Content */}
+      <react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{
+            paddingHorizontal: 6,
+            paddingBottom: 24,
+        }} showsVerticalScrollIndicator={true}>
+        {apiDetailActiveTab === 'metadata' && (<>
+            <MetaAccordion_1.default status={selected.status} statusColor={(0, helpers_1.getStatusColor)(selected.status)} duration={selected.duration} size={(0, helpers_1.getSize)(selected.response)} triggeredAt={(0, helpers_1.formatDateTime)(selected.startTime)} method={selected.method} contentType={selected.responseHeaders?.['content-type'] ||
+                selected.responseHeaders?.['Content-Type']} url={selected.url}/>
+
+            {(() => {
+                const routeInfo = logRouteMapRef.current.get(selected.id);
+                if (!routeInfo || routeInfo.path === 'Navigators')
+                    return null;
+                return <SourcePageCard_1.default routeInfo={routeInfo}/>;
+            })()}
+
+            {(() => {
+                const cType = selected.responseHeaders?.['content-type'] ||
+                    selected.responseHeaders?.['Content-Type'];
+                if (cType?.includes('image/')) {
+                    return (<react_native_1.View style={styles_1.default.imagePreviewWrapper}>
+                    <react_native_1.Image source={{ uri: selected.url }} style={styles_1.default.imagePreview} resizeMode="contain"/>
+                    <TouchableScale_1.default style={styles_1.default.imageDownloadBtn} onPress={() => react_native_1.Linking.openURL(selected.url)} hitSlop={10}>
+                      <NetworkIcons_1.DownloadIcon color={AppColors_1.AppColors.purple} size={18}/>
+                    </TouchableScale_1.default>
+                  </react_native_1.View>);
+                }
+                return null;
+            })()}
+          </>)}
+
+        {apiDetailActiveTab === 'headers' && (<>
+            <react_native_1.View style={styles_1.default.detailSearchRow}>
+              <react_native_1.View style={styles_1.default.detailSearchBox}>
+                <react_native_1.TextInput placeholder={t('network.searchHeaders')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} 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>
+
+            <HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch} resetKey={selected.id}/>
+            <HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch} resetKey={selected.id}/>
+          </>)}
+
+        {apiDetailActiveTab === 'request' &&
+            selected.request != null && (<>
+              <react_native_1.View style={styles_1.default.detailSearchRow}>
+                <react_native_1.View style={styles_1.default.detailSearchBox}>
+                  <react_native_1.TextInput placeholder={t('network.searchRequest')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                  {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} 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={t('network.requestTitle')} value={selected.request} expanded={reqExpanded} onToggleExpand={() => setReqExpanded(v => !v)} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={() => {
+                setShowReqDiff(v => !v);
+                if (!reqExpanded && !showReqDiff)
+                    setReqExpanded(true);
+            }}/>
+                {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : reqExpanded ? (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
+                    <react_native_1.Text style={[
+                    styles_1.default.codeText,
+                    { color: AppColors_1.AppColors.grayTextWeak },
+                ]}>
+                      {t('network.bodyHidden')}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+              </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={t('network.searchResponse')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.Pressable>)}
+              </react_native_1.View>
+              {selected.response != null && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 10,
+                    height: 34,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.purple}30`,
+                    backgroundColor: `${AppColors_1.AppColors.purple}10`,
+                }}>
+                  <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.purple} size={12}/>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 10.5,
+                    color: AppColors_1.AppColors.purple,
+                }}>
+                    {(0, helpers_1.getSize)(selected.response)}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+
+            <react_native_1.View style={styles_1.default.sectionContainer}>
+              <SectionHeader_1.default title={t('network.responseTitle')} value={selected.response} expanded={resExpanded} onToggleExpand={() => setResExpanded(v => !v)} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={() => {
+                setShowResDiff(v => !v);
+                if (!resExpanded && !showResDiff)
+                    setResExpanded(true);
+            }}/>
+              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : resExpanded ? (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen wrap/>) : (<react_native_1.View style={styles_1.default.codeBlock}>
+                  <react_native_1.Text style={[
+                    styles_1.default.codeText,
+                    { color: AppColors_1.AppColors.grayTextWeak },
+                ]}>
+                    {t('network.bodyHidden')}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </>)}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+};
+exports.default = NetworkDetail;

package/dist/commonjs/components/Inspector/NetworkTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NetworkTab: () => React.JSX.Element;
+export default NetworkTab;