react-native-inapp-inspector 1.1.17 → 1.1.19

package/dist/esm/assets/svgAssets.js

@@ -1,14 +0,0 @@
-export const PRETTY_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z" fill="currentColor" opacity="0.9"/>
-  <path d="M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z" fill="currentColor" opacity="0.6"/>
-</svg>`;
-export const RAW_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="1" y="2" width="10" height="1.5" rx="0.75" fill="currentColor" opacity="0.9"/>
-  <rect x="1" y="5.5" width="14" height="1.5" rx="0.75" fill="currentColor" opacity="0.6"/>
-  <rect x="1" y="9" width="8" height="1.5" rx="0.75" fill="currentColor" opacity="0.45"/>
-  <rect x="1" y="12.5" width="12" height="1.5" rx="0.75" fill="currentColor" opacity="0.3"/>
-</svg>`;
-export const TABLE_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
-  <path d="M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14" stroke="currentColor" stroke-width="0.8" opacity="0.5"/>
-</svg>`;

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

@@ -1,15 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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/ApiDetailView.d.ts

@@ -1,22 +0,0 @@
-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/esm/components/ApiDetailView.js

@@ -1,264 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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;