react-native-inapp-inspector 2.3.9 → 2.3.11

package/src/components/Inspector/NetworkTab.tsx

@@ -9,13 +9,17 @@ import {
   View,
 } from 'react-native';
 import {animateNextLayout, useInspector} from './InspectorContext';
-import useAccordion from '../../customHooks/useAccordion';
 import TouchableScale from '../TouchableScale';
 import AnimatedEntrance from '../AnimatedEntrance';
 import DomainHeader from '../DomainHeader';
 import LogCard from '../LogCard';
 import EmptyState from '../EmptyState';
 import EndOfListFooter from '../EndOfListFooter';
+import NetworkFilterModal, {
+  NetworkFilterState,
+  DEFAULT_NETWORK_FILTERS,
+  isNetworkFiltersDefault,
+} from './NetworkFilterModal';
 import styles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
@@ -45,109 +49,7 @@ import {
   ShieldAlertIcon,
 } from '../NetworkIcons';
 
-const STATUS_META: Record<
-  string,
-  {color: string; Icon: (props: {color?: string; size?: number}) => React.JSX.Element}
-> = {
-  ALL: {color: AppColors.grayText, Icon: LayersIcon},
-  '2xx': {color: AppColors.greenColor, Icon: CircleCheckIcon},
-  '200': {color: AppColors.greenColor, Icon: CircleCheckIcon},
-  '3xx': {color: AppColors.warningIconGold, Icon: CircleAlertIcon},
-  '300': {color: AppColors.warningIconGold, Icon: CircleAlertIcon},
-  '4xx': {color: AppColors.darkOrange, Icon: CircleAlertIcon},
-  '400': {color: AppColors.darkOrange, Icon: CircleAlertIcon},
-  '404': {color: AppColors.darkOrange, Icon: CircleAlertIcon},
-  '5xx': {color: AppColors.errorColor, Icon: CircleXIcon},
-  '500': {color: AppColors.errorColor, Icon: CircleXIcon},
-  Failed: {color: AppColors.errorColor, Icon: CircleXIcon},
-};
 
-const getStatusMeta = (filter: string) => {
-  if (STATUS_META[filter]) return STATUS_META[filter];
-  const num = parseInt(filter, 10);
-  if (!isNaN(num)) {
-    if (num >= 200 && num < 300) return {color: AppColors.greenColor, Icon: CircleCheckIcon};
-    if (num >= 300 && num < 400) return {color: AppColors.warningIconGold, Icon: CircleAlertIcon};
-    if (num >= 400 && num < 500) return {color: AppColors.darkOrange, Icon: CircleAlertIcon};
-    if (num >= 500) return {color: AppColors.errorColor, Icon: CircleXIcon};
-  }
-  if (filter.startsWith('2')) return {color: AppColors.greenColor, Icon: CircleCheckIcon};
-  if (filter.startsWith('3')) return {color: AppColors.warningIconGold, Icon: CircleAlertIcon};
-  if (filter.startsWith('4')) return {color: AppColors.darkOrange, Icon: CircleAlertIcon};
-  if (filter.startsWith('5')) return {color: AppColors.errorColor, Icon: CircleXIcon};
-  return {color: AppColors.grayText, Icon: LayersIcon};
-};
-
-const FilterChip = React.memo(({
-  label,
-  color,
-  Icon,
-  badge,
-  active,
-  onPress,
-}: {
-  label: string;
-  color: string;
-  Icon?: (props: {color?: string; size?: number}) => React.JSX.Element;
-  badge?: string;
-  active: boolean;
-  onPress: () => void;
-}) => {
-  const iconColor = active ? color : AppColors.grayTextWeak;
-  return (
-    <TouchableScale
-      style={styles.statusFilterWrap}
-      onPress={onPress}
-      hitSlop={10}>
-      <View
-        style={[
-          styles.statusFilterChip,
-          {
-            paddingHorizontal: 9,
-            paddingVertical: 5,
-            borderRadius: 7,
-            borderWidth: 1,
-            borderColor: active ? color : `${AppColors.grayBorderSecondary}`,
-            backgroundColor: active ? `${color}14` : AppColors.grayBackground,
-          },
-          active && {
-            shadowColor: color,
-            shadowOffset: {width: 0, height: 1},
-            shadowOpacity: 0.2,
-            shadowRadius: 2,
-            elevation: 1.5,
-          },
-        ]}>
-        {badge != null ? (
-          <View
-            style={[
-              styles.methodBadgeMini,
-              {backgroundColor: badge},
-            ]}
-          />
-        ) : (
-          Icon && (
-            <Icon
-              color={iconColor}
-              size={13}
-            />
-          )
-        )}
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.statusFilterText,
-            {
-              color: active ? color : AppColors.grayText,
-              fontFamily: active ? AppFonts.interBold : AppFonts.interMedium,
-            },
-          ]}>
-          {label}
-        </Text>
-      </View>
-    </TouchableScale>
-  );
-});
 
 const NetworkTab = React.memo(() => {
   const {
@@ -185,11 +87,52 @@ const NetworkTab = React.memo(() => {
   } = useInspector();
 
   const {t} = useTranslation();
-  const filtersAccordion = useAccordion(false, 300, 260);
   const apisListRef = useRef<FlatList<any>>(null);
 
+  const [isFilterModalOpen, setIsFilterModalOpen] = React.useState(false);
   const [isSearchFocused, setIsSearchFocused] = React.useState(false);
 
+  const modalFilterState: NetworkFilterState = useMemo(
+    () => ({
+      statusCodes:
+        statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
+      methods:
+        methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
+      latency: 'all',
+      protocol: 'all',
+      sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
+    }),
+    [statusFilters, methodFilters, sortOrder],
+  );
+
+  const handleApplyNetworkFilters = useCallback(
+    (newFilters: NetworkFilterState) => {
+      if (
+        newFilters.statusCodes.has('all') ||
+        newFilters.statusCodes.size === 0
+      ) {
+        setStatusFilters(new Set());
+      } else {
+        setStatusFilters(new Set(newFilters.statusCodes));
+      }
+
+      if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
+        setMethodFilters(new Set());
+      } else {
+        setMethodFilters(
+          new Set([...newFilters.methods].map(m => m as Method)),
+        );
+      }
+
+      if (newFilters.sortBy === 'time_asc') {
+        setSortOrder('oldest');
+      } else {
+        setSortOrder('newest');
+      }
+    },
+    [setStatusFilters, setMethodFilters, setSortOrder],
+  );
+
   const quickCounts = useMemo(() => {
     let errorCount = 0;
     let successCount = 0;
@@ -755,14 +698,16 @@ const NetworkTab = React.memo(() => {
                 <TouchableScale
                   style={[
                     styles.toolbarBtn,
-                    filtersAccordion.isOpen &&
-                      styles.toolbarBtnActive,
+                    (statusFilters.size > 0 || methodFilters.size > 0) && {
+                      borderColor: AppColors.purple,
+                      backgroundColor: `${AppColors.purple}15`,
+                    },
                   ]}
-                  onPress={filtersAccordion.toggleOpen}
+                  onPress={() => setIsFilterModalOpen(true)}
                   hitSlop={6}>
                   <FilterIcon
                     color={
-                      filtersAccordion.isOpen
+                      statusFilters.size > 0 || methodFilters.size > 0
                         ? AppColors.purple
                         : AppColors.grayTextStrong
                     }
@@ -959,6 +904,66 @@ const NetworkTab = React.memo(() => {
                     </TouchableScale>
                   );
                 })}
+
+                <TouchableScale
+                  onPress={() => setIsFilterModalOpen(true)}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      paddingHorizontal: 10,
+                      paddingVertical: 4.5,
+                      borderRadius: 8,
+                      backgroundColor:
+                        statusFilters.size > 0 || methodFilters.size > 0
+                          ? `${AppColors.purple}20`
+                          : AppColors.grayBackground,
+                      borderWidth: 1,
+                      borderColor:
+                        statusFilters.size > 0 || methodFilters.size > 0
+                          ? AppColors.purple
+                          : AppColors.grayBorderSecondary,
+                      gap: 5,
+                    }}>
+                    <FilterIcon
+                      size={11}
+                      color={
+                        statusFilters.size > 0 || methodFilters.size > 0
+                          ? AppColors.purple
+                          : AppColors.grayText
+                      }
+                    />
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10.5,
+                        color:
+                          statusFilters.size > 0 || methodFilters.size > 0
+                            ? AppColors.purple
+                            : AppColors.grayText,
+                      }}>
+                      More Filters
+                    </Text>
+                    {(statusFilters.size > 0 || methodFilters.size > 0) && (
+                      <View
+                        style={{
+                          backgroundColor: AppColors.purple,
+                          paddingHorizontal: 4.5,
+                          paddingVertical: 1,
+                          borderRadius: 6,
+                        }}>
+                        <Text
+                          style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 8.5,
+                            color: AppColors.white,
+                          }}>
+                          {statusFilters.size + methodFilters.size}
+                        </Text>
+                      </View>
+                    )}
+                  </View>
+                </TouchableScale>
               </ScrollView>
             </View>
 
@@ -1141,103 +1146,10 @@ const NetworkTab = React.memo(() => {
               </View>
             )}
 
-            <Animated.View
-              style={[
-                filtersAccordion.bodyStyle,
-                {overflow: 'hidden'},
-              ]}>
-              <View style={styles.filtersContainer}>
-                <Text style={styles.filtersHeading}>
-                  STATUS
-                </Text>
-                <ScrollView
-                  horizontal
-                  showsHorizontalScrollIndicator={false}
-                  contentContainerStyle={
-                    styles.statusRowContent
-                  }>
-                  {STATUS_FILTERS.map(filter => {
-                    const isAll = filter === 'ALL';
-                    const active = isAll
-                      ? statusFilters.size === 0
-                      : statusFilters.has(filter);
-                    const meta = getStatusMeta(filter);
-                    return (
-                      <FilterChip
-                        key={filter}
-                        label={filter}
-                        color={meta.color}
-                        Icon={meta.Icon}
-                        active={active}
-                        onPress={() => {
-                          if (isAll) {
-                            setStatusFilters(new Set());
-                          } else {
-                            setStatusFilters(prev => {
-                              const next = new Set(prev);
-                              next.has(filter)
-                                ? next.delete(filter)
-                                : next.add(filter);
-                              return next;
-                            });
-                          }
-                        }}
-                      />
-                    );
-                  })}
-                </ScrollView>
-
-                <Text
-                  style={[
-                    styles.filtersHeading,
-                    {marginTop: 16},
-                  ]}>
-                  METHOD
-                </Text>
-                <ScrollView
-                  horizontal
-                  showsHorizontalScrollIndicator={false}
-                  contentContainerStyle={
-                    styles.statusRowContent
-                  }>
-                  {availableMethods.map(filter => {
-                    const isAll = filter === 'ALL';
-                    const active = isAll
-                      ? methodFilters.size === 0
-                      : methodFilters.has(filter as Method);
-                    const methodColor =
-                      METHOD_COLORS[filter as Method] ??
-                      METHOD_COLORS.ALL;
-                    return (
-                      <FilterChip
-                        key={filter}
-                        label={filter}
-                        color={methodColor}
-                        badge={methodColor}
-                        active={active}
-                        onPress={() => {
-                          if (isAll) {
-                            setMethodFilters(new Set());
-                          } else {
-                            setMethodFilters(prev => {
-                              const next = new Set(prev);
-                              next.has(filter as Method)
-                                ? next.delete(filter as Method)
-                                : next.add(filter as Method);
-                              return next;
-                            });
-                          }
-                        }}
-                      />
-                    );
-                  })}
-                </ScrollView>
-              </View>
-            </Animated.View>
-
             {(search ||
               statusFilters.size > 0 ||
-              methodFilters.size > 0) && (
+              methodFilters.size > 0 ||
+              quickFilter !== 'all') && (
               <Text style={styles.resultCount}>
                 {filteredLogs.length === logs.length
                   ? `${logs.length} requests`
@@ -1251,7 +1163,8 @@ const NetworkTab = React.memo(() => {
             isSearch={
               search.length > 0 ||
               statusFilters.size > 0 ||
-              methodFilters.size > 0
+              methodFilters.size > 0 ||
+              quickFilter !== 'all'
             }
             searchQuery={search}
             customTitle={
@@ -1263,6 +1176,7 @@ const NetworkTab = React.memo(() => {
               setSearch('');
               setStatusFilters(new Set());
               setMethodFilters(new Set());
+              setQuickFilter('all');
               setSearchScope('all');
             }}
           />
@@ -1301,6 +1215,15 @@ const NetworkTab = React.memo(() => {
           <ChevronIcon color={AppColors.white} size={18} />
         </View>
       </TouchableScale>
+
+      {/* Modern Network Filter Modal */}
+      <NetworkFilterModal
+        visible={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        filters={modalFilterState}
+        onApply={handleApplyNetworkFilters}
+        searchQuery={search}
+      />
     </View>
   );
 });

package/src/components/Inspector/SettingsPanel.tsx

@@ -56,6 +56,7 @@ import {
   BrainIcon,
   SmartphoneIcon,
   DatabaseIcon,
+  QrCodeIcon,
 } from '../NetworkIcons';
 import {LIB_VERSION} from '../../constants';
 import {copyToClipboard} from '../../helpers';
@@ -194,6 +195,13 @@ const SettingsPanel = () => {
       icon: 'storage',
       desc: 'AsyncStorage & MMKV key-value store viewer with full CRUD support',
     },
+    {
+      key: 'debugging',
+      label: 'Multi-Device Debugging',
+      category: 'diagnostic',
+      icon: 'debugging',
+      desc: 'QR Code bridge for direct Debug APK download & Metro live-reload sync',
+    },
   ] as const;
 
   // Staged selection state for checkboxes before clicking "Save Changes"
@@ -209,6 +217,7 @@ const SettingsPanel = () => {
     crash: Boolean(tabVisibility?.crash),
     device: Boolean(tabVisibility?.device),
     storage: Boolean(tabVisibility?.storage),
+    debugging: Boolean(tabVisibility?.debugging ?? true),
   }));
 
   // Synchronize staged state with tabVisibility when tabVisibility updates
@@ -223,6 +232,7 @@ const SettingsPanel = () => {
       crash: Boolean(tabVisibility?.crash),
       device: Boolean(tabVisibility?.device),
       storage: Boolean(tabVisibility?.storage),
+      debugging: Boolean(tabVisibility?.debugging ?? true),
     });
   }, [tabVisibility]);
 
@@ -823,6 +833,16 @@ const SettingsPanel = () => {
                               size={16}
                             />
                           )}
+                          {moduleItem.icon === 'debugging' && (
+                            <QrCodeIcon
+                              color={
+                                isChecked
+                                  ? AppColors.purple
+                                  : AppColors.grayTextWeak
+                              }
+                              size={16}
+                            />
+                          )}
                         </View>
 
                         {/* Titles & Status Pill */}

package/src/components/Inspector/TabBar.tsx

@@ -14,6 +14,7 @@ import {
   CrashIcon,
   SmartphoneIcon,
   DatabaseIcon,
+  QrCodeIcon,
 } from '../NetworkIcons';
 
 import {isReduxConnected} from '../../customHooks/reduxLogger';
@@ -100,9 +101,16 @@ const TabBar = React.memo(() => {
               count: 0,
               icon: 'storage',
             },
+            {
+              key: 'debugging',
+              label: 'Debugging',
+              count: 0,
+              icon: 'debugging',
+            },
           ] as const
         )
           .filter(tab => {
+            if (tab.key === 'debugging') return true;
             if (!tabVisibility?.[tab.key]) return false;
             if (tab.key === 'redux' && !isReduxAvail) return false;
             if (tab.key === 'analytics' && !isAnalyticsAvail) return false;
@@ -169,6 +177,9 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'storage' && (
                     <DatabaseIcon color={iconColor} size={14} />
                   )}
+                  {tab.icon === 'debugging' && (
+                    <QrCodeIcon color={iconColor} size={14} />
+                  )}
                   <Text
                     numberOfLines={1}
                     ellipsizeMode="tail"

package/src/components/LogCard.tsx

@@ -275,33 +275,6 @@ const LogCard = React.memo(function LogCard({
                 </Text>
               </View>
             )}
-
-            {/* In-Line Duration / Latency Pill */}
-            {item.duration != null && !isFailed && (
-              <View
-                style={[
-                  styles.chip,
-                  {
-                    backgroundColor: `${durationColor}12`,
-                    borderColor: `${durationColor}2E`,
-                    paddingHorizontal: 4.5,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                  },
-                ]}>
-                <Text
-                  style={[
-                    styles.chipText,
-                    {
-                      fontFamily: AppFonts.interBold,
-                      fontSize: 8.5,
-                      color: durationColor,
-                    },
-                  ]}>
-                  {item.duration}ms
-                </Text>
-              </View>
-            )}
           </View>
 
           <View
@@ -321,6 +294,7 @@ const LogCard = React.memo(function LogCard({
                   : isLoading
                   ? `${AppColors.darkOrange}30`
                   : `${statusColor}30`,
+                flexShrink: 0,
               },
             ]}>
             {renderStatusIcon()}
@@ -359,6 +333,7 @@ const LogCard = React.memo(function LogCard({
                 alignItems: 'center',
                 justifyContent: 'center',
                 marginRight: 4,
+                flexShrink: 0,
               }}>
               <GlobeIcon color={AppColors.skyBlue} size={11} />
             </View>
@@ -411,8 +386,8 @@ const LogCard = React.memo(function LogCard({
 
         {/* Row 3: Footer (Timestamp & Origin on Left, Response Size & Duration on Right) */}
         <View style={styles.cardFooterRow}>
-          <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1, minWidth: 0}}>
-            <View style={styles.cardDateRow}>
+          <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, flex: 1, minWidth: 0, marginRight: 8}}>
+            <View style={[styles.cardDateRow, {flexShrink: 0}]}>
               <CalendarIcon color={AppColors.grayTextWeak} size={10} />
               <Text style={styles.cardDateText}>{triggeredAt}</Text>
             </View>
@@ -431,7 +406,7 @@ const LogCard = React.memo(function LogCard({
                     paddingVertical: 1,
                     borderRadius: 4,
                     flexShrink: 1,
-                    maxWidth: 160,
+                    minWidth: 0,
                   },
                 ]}>
                 <PinIcon color={AppColors.skyBlue} size={8.5} />

package/src/components/NetworkIcons.tsx

@@ -2219,3 +2219,69 @@ export const PlusIcon = ({
   </Svg>
 );
 
+export const LockIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect
+      x="3"
+      y="11"
+      width="18"
+      height="11"
+      rx="2"
+      ry="2"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M7 11V7a5 5 0 0 1 10 0v4"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const QrCodeIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Rect
+      x="3"
+      y="3"
+      width="7"
+      height="7"
+      rx="1.5"
+      stroke={color}
+      strokeWidth="2"
+    />
+    <Rect
+      x="14"
+      y="3"
+      width="7"
+      height="7"
+      rx="1.5"
+      stroke={color}
+      strokeWidth="2"
+    />
+    <Rect
+      x="3"
+      y="14"
+      width="7"
+      height="7"
+      rx="1.5"
+      stroke={color}
+      strokeWidth="2"
+    />
+    <Path
+      d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z"
+      fill={color}
+    />
+  </Svg>
+);
+