react-native-inapp-inspector 2.3.9 → 2.3.11

package/dist/esm/components/Inspector/NetworkTab.js

@@ -1,99 +1,53 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Animated, FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { FlatList, Pressable, ScrollView, Text, TextInput, 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 from './NetworkFilterModal';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { STATUS_FILTERS, METHOD_COLORS } from '../../constants';
+import { METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
 import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, GlobeIcon, RequestIcon, ResponseIcon, HeadersIcon, AtomIcon, BoltIcon, ShieldAlertIcon, } from '../NetworkIcons';
-const STATUS_META = {
-    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) => {
-    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, }) => {
-    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 { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
-    const filtersAccordion = useAccordion(false, 300, 260);
     const apisListRef = useRef(null);
+    const [isFilterModalOpen, setIsFilterModalOpen] = React.useState(false);
     const [isSearchFocused, setIsSearchFocused] = React.useState(false);
+    const modalFilterState = 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) => {
+        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)));
+        }
+        if (newFilters.sortBy === 'time_asc') {
+            setSortOrder('oldest');
+        }
+        else {
+            setSortOrder('newest');
+        }
+    }, [setStatusFilters, setMethodFilters, setSortOrder]);
     const quickCounts = useMemo(() => {
         let errorCount = 0;
         let successCount = 0;
@@ -520,10 +474,12 @@ const NetworkTab = React.memo(() => {
 
                 <TouchableScale style={[
                 styles.toolbarBtn,
-                filtersAccordion.isOpen &&
-                    styles.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
-                  <FilterIcon color={filtersAccordion.isOpen
+                (statusFilters.size > 0 || methodFilters.size > 0) && {
+                    borderColor: AppColors.purple,
+                    backgroundColor: `${AppColors.purple}15`,
+                },
+            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+                  <FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors.purple
                 : AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
@@ -685,6 +641,51 @@ const NetworkTab = React.memo(() => {
                       </View>
                     </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>
 
@@ -833,86 +834,24 @@ const NetworkTab = React.memo(() => {
                 </TouchableScale>
               </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);
-                const methodColor = METHOD_COLORS[filter] ??
-                    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)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </ScrollView>
-              </View>
-            </Animated.View>
-
             {(search ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<Text style={styles.resultCount}>
+                methodFilters.size > 0 ||
+                quickFilter !== 'all') && (<Text style={styles.resultCount}>
                 {filteredLogs.length === logs.length
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </Text>)}
           </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                methodFilters.size > 0 ||
+                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
                 ? 'No matching API requests'
                 : 'No network activity'} onClearSearch={() => {
                 setSearch('');
                 setStatusFilters(new Set());
                 setMethodFilters(new Set());
+                setQuickFilter('all');
                 setSearchScope('all');
             }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles.listContent,
@@ -940,6 +879,9 @@ const NetworkTab = React.memo(() => {
           <ChevronIcon color={AppColors.white} size={18}/>
         </View>
       </TouchableScale>
+
+      
+      <NetworkFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
     </View>);
 });
 export default NetworkTab;

package/dist/esm/components/Inspector/SettingsPanel.js

@@ -17,7 +17,7 @@ import { clearPerformanceEvents } from '../../customHooks/performanceTracker';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 import { useTranslation } from '../../i18n';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, ChevronDownIcon, NpmIcon, BoltIcon, BrainIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { LIB_VERSION } from '../../constants';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
@@ -97,6 +97,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',
+        },
     ];
     const [stagedTabVisibility, setStagedTabVisibility] = useState(() => ({
         apis: true,
@@ -108,6 +115,7 @@ const SettingsPanel = () => {
         crash: Boolean(tabVisibility?.crash),
         device: Boolean(tabVisibility?.device),
         storage: Boolean(tabVisibility?.storage),
+        debugging: Boolean(tabVisibility?.debugging ?? true),
     }));
     useEffect(() => {
         setStagedTabVisibility({
@@ -120,6 +128,7 @@ const SettingsPanel = () => {
             crash: Boolean(tabVisibility?.crash),
             device: Boolean(tabVisibility?.device),
             storage: Boolean(tabVisibility?.storage),
+            debugging: Boolean(tabVisibility?.debugging ?? true),
         });
     }, [tabVisibility]);
     const hasUnsavedChanges = useMemo(() => {
@@ -507,6 +516,9 @@ const SettingsPanel = () => {
                           {moduleItem.icon === 'storage' && (<DatabaseIcon color={isChecked
                             ? AppColors.purple
                             : AppColors.grayTextWeak} size={16}/>)}
+                          {moduleItem.icon === 'debugging' && (<QrCodeIcon color={isChecked
+                            ? AppColors.purple
+                            : AppColors.grayTextWeak} size={16}/>)}
                         </View>
 
                         

package/dist/esm/components/Inspector/TabBar.js

@@ -4,7 +4,7 @@ import { useInspector } from './InspectorContext';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import TouchableScale from '../TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, SmartphoneIcon, DatabaseIcon, QrCodeIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 const TabBar = React.memo(() => {
@@ -68,8 +68,16 @@ const TabBar = React.memo(() => {
                 count: 0,
                 icon: 'storage',
             },
+            {
+                key: 'debugging',
+                label: 'Debugging',
+                count: 0,
+                icon: 'debugging',
+            },
         ]
             .filter(tab => {
+            if (tab.key === 'debugging')
+                return true;
             if (!tabVisibility?.[tab.key])
                 return false;
             if (tab.key === 'redux' && !isReduxAvail)
@@ -112,6 +120,7 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'device' && (<SmartphoneIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'storage' && (<DatabaseIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'debugging' && (<QrCodeIcon color={iconColor} size={14}/>)}
                   <Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles.contentTabButtonText,
                     isActive &&

package/dist/esm/components/LogCard.js

@@ -198,29 +198,6 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                   GQL
                 </Text>
               </View>)}
-
-            
-            {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 style={[
@@ -239,6 +216,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                     : isLoading
                         ? `${AppColors.darkOrange}30`
                         : `${statusColor}30`,
+                flexShrink: 0,
             },
         ]}>
             {renderStatusIcon()}
@@ -272,6 +250,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             alignItems: 'center',
             justifyContent: 'center',
             marginRight: 4,
+            flexShrink: 0,
         }}>
               <GlobeIcon color={AppColors.skyBlue} size={11}/>
             </View>
@@ -310,8 +289,8 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
 
         
         <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>
@@ -328,7 +307,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                     paddingVertical: 1,
                     borderRadius: 4,
                     flexShrink: 1,
-                    maxWidth: 160,
+                    minWidth: 0,
                 },
             ]}>
                 <PinIcon color={AppColors.skyBlue} size={8.5}/>

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

@@ -133,3 +133,5 @@ export declare const ShieldCheckIcon: ({ color, size, }: IconProps) => React.JSX
 export declare const DatabaseIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const QrCodeIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -730,3 +730,13 @@ export const PencilIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<
 export const PlusIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
   </Svg>);
+export const LockIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<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, }) => (<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>);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface QRCodeViewProps {
+    value: string;
+    size?: number;
+    color?: string;
+    backgroundColor?: string;
+}
+export declare const QRCodeView: React.FC<QRCodeViewProps>;
+export default QRCodeView;

package/dist/esm/components/QRCodeView.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Rect, G } from 'react-native-svg';
+import { generateQRMatrix } from '../helpers/qrGenerator';
+import { AppColors } from '../styles/AppColors';
+export const QRCodeView = ({ value, size = 180, color = AppColors.primaryBlack, backgroundColor = AppColors.white, }) => {
+    const matrix = useMemo(() => generateQRMatrix(value), [value]);
+    const numCells = matrix.length;
+    const cellSize = size / numCells;
+    return (<View style={[
+            styles.container,
+            {
+                width: size + 16,
+                height: size + 16,
+                backgroundColor,
+            },
+        ]}>
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <G>
+          {matrix.map((row, r) => row.map((cell, c) => {
+            if (!cell)
+                return null;
+            return (<Rect key={`${r}-${c}`} x={c * cellSize} y={r * cellSize} width={cellSize + 0.2} height={cellSize + 0.2} fill={color}/>);
+        }))}
+        </G>
+      </Svg>
+    </View>);
+};
+const styles = StyleSheet.create({
+    container: {
+        padding: 8,
+        borderRadius: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+        elevation: 3,
+    },
+});
+export default QRCodeView;

package/dist/esm/constants/index.js

@@ -18,6 +18,9 @@ export const METHOD_COLORS = {
     PUT: '#D97706',
     PATCH: '#7C3AED',
     DELETE: '#DC2626',
+    QUERY: '#0284C7',
+    OPTIONS: '#475569',
+    HEAD: '#0891B2',
 };
 export const DOMAIN_COLORS = AppColors.domainColors;
 export const DURATION_FAST_MS = 200;

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.9";
+export declare const LIB_VERSION = "2.3.11";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '2.3.9';
+export const LIB_VERSION = '2.3.11';

package/dist/esm/helpers/qrGenerator.d.ts

@@ -0,0 +1,2 @@
+export type QRECC = 'L' | 'M' | 'Q' | 'H';
+export declare function generateQRMatrix(text: string, ecc?: QRECC): boolean[][];