react-native-inapp-inspector 2.3.18 → 2.3.20

package/src/components/CopyButton.tsx

@@ -1,87 +0,0 @@
-import React, {useState, useCallback} from 'react';
-import {Share} from 'react-native';
-
-// Components
-import TouchableScale from './TouchableScale';
-
-// Helpers
-import {copyToClipboard} from '../helpers';
-
-import {triggerNativeHaptic} from '../native/NativeInspector';
-
-// Assets
-import {TerminalIcon, FetchIcon, CopyIcon, CheckIcon} from './NetworkIcons';
-
-// Stylesheet
-import {AppColors} from '../styles/AppColors';
-import styles from '../styles';
-
-// Type Definition
-import {CopyButtonProps} from '../types';
-
-const CopyButton = React.memo(({value, label, iconType = 'copy'}: CopyButtonProps) => {
-  const [copied, setCopied] = useState<boolean>(false);
-
-  const handlePress = useCallback(() => {
-    triggerNativeHaptic('success');
-    const resolvedValue = typeof value === 'function' ? (value as Function)() : value;
-    copyToClipboard(resolvedValue, label);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }, [value, label]);
-
-  const handleLongPress = useCallback(() => {
-    try {
-      triggerNativeHaptic('medium');
-      const resolvedValue = typeof value === 'function' ? (value as Function)() : value;
-      const textToShare =
-        typeof resolvedValue === 'string'
-          ? resolvedValue
-          : JSON.stringify(resolvedValue, null, 2);
-      Share.share({
-        message: textToShare,
-        title: label,
-      });
-    } catch {}
-  }, [value, label]);
-
-  const containerStyle = [
-    styles.iconSquareBtn,
-    copied && styles.iconSquareBtnSuccess,
-  ];
-
-  const IconComponent =
-    iconType === 'terminal'
-      ? TerminalIcon
-      : iconType === 'fetch'
-      ? FetchIcon
-      : CopyIcon;
-
-  return (
-    <TouchableScale
-      accessible={true}
-      accessibilityRole="button"
-      accessibilityLabel={
-        label
-          ? copied
-            ? `${label} copied`
-            : `Copy ${label}`
-          : copied
-          ? 'Copied to clipboard'
-          : 'Copy to clipboard'
-      }
-      accessibilityHint="Double tap to copy, long press to share"
-      onPress={handlePress}
-      onLongPress={handleLongPress}
-      hitSlop={12}
-      style={containerStyle}>
-      {copied ? (
-        <CheckIcon color={AppColors.greenColor} size={14} />
-      ) : (
-        <IconComponent color={AppColors.grayTextWeak} size={14} />
-      )}
-    </TouchableScale>
-  );
-});
-
-export default CopyButton;

package/src/components/DiffViewer.tsx

@@ -1,82 +0,0 @@
-import {useTranslation} from '../i18n';
-import React, {useMemo} from 'react';
-import {View, Text, ScrollView} from 'react-native';
-
-// Helpers
-import {getDiff} from '../helpers';
-
-// Stylesheet
-import {AppColors} from '../styles/AppColors';
-import styles from '../styles';
-
-const DiffViewer = React.memo(
-  ({
-    oldData,
-    newData,
-    forceOpen,
-  }: {
-    oldData: any;
-    newData: any;
-    forceOpen?: boolean;
-  }) => {
-    const {t} = useTranslation();
-    const diffs = useMemo(() => getDiff(oldData, newData), [oldData, newData]);
-
-    if (forceOpen === false) {
-      return (
-        <View style={styles.codeBlock}>
-          <Text style={[styles.codeText, {color: AppColors.grayTextWeak}]}>
-            {t('network.diffHidden')}
-          </Text>
-        </View>
-      );
-    }
-
-    if (diffs.length === 0) {
-      return (
-        <View style={styles.codeBlock}>
-          <Text style={styles.codeText}>{t('network.noDiff')}</Text>
-        </View>
-      );
-    }
-
-    return (
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={true}
-        style={styles.codeBlockScroll}>
-        <View style={styles.diffBlock}>
-          {diffs.map((d, i) => {
-            const key = d.path === 'root' ? '' : `"${d.path}": `;
-            if (d.type === 'added') {
-              return (
-                <Text key={i} selectable={true} style={styles.diffAdded}>
-                  + <Text style={styles.codeKey}>{key}</Text>
-                  {JSON.stringify(d.newVal)}
-                </Text>
-              );
-            }
-            if (d.type === 'removed') {
-              return (
-                <Text key={i} selectable={true} style={styles.diffRemoved}>
-                  - <Text style={styles.codeKey}>{key}</Text>
-                  {JSON.stringify(d.oldVal)}
-                </Text>
-              );
-            }
-            return (
-              <Text key={i} selectable={true} style={styles.diffChanged}>
-                ~ <Text style={styles.codeKey}>{key}</Text>
-                {JSON.stringify(d.oldVal)}{' '}
-                <Text style={{color: AppColors.grayTextWeak}}>→</Text>{' '}
-                {JSON.stringify(d.newVal)}
-              </Text>
-            );
-          })}
-        </View>
-      </ScrollView>
-    );
-  },
-);
-
-export default DiffViewer;

package/src/components/DomainHeader.tsx

@@ -1,224 +0,0 @@
-import React from 'react';
-import {Pressable, View, Text} from 'react-native';
-
-// Stylesheet
-import {AppColors} from '../styles/AppColors';
-import {AppFonts} from '../styles/AppFonts';
-
-// Helpers
-import {formatDateTime} from '../helpers';
-
-// Assets
-import {
-  ChevronIcon,
-  ScreenIcon,
-  CheckIcon,
-  FailIcon,
-  ClockIcon,
-} from './NetworkIcons';
-
-// Stylesheet
-import styles from '../styles';
-
-// Type Definition
-import {LocalFilter} from '../types';
-
-const DomainHeader = ({
-  pageName,
-  color,
-  stats,
-  activeFilters,
-  onToggleFilter,
-  isCollapsed,
-  onToggleCollapse,
-  isFirst,
-  timestamp,
-}: {
-  pageName: string;
-  color: string;
-  stats: {success: number; failed: number; loading: number};
-  activeFilters: Set<LocalFilter>;
-  onToggleFilter: (pageName: string, filter: LocalFilter) => void;
-  isCollapsed: boolean;
-  onToggleCollapse: (pageName: string) => void;
-  isFirst: boolean;
-  timestamp: number;
-}) => {
-
-  const visibleStats = ['success', 'failed', 'loading'];
-
-  const total = stats.success + stats.failed + stats.loading;
-  const pctSuccess =
-    total > 0 ? Math.round((stats.success / total) * 100) : 0;
-  const pctFailed =
-    total > 0 ? Math.round((stats.failed / total) * 100) : 0;
-  const pctLoading =
-    total > 0 ? Math.round((stats.loading / total) * 100) : 0;
-
-  return (
-    <Pressable
-      style={[
-        styles.domainHeaderCard,
-        !isCollapsed && styles.domainHeaderCardExpanded,
-      ]}
-      onPress={() => onToggleCollapse(pageName)}>
-      <View style={styles.domainHeaderTopRow}>
-        <View style={styles.domainHeaderLeft}>
-          <View style={{transform: [{rotate: isCollapsed ? '-90deg' : '0deg'}], flexShrink: 0}}>
-            <ChevronIcon color={AppColors.grayTextWeak} size={13} />
-          </View>
-          <View style={[styles.domainIconWrap, {backgroundColor: `${color}18`, flexShrink: 0}]}>
-            <ScreenIcon color={color} size={14} />
-          </View>
-          <View style={{flex: 1, justifyContent: 'center', minWidth: 0}}>
-            <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0}}>
-              <Text
-                style={[styles.domainTitleText, {flexShrink: 1}]}
-                numberOfLines={1}
-                ellipsizeMode="tail">
-                {pageName}
-              </Text>
-              {total > 0 && (
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    backgroundColor:
-                      stats.failed > 0
-                        ? AppColors.red100
-                        : stats.loading > 0
-                        ? AppColors.amber100
-                        : AppColors.emerald100,
-                    paddingHorizontal: 5,
-                    paddingVertical: 1.5,
-                    borderRadius: 4,
-                    flexShrink: 0,
-                  }}>
-                  <View
-                    style={{
-                      width: 22,
-                      height: 3.5,
-                      borderRadius: 2,
-                      backgroundColor: AppColors.gray200,
-                      flexDirection: 'row',
-                      overflow: 'hidden',
-                    }}>
-                    {pctSuccess > 0 && (
-                      <View
-                        style={{
-                          width: `${pctSuccess}%`,
-                          height: '100%',
-                          backgroundColor: AppColors.emerald500,
-                        }}
-                      />
-                    )}
-                    {pctFailed > 0 && (
-                      <View
-                        style={{
-                          width: `${pctFailed}%`,
-                          height: '100%',
-                          backgroundColor: AppColors.red500,
-                        }}
-                      />
-                    )}
-                    {pctLoading > 0 && (
-                      <View
-                        style={{
-                          width: `${pctLoading}%`,
-                          height: '100%',
-                          backgroundColor: AppColors.amber500,
-                        }}
-                      />
-                    )}
-                  </View>
-                  <Text
-                    style={{
-                      fontFamily: AppFonts.interBold,
-                      fontSize: 8.5,
-                      color:
-                        stats.failed > 0
-                          ? AppColors.redErrorText
-                          : stats.loading > 0
-                          ? AppColors.amber800Warm
-                          : AppColors.emerald700,
-                    }}>
-                    {pctSuccess}%
-                  </Text>
-                </View>
-              )}
-            </View>
-            <Text style={styles.domainSummaryText} numberOfLines={1} ellipsizeMode="tail">
-              {formatDateTime(timestamp)}
-            </Text>
-          </View>
-        </View>
-
-        <View style={styles.domainStatsGroup}>
-          {visibleStats.map(type => {
-            const isActive = activeFilters.has(type as LocalFilter);
-
-            let IconComponent;
-            let activeColor = '';
-            let count = 0;
-
-            if (type === 'success') {
-              IconComponent = CheckIcon;
-              activeColor = AppColors.greenColor;
-              count = stats.success;
-            } else if (type === 'failed') {
-              IconComponent = FailIcon;
-              activeColor = AppColors.errorColor;
-              count = stats.failed;
-            } else {
-              IconComponent = ClockIcon;
-              activeColor = AppColors.darkOrange;
-              count = stats.loading;
-            }
-
-            return (
-              <Pressable
-                key={type}
-                onPress={() => onToggleFilter(pageName, type as LocalFilter)}
-                hitSlop={6}
-                style={[
-                  styles.domainStatPill,
-                  isActive && {
-                    borderColor: `${activeColor}40`,
-                    backgroundColor: `${activeColor}12`,
-                  },
-                ]}>
-                <View
-                  style={[
-                    styles.filterCheckbox,
-                    {marginRight: 0, width: 11, height: 11, borderRadius: 2.5},
-                    isActive && [
-                      styles.filterCheckboxActive,
-                      {backgroundColor: activeColor},
-                    ],
-                  ]}>
-                  {isActive && (
-                    <CheckIcon color={AppColors.white} size={7} />
-                  )}
-                </View>
-                <IconComponent
-                  color={isActive ? activeColor : AppColors.grayTextWeak}
-                  size={type === 'failed' ? 8 : 10}
-                />
-                <Text
-                  style={[
-                    styles.domainStatText,
-                    {color: isActive ? activeColor : AppColors.grayTextWeak},
-                  ]}>
-                  {count}
-                </Text>
-              </Pressable>
-            );
-          })}
-        </View>
-      </View>
-    </Pressable>
-  );
-};
-
-export default DomainHeader;

package/src/components/EmptyState.tsx

@@ -1,95 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-import {Animated, DevSettings, Alert, View, Text} from 'react-native';
-
-// Components
-import TouchableScale from './TouchableScale';
-import AnimatedEntrance from './AnimatedEntrance';
-
-// Assets
-import {EmptyRadarIcon} from './NetworkIcons';
-
-// Stylesheet
-import {AppColors} from '../styles/AppColors';
-import styles from '../styles';
-
-interface EmptyStateProps {
-  isSearch?: boolean;
-  searchQuery?: string;
-  customTitle?: string;
-  customSub?: string;
-  onClearSearch?: () => void;
-}
-
-const EmptyState = React.memo(function EmptyState({
-  isSearch,
-  searchQuery,
-  customTitle,
-  customSub,
-  onClearSearch,
-}: EmptyStateProps) {
-  const iconPulse = useRef(new Animated.Value(1)).current;
-
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(iconPulse, {
-          toValue: 1.06,
-          duration: 900,
-          useNativeDriver: false,
-        }),
-        Animated.timing(iconPulse, {
-          toValue: 1,
-          duration: 900,
-          useNativeDriver: false,
-        }),
-      ]),
-    );
-
-    loop.start();
-    return () => loop.stop();
-  }, [iconPulse]);
-
-  const handleReload = () => {
-    if (__DEV__ && DevSettings && DevSettings.reload) {
-      DevSettings.reload();
-      return;
-    }
-
-    Alert.alert(
-      'Reload',
-      'App reload is typically only available in development mode.',
-    );
-  };
-
-  return (
-    <AnimatedEntrance style={styles.emptyContainer} distance={14}>
-      <Animated.View
-        style={[styles.emptyIconWrap, {transform: [{scale: iconPulse}]}]}>
-        <EmptyRadarIcon color={AppColors.purple} size={32} />
-      </Animated.View>
-      <Text style={styles.emptyTitle}>
-        {customTitle || (isSearch ? 'No matching results' : 'No network activity')}
-      </Text>
-      <Text style={styles.emptySub}>
-        {customSub ||
-          (isSearch
-            ? searchQuery
-              ? `No items matched "${searchQuery}"`
-              : 'Try adjusting your filters or search keywords.'
-            : 'Listening for incoming API calls...')}
-      </Text>
-      {isSearch && onClearSearch && (
-        <TouchableScale style={styles.reloadBtn} onPress={onClearSearch}>
-          <Text style={styles.reloadBtnText}>Clear Search & Filters</Text>
-        </TouchableScale>
-      )}
-      {!isSearch && (
-        <TouchableScale style={styles.reloadBtn} onPress={handleReload}>
-          <Text style={styles.reloadBtnText}>Reload App</Text>
-        </TouchableScale>
-      )}
-    </AnimatedEntrance>
-  );
-});
-
-export default EmptyState;

package/src/components/EndOfListFooter.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
-import {AppColors} from '../styles/AppColors';
-import {AppFonts} from '../styles/AppFonts';
-import {CheckIcon} from './NetworkIcons';
-
-interface EndOfListFooterProps {
-  count?: number;
-  label?: string;
-  message?: string;
-}
-
-export const EndOfListFooter: React.FC<EndOfListFooterProps> = React.memo(({
-  count,
-  label,
-  message = "You've reached the end of the list",
-}) => {
-  return (
-    <View style={styles.container}>
-      <View style={styles.dividerLine} />
-      <View style={styles.badgePill}>
-        <View style={styles.iconCircle}>
-          <CheckIcon color={AppColors.purple} size={8} />
-        </View>
-        <Text style={styles.messageText}>{message}</Text>
-        {count != null && count > 0 && (
-          <View style={styles.countBadge}>
-            <Text style={styles.countText}>
-              {count} {label ? (count === 1 ? label.replace(/s$/, '') : label) : ''}
-            </Text>
-          </View>
-        )}
-      </View>
-      <View style={styles.dividerLine} />
-    </View>
-  );
-});
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    paddingTop: 16,
-    paddingBottom: Platform.OS === 'ios' ? 44 : 32,
-    gap: 8,
-  },
-  dividerLine: {
-    flex: 1,
-    height: 1,
-    backgroundColor: AppColors.dividerColor,
-    opacity: 0.7,
-  },
-  badgePill: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 999,
-    backgroundColor: AppColors.primaryLight,
-    borderWidth: 1,
-    borderColor: AppColors.grayBorderSecondary,
-    shadowColor: AppColors.black,
-    shadowOffset: {width: 0, height: 1},
-    shadowOpacity: 0.04,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  iconCircle: {
-    width: 14,
-    height: 14,
-    borderRadius: 7,
-    backgroundColor: `${AppColors.purple}18`,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  messageText: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 11,
-    color: AppColors.grayTextWeak,
-    letterSpacing: 0.1,
-  },
-  countBadge: {
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    borderRadius: 6,
-    backgroundColor: AppColors.grayBackground,
-    borderWidth: 1,
-    borderColor: AppColors.grayBorderSecondary,
-  },
-  countText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-    color: AppColors.grayTextStrong,
-  },
-});
-
-export default EndOfListFooter;