react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/components/ApiDetailView.js

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

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

package/dist/esm/components/ApisTabView.js

@@ -0,0 +1,196 @@
+import React from 'react';
+import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useTranslation } from 'react-i18next';
+import TouchableScale from './TouchableScale';
+import LogCard from './LogCard';
+import DomainHeader from './DomainHeader';
+import EmptyState from './EmptyState';
+import AnimatedEntrance from './AnimatedEntrance';
+import { SearchIcon, ClearIcon, SortArrowIcon, FilterIcon, WipeIcon, ChevronIcon, } from './NetworkIcons';
+import { STATUS_FILTERS, METHOD_COLORS } from '../constants';
+import { getDomainColor } from '../helpers';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import styles from '../styles';
+export const ApisTabView = React.memo(({ search, onSetSearch, sortOrder, onToggleSortOrder, statusFilters, onToggleStatusFilter, methodFilters, onToggleMethodFilter, availableMethods, sectionFilters, onToggleSectionFilter, groupByDomain, onToggleGroupByDomain, collapsedDomains, onToggleCollapseDomain, onDeleteLogs, selectedLogs, onToggleSelectLog, filteredLogs, groupedListItems, onSelectLog, apisListRef, logCounts, }) => {
+    const { t } = useTranslation();
+    const isSearchOrFilter = search.length > 0 || statusFilters.size > 0 || methodFilters.size > 0;
+    const renderItem = React.useCallback(({ item, index }) => {
+        if ('type' in item && item.type === 'header') {
+            const isCollapsed = collapsedDomains.has(item.domain);
+            const secFilter = sectionFilters[item.domain] ?? new Set();
+            return (<DomainHeader domain={item.domain} count={item.count} color={getDomainColor(item.domain)} isCollapsed={isCollapsed} onToggle={() => onToggleCollapseDomain(item.domain)} activeFilters={secFilter} onToggleFilter={f => onToggleSectionFilter(item.domain, f)} has2xx={item.has2xx} has4xx={item.has4xx} has5xx={item.has5xx}/>);
+        }
+        const log = item;
+        return (<AnimatedEntrance index={index} distance={8}>
+          <LogCard item={log} onPress={() => onSelectLog(log)} isSelected={selectedLogs.has(log.id)} onSelect={() => onToggleSelectLog(log.id)} searchStr={search}/>
+        </AnimatedEntrance>);
+    }, [
+        collapsedDomains,
+        onToggleCollapseDomain,
+        sectionFilters,
+        onToggleSectionFilter,
+        onSelectLog,
+        selectedLogs,
+        onToggleSelectLog,
+        search,
+    ]);
+    return (<View style={{ flex: 1 }}>
+      {/* Search and Filters Toolbar */}
+      <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.apis_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={onSetSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {search.length > 0 && (<Pressable onPress={() => onSetSearch('')} hitSlop={10} style={styles.clearBtn}>
+                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
+              </Pressable>)}
+          </View>
+
+          <View style={styles.toolbarRight}>
+            <TouchableScale style={styles.toolbarBtn} onPress={onToggleSortOrder} hitSlop={10}>
+              <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={sortOrder === 'newest' ? 'down' : 'up'}/>
+            </TouchableScale>
+            <TouchableScale style={[
+            styles.toolbarBtn,
+            {
+                borderColor: 'rgba(255,46,87,0.22)',
+                backgroundColor: 'rgba(255,46,87,0.06)',
+            },
+        ]} onPress={onDeleteLogs} hitSlop={6}>
+              <WipeIcon color={AppColors.errorColor} size={15}/>
+            </TouchableScale>
+          </View>
+        </View>
+
+        {/* Filter Chips Scroll View */}
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        }}>
+          <TouchableScale onPress={onToggleGroupByDomain}>
+            <View style={[
+            styles.statusFilterChip,
+            groupByDomain && {
+                borderColor: AppColors.purple,
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+            },
+        ]}>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                <FilterIcon size={12} color={groupByDomain ? AppColors.purple : AppColors.grayTextStrong}/>
+                <Text style={[
+            styles.statusFilterText,
+            groupByDomain && {
+                color: AppColors.purple,
+                fontFamily: AppFonts.interBold,
+            },
+        ]}>
+                  {t('filters.group_by_domain')}
+                </Text>
+              </View>
+            </View>
+          </TouchableScale>
+
+          {/* Status Filter Chips */}
+          {STATUS_FILTERS.map(f => {
+            const active = statusFilters.has(f);
+            const badgeColor = f === '2xx'
+                ? AppColors.greenColor
+                : f === '3xx'
+                    ? AppColors.skyBlue
+                    : f === '4xx'
+                        ? AppColors.lightOrange
+                        : f === '5xx'
+                            ? AppColors.errorColor
+                            : AppColors.grayText;
+            return (<TouchableScale key={f} onPress={() => onToggleStatusFilter(f)}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: badgeColor,
+                        backgroundColor: `${badgeColor}15`,
+                    },
+                ]}>
+                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                    <Svg width="8" height="8" viewBox="0 0 8 8">
+                      <Circle cx="4" cy="4" r="4" fill={active ? badgeColor : AppColors.grayTextWeak}/>
+                    </Svg>
+                    <Text style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: badgeColor,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                      {f}
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>);
+        })}
+
+          {/* Method Filter Chips */}
+          {availableMethods.map(method => {
+            const active = methodFilters.has(method);
+            const mColor = METHOD_COLORS[method] ?? AppColors.purple;
+            return (<TouchableScale key={method} onPress={() => onToggleMethodFilter(method)}>
+                <View style={[
+                    styles.statusFilterChip,
+                    active && {
+                        borderColor: mColor,
+                        backgroundColor: `${mColor}15`,
+                    },
+                ]}>
+                  <Text style={[
+                    styles.statusFilterText,
+                    active && {
+                        color: mColor,
+                        fontFamily: AppFonts.interBold,
+                    },
+                ]}>
+                    {method}
+                  </Text>
+                </View>
+              </TouchableScale>);
+        })}
+        </ScrollView>
+      </View>
+
+      {/* Main List */}
+      <FlatList ref={apisListRef} data={groupByDomain ? groupedListItems : filteredLogs} keyExtractor={(item, index) => 'id' in item && item.id != null
+            ? item.id.toString()
+            : 'domain' in item
+                ? `domain-${item.domain}`
+                : index.toString()} ListHeaderComponent={<Text style={[styles.resultCount, { marginBottom: 4, marginTop: 12 }]}>
+            {t('filters.showing_requests', {
+                filtered: logCounts.filtered,
+                total: logCounts.total,
+            })}
+          </Text>} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={isSearchOrFilter}/>} contentContainerStyle={[
+            styles.listContent,
+            filteredLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+
+      {/* Scroll to Top Button */}
+      <TouchableScale onPress={() => {
+            apisListRef.current?.scrollToOffset({
+                offset: 0,
+                animated: true,
+            });
+        }} hitSlop={10} style={styles.scrollTopBtn}>
+        <View style={{ transform: [{ rotate: '180deg' }] }}>
+          <ChevronIcon color={AppColors.white} size={18}/>
+        </View>
+      </TouchableScale>
+    </View>);
+});
+export default ApisTabView;

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

@@ -1,8 +1,4 @@
 import React from 'react';
-interface CodeSnippetProps {
-    code: string;
-    language: 'html' | 'css' | 'javascript';
-    search?: string;
-}
+import { CodeSnippetProps } from '../types';
 declare const CodeSnippet: React.FC<CodeSnippetProps>;
 export default CodeSnippet;