react-native-inapp-inspector 2.3.11 → 2.3.13

package/dist/esm/components/HeadersSection.js

@@ -42,10 +42,11 @@ const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, inde
         <Text style={styles.htValue} selectable numberOfLines={expanded ? undefined : 3}>
           {value}
         </Text>
-        {isLong && (<View style={styles.htExpandRow}>
+        {isLong && (<View style={[styles.htExpandRow, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
             <Text style={styles.htExpandText}>
-              {expanded ? '▲ less' : '▼ more'}
+              {expanded ? 'less' : 'more'}
             </Text>
+            <ChevronIcon direction={expanded ? 'up' : 'down'} color={AppColors.purple} size={10}/>
           </View>)}
       </Pressable>
       <TouchableScale onPress={() => copyToClipboard(value, headerKey)} hitSlop={8} style={styles.htCopyBtn}>

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

@@ -8,7 +8,7 @@ import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { copyToClipboard } from '../../helpers';
-import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, } from '../NetworkIcons';
+import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, ChevronIcon, } from '../NetworkIcons';
 import Svg, { Path, Rect, Circle, Ellipse, G, Defs, LinearGradient, Stop, } from 'react-native-svg';
 import { analyzeHostAppBundle, getCachedBundleAnalysis, getInitialBundleAnalysis, getHostScriptURL, } from '../../customHooks/bundleAnalyzer';
 const PackageLogoRenderer = ({ name, size = 28 }) => {
@@ -378,9 +378,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
                 ? `${(node.sizeKb / 1024).toFixed(2)} MB`
                 : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[bundleStyles.treeFolderRow, { paddingLeft: indentLeft }]}>
           <View style={bundleStyles.treeRowLeft}>
-            <Text style={bundleStyles.treeChevron}>
-              {isCollapsed ? '▸' : '▾'}
-            </Text>
+            <View style={{ marginRight: 4 }}>
+              <ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={12} color={AppColors.grayTextWeak}/>
+            </View>
             {isCollapsed ? (<FolderIcon color={AppColors.amber500} size={15}/>) : (<FolderOpenIcon color={AppColors.amber500} size={15}/>)}
             <HighlightText text={node.name + '/'} search={search} style={bundleStyles.treeFolderName} highlightStyle={bundleStyles.searchHighlight}/>
             <View style={bundleStyles.treeCountBadge}>
@@ -836,7 +836,7 @@ const BundleTab = React.memo(() => {
                     letterSpacing: 0.3,
                     textTransform: 'uppercase',
                 }}>
-                            Live Metro URL ↗
+                            Live Metro URL
                           </Text>
                         </View>
                         <Text style={{

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

@@ -7,7 +7,7 @@ import TouchableScale from '../TouchableScale';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
 import { useTranslation } from '../../i18n';
-import { BoltIcon, SmartphoneIcon, PackageIcon, RepeatIcon, } from '../NetworkIcons';
+import { BoltIcon, SmartphoneIcon, PackageIcon, RepeatIcon, InfoCircleIcon, } from '../NetworkIcons';
 const COMMON_PORTS = [8081, 8082, 8083, 19000];
 export const DebuggingTab = () => {
     const { t } = useTranslation();
@@ -90,6 +90,7 @@ export const DebuggingTab = () => {
         probePorts();
     }, [probePorts]);
     const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
+    const directServerUrl = `http://${hostIp}:${selectedPort}`;
     const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
     const devSettingsHost = `${hostIp}:${selectedPort}`;
     const currentQrValue = useMemo(() => {
@@ -97,8 +98,8 @@ export const DebuggingTab = () => {
             return apkDownloadUrl;
         if (activeQrTab === 'host')
             return devSettingsHost;
-        return metroBundleUrl;
-    }, [activeQrTab, apkDownloadUrl, devSettingsHost, metroBundleUrl]);
+        return directServerUrl;
+    }, [activeQrTab, apkDownloadUrl, devSettingsHost, directServerUrl]);
     const activePortInfo = portsStatus[selectedPort];
     return (<ScrollView style={styles.container} contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
       
@@ -124,10 +125,10 @@ export const DebuggingTab = () => {
               </View>
               <Text style={styles.serverSubtitle}>
                 {activePortInfo?.status === 'active'
-            ? `🟢 Active & Bundling (${activePortInfo.latencyMs}ms)`
+            ? `Active & Bundling (${activePortInfo.latencyMs}ms)`
             : activePortInfo?.status === 'checking'
-                ? '🟡 Probing Metro Ports...'
-                : '🔴 Standby / Select active port'}
+                ? 'Probing Metro Ports...'
+                : 'Standby / Select active port'}
               </Text>
             </View>
           </View>
@@ -192,9 +193,12 @@ export const DebuggingTab = () => {
           <TextInput style={styles.input} value={hostIp} onChangeText={setHostIp} placeholder="192.168.1.15" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
           <Text style={styles.inputSuffix}>:{selectedPort}</Text>
         </View>
-        <Text style={styles.inputHint}>
-          💡 Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
-        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 6 }}>
+          <InfoCircleIcon size={13} color={AppColors.grayTextWeak}/>
+          <Text style={[styles.inputHint, { marginTop: 0, flex: 1 }]}>
+            Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
+          </Text>
+        </View>
       </View>
 
       
@@ -246,13 +250,16 @@ export const DebuggingTab = () => {
           <QRCodeView value={currentQrValue} size={190} color={AppColors.primaryBlack} backgroundColor={AppColors.white}/>
 
           <View style={styles.qrInfoBox}>
-            <Text style={styles.qrTargetTitle}>
-              {activeQrTab === 'apk'
-            ? '📦 Direct APK Download URL'
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginBottom: 2 }}>
+              {activeQrTab === 'apk' ? (<PackageIcon size={14} color={AppColors.purple}/>) : activeQrTab === 'host' ? (<SmartphoneIcon size={14} color={AppColors.purple}/>) : (<BoltIcon size={14} color={AppColors.amber500}/>)}
+              <Text style={styles.qrTargetTitle}>
+                {activeQrTab === 'apk'
+            ? 'Direct APK Download URL'
             : activeQrTab === 'host'
-                ? '📱 Dev Settings Bundle Host'
-                : '⚡ Live Metro Fast-Refresh Endpoint'}
-            </Text>
+                ? 'Dev Settings Bundle Host'
+                : 'Live Metro Fast-Refresh Endpoint'}
+              </Text>
+            </View>
             <Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
               {currentQrValue}
             </Text>
@@ -278,7 +285,10 @@ export const DebuggingTab = () => {
 
       
       <View style={styles.guideCard}>
-        <Text style={styles.guideHeading}>📱 HOW TO CONNECT ANDROID DEVICE:</Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 12 }}>
+          <SmartphoneIcon size={15} color={AppColors.primaryLight}/>
+          <Text style={[styles.guideHeading, { marginBottom: 0 }]}>HOW TO CONNECT ANDROID DEVICE:</Text>
+        </View>
 
         <View style={styles.stepRow}>
           <View style={styles.stepNumberBadge}>
@@ -309,7 +319,10 @@ export const DebuggingTab = () => {
             <Text style={styles.stepNumberText}>3</Text>
           </View>
           <View style={{ flex: 1 }}>
-            <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh ⚡</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh</Text>
+              <BoltIcon size={13} color={AppColors.amber500}/>
+            </View>
             <Text style={styles.stepDesc}>
               Any changes saved in VS Code will immediately update <Text style={{ fontWeight: '700' }}>both the iOS Simulator and physical Android phone</Text> in real-time!
             </Text>

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

@@ -298,7 +298,7 @@ const NetworkDetail = React.memo(() => {
                     letterSpacing: 0.4,
                     textTransform: 'uppercase',
                 }}>
-                        ENDPOINT URL ↗
+                        ENDPOINT URL
                       </Text>
                     </View>
 
@@ -333,7 +333,7 @@ const NetworkDetail = React.memo(() => {
                     fontSize: 9,
                     color: AppColors.sky600,
                 }}>
-                          Open ↗
+                          Open
                         </Text>
                       </View>
                     </View>

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

@@ -5,7 +5,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { METHOD_COLORS } from '../../constants';
-import { FilterIcon, CloseWhite, CircleCheckIcon, CircleAlertIcon, CircleXIcon, LayersIcon, RepeatIcon, ShieldAlertIcon, } from '../NetworkIcons';
+import { FilterIcon, CloseWhite, ClockIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, LayersIcon, RepeatIcon, ShieldAlertIcon, BoltIcon, GlobeIcon, LockIcon, UnlockIcon, RocketIcon, TurtleIcon, HourglassIcon, PackageIcon, } from '../NetworkIcons';
 import TouchableScale from '../TouchableScale';
 export const DEFAULT_NETWORK_FILTERS = {
     statusCodes: new Set(['all']),
@@ -330,12 +330,13 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Speeds', color: AppColors.purple },
-            { key: 'fast', label: '⚡ Fast (<200ms)', color: AppColors.greenColor, count: counts.fastCount },
-            { key: 'normal', label: '⏱️ Normal (200-500ms)', color: AppColors.skyBlue, count: counts.normalCount },
-            { key: 'slow', label: '⚠️ Slow (>500ms)', color: AppColors.errorColor, count: counts.slowCount },
+            { key: 'all', label: 'All Speeds', color: AppColors.purple, icon: LayersIcon },
+            { key: 'fast', label: 'Fast (<200ms)', color: AppColors.greenColor, icon: BoltIcon, count: counts.fastCount },
+            { key: 'normal', label: 'Normal (200-500ms)', color: AppColors.skyBlue, icon: ClockIcon, count: counts.normalCount },
+            { key: 'slow', label: 'Slow (>500ms)', color: AppColors.errorColor, icon: CircleAlertIcon, count: counts.slowCount },
         ].map(item => {
             const isSelected = draft.latency === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, latency: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -343,6 +344,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts.interBold },
@@ -364,11 +366,12 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>PROTOCOL</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Protocols', color: AppColors.purple },
-            { key: 'https', label: '🔒 HTTPS Secure', color: AppColors.mintGreenText, count: counts.httpsCount },
-            { key: 'http', label: '🔓 HTTP Insecure', color: AppColors.amber700, count: counts.httpCount },
+            { key: 'all', label: 'All Protocols', color: AppColors.purple, icon: GlobeIcon },
+            { key: 'https', label: 'HTTPS Secure', color: AppColors.mintGreenText, icon: LockIcon, count: counts.httpsCount },
+            { key: 'http', label: 'HTTP Insecure', color: AppColors.amber700, icon: UnlockIcon, count: counts.httpCount },
         ].map(item => {
             const isSelected = draft.protocol === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, protocol: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -376,6 +379,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts.interBold },
@@ -397,13 +401,14 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>SORT BY</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'time_desc', label: '⏱️ Newest First (Default)' },
-            { key: 'time_asc', label: '⌛ Oldest First' },
-            { key: 'duration_desc', label: '🐢 Slowest Response' },
-            { key: 'duration_asc', label: '🚀 Fastest Response' },
-            { key: 'size_desc', label: '📦 Largest Response Size' },
+            { key: 'time_desc', label: 'Newest First (Default)', icon: ClockIcon },
+            { key: 'time_asc', label: 'Oldest First', icon: HourglassIcon },
+            { key: 'duration_desc', label: 'Slowest Response', icon: TurtleIcon },
+            { key: 'duration_asc', label: 'Fastest Response', icon: RocketIcon },
+            { key: 'size_desc', label: 'Largest Response Size', icon: PackageIcon },
         ].map(item => {
             const isSelected = draft.sortBy === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, sortBy: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -411,6 +416,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: AppColors.purple,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? AppColors.purple : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: AppColors.purple, fontFamily: AppFonts.interBold },

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

@@ -5,7 +5,7 @@ import globalStyles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
-import { DatabaseIcon, SearchIcon, ClearIcon, PlusIcon, PencilIcon, TrashIcon, CopyIcon, CheckIcon, LayersIcon, ResetIcon, ChevronIcon, } from '../NetworkIcons';
+import { DatabaseIcon, SearchIcon, ClearIcon, PlusIcon, PencilIcon, TrashIcon, CopyIcon, CheckIcon, LayersIcon, ResetIcon, ChevronIcon, WarningTriangleIcon, } from '../NetworkIcons';
 import { fetchStorageEntries, setStorageEntry, removeStorageEntry, clearStorageDriver, isAsyncStorageConnected, isMMKVConnected, getRegisteredMMKVInstanceIds, subscribeToStorageChanges, } from '../../customHooks/storageInspector';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
@@ -88,9 +88,12 @@ const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpande
         <Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable={isExpanded}>
           {displayValue}
         </Text>
-        {entry.value.length > 80 && (<Text style={styles.expandHint}>
-            {isExpanded ? '▲ Collapse' : '▼ Expand'}
-          </Text>)}
+        {entry.value.length > 80 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 4 }}>
+            <Text style={styles.expandHint}>
+              {isExpanded ? 'Collapse' : 'Expand'}
+            </Text>
+            <ChevronIcon direction={isExpanded ? 'up' : 'down'} size={10} color={AppColors.purple}/>
+          </View>)}
       </TouchableScale>
     </View>);
 });
@@ -465,7 +468,10 @@ export const StorageTab = React.memo(() => {
                 : editType === 'boolean'
                     ? 'true'
                     : 'String value...'} placeholderTextColor={AppColors.grayTextWeak} style={[styles.textInput, styles.textAreaInput]} multiline textAlignVertical="top" autoCapitalize="none"/>
-              {jsonError && (<Text style={styles.errorText}>⚠️ {jsonError}</Text>)}
+              {jsonError && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 4 }}>
+                  <WarningTriangleIcon size={12} color={AppColors.errorColor}/>
+                  <Text style={styles.errorText}>{jsonError}</Text>
+                </View>)}
             </View>
 
             

package/dist/esm/components/JsonViewer.js

@@ -5,7 +5,7 @@ import TreeNode from './TreeNode';
 import SegmentedTabs from './SegmentedTabs';
 import HighlightText from './HighlightText';
 import CopyButton from './CopyButton';
-import { PrettyIcon, RawIcon, TableIcon } from './NetworkIcons';
+import { PrettyIcon, RawIcon, TableIcon, ChevronIcon } from './NetworkIcons';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
@@ -44,10 +44,11 @@ const JsonTableRow = React.memo(({ itemKey, val, search, }) => {
             localStyles.tableCellValue,
             isObject && localStyles.tableCellRawCode,
         ]} highlightStyle={localStyles.highlight} numberOfLines={expanded ? undefined : 3} selectable={true}/>
-        {isMultiline && (<TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={localStyles.showMoreBtn}>
+        {isMultiline && (<TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={[localStyles.showMoreBtn, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
             <Text style={localStyles.showMoreText}>
-              {expanded ? 'Show less ▲' : 'Show more ▼'}
+              {expanded ? 'Show less' : 'Show more'}
             </Text>
+            <ChevronIcon direction={expanded ? 'up' : 'down'} size={10} color={AppColors.purple}/>
           </TouchableOpacity>)}
       </View>
     </View>);

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

@@ -37,7 +37,7 @@ export declare const SignalIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 export declare const DiffIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const GlobeIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const SortArrowIcon: ({ color, size, direction, }: IconProps) => React.JSX.Element;
-export declare const ChevronIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ChevronIcon: ({ color, size, direction, }: IconProps) => React.JSX.Element;
 export declare const FilterIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const DownloadIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const CloseWhite: ({ color, size }: IconProps) => React.JSX.Element;
@@ -135,3 +135,6 @@ export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 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;
+export declare const UnlockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const RocketIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const TurtleIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -167,9 +167,16 @@ export const SortArrowIcon = ({ color = AppColors.primaryLight, size = 20, direc
         </>)}
     </Svg>);
 };
-export const ChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+export const ChevronIcon = ({ color = AppColors.grayTextWeak, size = 14, direction = 'down', }) => {
+    let path = 'M6 9l6 6 6-6';
+    if (direction === 'up')
+        path = 'M18 15l-6-6-6 6';
+    else if (direction === 'right')
+        path = 'M9 18l6-6-6-6';
+    else if (direction === 'left')
+        path = 'M15 18l-6-6 6-6';
     return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d={path} stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
 export const FilterIcon = ({ color = AppColors.grayTextWeak, size = 18, }) => {
@@ -740,3 +747,16 @@ export const QrCodeIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<
     <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>);
+export const UnlockIcon = ({ 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 9.9-1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const RocketIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6.05 11a22.35 22.35 0 0 1-3.95 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M9 12l-4 4M15 6l-3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const TurtleIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Ellipse cx="12" cy="14" rx="7" ry="5" stroke={color} strokeWidth="2"/>
+    <Circle cx="12" cy="6" r="3" stroke={color} strokeWidth="2"/>
+    <Path d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </Svg>);

package/dist/esm/components/QRCodeView.js

@@ -3,24 +3,27 @@ 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;
+export const QRCodeView = ({ value, size = 200, color = '#000000', backgroundColor = '#FFFFFF', }) => {
+    const matrix = useMemo(() => generateQRMatrix(value || 'http://localhost:8081'), [value]);
+    const numCells = matrix.length || 21;
+    const margin = 3;
+    const totalCells = numCells + margin * 2;
+    const cellSize = size / totalCells;
     return (<View style={[
             styles.container,
             {
-                width: size + 16,
-                height: size + 16,
+                width: size + 20,
+                height: size + 20,
                 backgroundColor,
             },
         ]}>
       <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Rect width={size} height={size} fill={backgroundColor}/>
         <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}/>);
+            return (<Rect key={`${r}-${c}`} x={(c + margin) * cellSize} y={(r + margin) * cellSize} width={cellSize + 0.3} height={cellSize + 0.3} fill={color}/>);
         }))}
         </G>
       </Svg>
@@ -28,15 +31,15 @@ export const QRCodeView = ({ value, size = 180, color = AppColors.primaryBlack,
 };
 const styles = StyleSheet.create({
     container: {
-        padding: 8,
+        padding: 10,
         borderRadius: 14,
         alignItems: 'center',
         justifyContent: 'center',
         shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 6,
-        elevation: 3,
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+        elevation: 4,
     },
 });
 export default QRCodeView;

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

@@ -1,3 +1,3 @@
-export declare const ENC_MID = "df8ace0290a695bd05986213";
-export declare const ENC_SEC = "db93cb0186b1f7bb0ba63a0d0a64997586849455ce37";
-export declare const TELEMETRY_SALT = "rn-inapp-inspector-telemetry-v1";
+export declare const ENC_MID = "";
+export declare const ENC_SEC = "";
+export declare const TELEMETRY_SALT = "";

package/dist/esm/constants/telemetryConfig.js

@@ -1,3 +1,3 @@
-export const ENC_MID = 'df8ace0290a695bd05986213';
-export const ENC_SEC = 'db93cb0186b1f7bb0ba63a0d0a64997586849455ce37';
-export const TELEMETRY_SALT = 'rn-inapp-inspector-telemetry-v1';
+export const ENC_MID = '';
+export const ENC_SEC = '';
+export const TELEMETRY_SALT = '';

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

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

package/dist/esm/constants/version.js

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