react-native-inapp-inspector 2.3.12 → 2.3.13

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/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.12";
+export declare const LIB_VERSION = "2.3.13";

package/dist/esm/constants/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.12",
+  "version": "2.3.13",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",

package/src/components/HeadersSection.tsx

@@ -79,10 +79,15 @@ const HeaderRow = React.memo(function HeaderRow({
           {value}
         </Text>
         {isLong && (
-          <View style={styles.htExpandRow}>
+          <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>

package/src/components/Inspector/BundleTab.tsx

@@ -48,6 +48,7 @@ import {
   AppleIcon,
   AndroidIcon,
   DownloadIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 import Svg, {
@@ -808,9 +809,13 @@ const BundleTreeNodeView: React.FC<{
           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} />
             ) : (
@@ -1465,7 +1470,7 @@ const BundleTab = React.memo(() => {
                               letterSpacing: 0.3,
                               textTransform: 'uppercase',
                             }}>
-                            Live Metro URL ↗
+                            Live Metro URL
                           </Text>
                         </View>
                         <Text

package/src/components/Inspector/DebuggingTab.tsx

@@ -31,6 +31,7 @@ import {
   ExternalLinkIcon,
   RepeatIcon,
   ShieldAlertIcon,
+  InfoCircleIcon,
 } from '../NetworkIcons';
 
 interface PortStatus {
@@ -180,10 +181,10 @@ export const DebuggingTab: React.FC = () => {
               </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>
@@ -273,9 +274,12 @@ export const DebuggingTab: React.FC = () => {
           />
           <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>
 
       {/* ─── Interactive QR Code Generator Card ──────────────────────── */}
@@ -353,13 +357,22 @@ export const DebuggingTab: React.FC = () => {
           />
 
           <View style={styles.qrInfoBox}>
-            <Text style={styles.qrTargetTitle}>
-              {activeQrTab === 'apk'
-                ? '📦 Direct APK Download URL'
-                : activeQrTab === 'host'
-                ? '📱 Dev Settings Bundle Host'
-                : '⚡ Live Metro Fast-Refresh Endpoint'}
-            </Text>
+            <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>
+            </View>
             <Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
               {currentQrValue}
             </Text>
@@ -389,7 +402,10 @@ export const DebuggingTab: React.FC = () => {
 
       {/* ─── Bare React Native Multi-Device Setup Guide ───────────────── */}
       <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}>
@@ -420,7 +436,10 @@ export const DebuggingTab: React.FC = () => {
             <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/src/components/Inspector/NetworkDetail.tsx

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

package/src/components/Inspector/NetworkFilterModal.tsx

@@ -27,6 +27,11 @@ import {
   BoltIcon,
   GlobeIcon,
   LockIcon,
+  UnlockIcon,
+  RocketIcon,
+  TurtleIcon,
+  HourglassIcon,
+  PackageIcon,
 } from '../NetworkIcons';
 import TouchableScale from '../TouchableScale';
 
@@ -405,12 +410,13 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'all' as const, label: 'All Speeds', color: AppColors.purple},
-                  {key: 'fast' as const, label: '⚡ Fast (<200ms)', color: AppColors.greenColor, count: counts.fastCount},
-                  {key: 'normal' as const, label: '⏱️ Normal (200-500ms)', color: AppColors.skyBlue, count: counts.normalCount},
-                  {key: 'slow' as const, label: '⚠️ Slow (>500ms)', color: AppColors.errorColor, count: counts.slowCount},
+                  {key: 'all' as const, label: 'All Speeds', color: AppColors.purple, icon: LayersIcon},
+                  {key: 'fast' as const, label: 'Fast (<200ms)', color: AppColors.greenColor, icon: BoltIcon, count: counts.fastCount},
+                  {key: 'normal' as const, label: 'Normal (200-500ms)', color: AppColors.skyBlue, icon: ClockIcon, count: counts.normalCount},
+                  {key: 'slow' as const, 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}
@@ -423,6 +429,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: item.color,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? item.color : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,
@@ -448,11 +458,12 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>PROTOCOL</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'all' as const, label: 'All Protocols', color: AppColors.purple},
-                  {key: 'https' as const, label: '🔒 HTTPS Secure', color: AppColors.mintGreenText, count: counts.httpsCount},
-                  {key: 'http' as const, label: '🔓 HTTP Insecure', color: AppColors.amber700, count: counts.httpCount},
+                  {key: 'all' as const, label: 'All Protocols', color: AppColors.purple, icon: GlobeIcon},
+                  {key: 'https' as const, label: 'HTTPS Secure', color: AppColors.mintGreenText, icon: LockIcon, count: counts.httpsCount},
+                  {key: 'http' as const, 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}
@@ -465,6 +476,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: item.color,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? item.color : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,
@@ -490,13 +505,14 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
               <Text style={styles.sectionTitle}>SORT BY</Text>
               <View style={styles.chipsWrap}>
                 {[
-                  {key: 'time_desc' as const, label: '⏱️ Newest First (Default)'},
-                  {key: 'time_asc' as const, label: '⌛ Oldest First'},
-                  {key: 'duration_desc' as const, label: '🐢 Slowest Response'},
-                  {key: 'duration_asc' as const, label: '🚀 Fastest Response'},
-                  {key: 'size_desc' as const, label: '📦 Largest Response Size'},
+                  {key: 'time_desc' as const, label: 'Newest First (Default)', icon: ClockIcon},
+                  {key: 'time_asc' as const, label: 'Oldest First', icon: HourglassIcon},
+                  {key: 'duration_desc' as const, label: 'Slowest Response', icon: TurtleIcon},
+                  {key: 'duration_asc' as const, label: 'Fastest Response', icon: RocketIcon},
+                  {key: 'size_desc' as const, label: 'Largest Response Size', icon: PackageIcon},
                 ].map(item => {
                   const isSelected = draft.sortBy === item.key;
+                  const IconComp = item.icon;
                   return (
                     <TouchableOpacity
                       key={item.key}
@@ -509,6 +525,10 @@ export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
                           borderColor: AppColors.purple,
                         },
                       ]}>
+                      <IconComp
+                        size={13}
+                        color={isSelected ? AppColors.purple : AppColors.grayTextWeak}
+                      />
                       <Text
                         style={[
                           styles.chipLabel,

package/src/components/Inspector/StorageTab.tsx

@@ -30,6 +30,7 @@ import {
   LayersIcon,
   ResetIcon,
   ChevronIcon,
+  WarningTriangleIcon,
 } from '../NetworkIcons';
 import {
   fetchStorageEntries,
@@ -162,9 +163,16 @@ const StorageEntryCard = React.memo(function StorageEntryCard({
           {displayValue}
         </Text>
         {entry.value.length > 80 && (
-          <Text style={styles.expandHint}>
-            {isExpanded ? '▲ Collapse' : '▼ Expand'}
-          </Text>
+          <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>
@@ -710,7 +718,10 @@ export const StorageTab = React.memo(() => {
                 autoCapitalize="none"
               />
               {jsonError && (
-                <Text style={styles.errorText}>⚠️ {jsonError}</Text>
+                <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/src/components/JsonViewer.tsx

@@ -7,7 +7,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';
 
 // Styles
 import {AppColors} from '../styles/AppColors';
@@ -77,10 +77,15 @@ const JsonTableRow = React.memo(({
           <TouchableOpacity
             onPress={() => setExpanded(prev => !prev)}
             hitSlop={6}
-            style={localStyles.showMoreBtn}>
+            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>

package/src/components/NetworkIcons.tsx

@@ -570,11 +570,16 @@ export const SortArrowIcon = ({
 export const ChevronIcon = ({
   color = AppColors.grayTextWeak,
   size = 14,
+  direction = 'down',
 }: IconProps) => {
+  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"
+        d={path}
         stroke={color}
         strokeWidth="2.5"
         strokeLinecap="round"
@@ -2285,3 +2290,68 @@ export const QrCodeIcon = ({
   </Svg>
 );
 
+export const UnlockIcon = ({
+  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 9.9-1"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const RocketIcon = ({
+  color = AppColors.grayTextWeak,
+  size = 14,
+}: IconProps) => (
+  <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,
+}: IconProps) => (
+  <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/src/constants/telemetryConfig.ts

@@ -1,6 +1,4 @@
 // AUTO-GENERATED FILE — do not edit by hand.
-// Generated by scripts/gen-telemetry.js from .env at build time.
-
-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/src/constants/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.12';
+export const LIB_VERSION = '2.3.13';

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +0,0 @@
-#Wed Aug 19 11:26:52 IST 2026
-gradle.version=8.9