react-native-inapp-inspector 2.3.8 → 2.3.10

package/src/components/Inspector/SettingsPanel.tsx

@@ -457,12 +457,13 @@ const SettingsPanel = () => {
         contentContainerStyle={{padding: 16, paddingBottom: 100, gap: 14}}
         showsVerticalScrollIndicator={false}>
         {/* Segmented Top Navigation Sub-Tabs */}
+        {/* ─── Modern Scrollable Settings Sub-Tabs Bar ─── */}
         <View
           style={{
-            flexDirection: 'row',
             backgroundColor: AppColors.primaryLight,
-            borderRadius: 12,
-            padding: 4,
+            borderRadius: 13,
+            paddingVertical: 4,
+            paddingHorizontal: 4,
             borderWidth: 1,
             borderColor: AppColors.grayBorderSecondary,
             shadowColor: AppColors.black,
@@ -470,139 +471,99 @@ const SettingsPanel = () => {
             shadowRadius: 4,
             shadowOffset: {width: 0, height: 2},
           }}>
-          <TouchableScale
-            accessible={true}
-            accessibilityRole="tab"
-            accessibilityLabel={t('settings.modulesAndTools')}
-            accessibilityState={{selected: settingsActiveSubTab === 'module'}}
-            onPress={() => {
-              animateNextLayout();
-              setSettingsActiveSubTab('module');
-            }}
-            style={{
-              flex: 1,
-              paddingVertical: 9,
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{
               flexDirection: 'row',
               alignItems: 'center',
-              justifyContent: 'center',
               gap: 6,
-              borderRadius: 9,
-              backgroundColor:
-                settingsActiveSubTab === 'module'
-                  ? AppColors.purple
-                  : 'transparent',
-            }}>
-            <LayersIcon
-              color={
-                settingsActiveSubTab === 'module'
-                  ? AppColors.white
-                  : AppColors.grayText
-              }
-              size={13}
-            />
-            <Text
-              style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 12.5,
-                lineHeight: 16,
-                color:
-                  settingsActiveSubTab === 'module'
-                    ? AppColors.white
-                    : AppColors.grayText,
-              }}>
-              {t('settings.modulesAndTools')}
-            </Text>
-          </TouchableScale>
-
-          <TouchableScale
-            accessible={true}
-            accessibilityRole="tab"
-            accessibilityLabel={t('settings.uiPreferences')}
-            accessibilityState={{selected: settingsActiveSubTab === 'ui'}}
-            onPress={() => {
-              animateNextLayout();
-              setSettingsActiveSubTab('ui');
-            }}
-            style={{
-              flex: 1,
-              paddingVertical: 9,
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: 5,
-              borderRadius: 9,
-              backgroundColor:
-                settingsActiveSubTab === 'ui'
-                  ? AppColors.purple
-                  : 'transparent',
-            }}>
-            <ScreenIcon
-              color={
-                settingsActiveSubTab === 'ui'
-                  ? AppColors.white
-                  : AppColors.grayText
-              }
-              size={13}
-            />
-            <Text
-              numberOfLines={1}
-              style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 12,
-                lineHeight: 16,
-                color:
-                  settingsActiveSubTab === 'ui'
-                    ? AppColors.white
-                    : AppColors.grayText,
-              }}>
-              {t('settings.uiPreferences')}
-            </Text>
-          </TouchableScale>
-
-          <TouchableScale
-            accessible={true}
-            accessibilityRole="tab"
-            accessibilityLabel={t('settings.ramLimits')}
-            accessibilityState={{selected: settingsActiveSubTab === 'limits'}}
-            onPress={() => {
-              animateNextLayout();
-              setSettingsActiveSubTab('limits');
-            }}
-            style={{
-              flex: 1,
-              paddingVertical: 9,
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: 5,
-              borderRadius: 9,
-              backgroundColor:
-                settingsActiveSubTab === 'limits'
-                  ? AppColors.purple
-                  : 'transparent',
+              paddingHorizontal: 2,
             }}>
-            <BrainIcon
-              color={
-                settingsActiveSubTab === 'limits'
-                  ? AppColors.white
-                  : AppColors.grayText
-              }
-              size={13}
-            />
-            <Text
-              numberOfLines={1}
-              style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 12,
-                lineHeight: 16,
-                color:
-                  settingsActiveSubTab === 'limits'
-                    ? AppColors.white
-                    : AppColors.grayText,
-              }}>
-              {t('settings.ramLimits')}
-            </Text>
-          </TouchableScale>
+            {[
+              {
+                key: 'module' as const,
+                label: t('settings.modulesAndTools', 'Modules & Tools'),
+                Icon: LayersIcon,
+                badge: `${allModules.filter(m => stagedTabVisibility?.[m.key as ActiveTab] || m.key === 'apis').length}/${allModules.length}`,
+              },
+              {
+                key: 'ui' as const,
+                label: t('settings.uiPreferences', 'UI Preferences'),
+                Icon: ScreenIcon,
+              },
+              {
+                key: 'limits' as const,
+                label: t('settings.ramLimits', 'RAM & Limits'),
+                Icon: BrainIcon,
+              },
+            ].map(tab => {
+              const isActive = settingsActiveSubTab === tab.key;
+              const IconComp = tab.Icon;
+              return (
+                <TouchableScale
+                  key={tab.key}
+                  accessible={true}
+                  accessibilityRole="tab"
+                  accessibilityLabel={tab.label}
+                  accessibilityState={{selected: isActive}}
+                  onPress={() => {
+                    animateNextLayout();
+                    setSettingsActiveSubTab(tab.key);
+                  }}
+                  style={{
+                    paddingVertical: 8,
+                    paddingHorizontal: 14,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 6,
+                    borderRadius: 9,
+                    backgroundColor: isActive
+                      ? AppColors.purple
+                      : 'transparent',
+                  }}>
+                  <IconComp
+                    color={isActive ? AppColors.white : AppColors.grayText}
+                    size={13}
+                  />
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 12.5,
+                      lineHeight: 16,
+                      color: isActive
+                        ? AppColors.white
+                        : AppColors.grayText,
+                    }}>
+                    {tab.label}
+                  </Text>
+                  {tab.badge && (
+                    <View
+                      style={{
+                        backgroundColor: isActive
+                          ? 'rgba(255,255,255,0.25)'
+                          : `${AppColors.purple}18`,
+                        paddingHorizontal: 5.5,
+                        paddingVertical: 1,
+                        borderRadius: 10,
+                      }}>
+                      <Text
+                        style={{
+                          fontFamily: AppFonts.interBold,
+                          fontSize: 9.5,
+                          color: isActive
+                            ? AppColors.white
+                            : AppColors.purple,
+                        }}>
+                        {tab.badge}
+                      </Text>
+                    </View>
+                  )}
+                </TouchableScale>
+              );
+            })}
+          </ScrollView>
         </View>
 
         {settingsActiveSubTab === 'module' && (

package/src/components/Inspector/StorageTab.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useMemo, useCallback} from 'react';
+import React, {useState, useEffect, useMemo, useCallback, useRef} from 'react';
 import {
   View,
   Text,
@@ -13,6 +13,7 @@ import {
 } from 'react-native';
 import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
+import globalStyles from '../../styles';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
 import {useTranslation} from '../../i18n';
@@ -28,6 +29,7 @@ import {
   CircleAlertIcon,
   LayersIcon,
   ResetIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 import {
   fetchStorageEntries,
@@ -171,6 +173,7 @@ const StorageEntryCard = React.memo(function StorageEntryCard({
 
 export const StorageTab = React.memo(() => {
   const {t} = useTranslation();
+  const listRef = useRef<FlatList>(null);
   const [activeDriver, setActiveDriver] = useState<StorageDriver>('asyncStorage');
   const [activeMMKVId, setActiveMMKVId] = useState<string>('default');
   const [entries, setEntries] = useState<StorageEntry[]>([]);
@@ -555,34 +558,60 @@ export const StorageTab = React.memo(() => {
           <Text style={styles.loadingText}>Loading storage entries...</Text>
         </View>
       ) : (
-        <FlatList
-          data={filteredEntries}
-          keyExtractor={item => item.key}
-          renderItem={renderItem}
-          initialNumToRender={10}
-          maxToRenderPerBatch={10}
-          windowSize={5}
-          removeClippedSubviews={Platform.OS === 'android'}
-          style={styles.scrollArea}
-          contentContainerStyle={styles.scrollContent}
-          showsVerticalScrollIndicator={false}
-          ListEmptyComponent={
-            <View style={styles.emptyContainer}>
-              <View style={styles.emptyIconWrap}>
-                <DatabaseIcon size={28} color={AppColors.grayTextWeak} />
+        <>
+          <FlatList
+            ref={listRef}
+            data={filteredEntries}
+            keyExtractor={item => item.key}
+            renderItem={renderItem}
+            initialNumToRender={10}
+            maxToRenderPerBatch={10}
+            windowSize={5}
+            removeClippedSubviews={Platform.OS === 'android'}
+            style={styles.scrollArea}
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+            ListEmptyComponent={
+              <View style={styles.emptyContainer}>
+                <View style={styles.emptyIconWrap}>
+                  <DatabaseIcon size={28} color={AppColors.grayTextWeak} />
+                </View>
+                <Text style={styles.emptyTitle}>
+                  {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
+                </Text>
+                <Text style={styles.emptySubtitle}>
+                  {search
+                    ? 'Try modifying your search query'
+                    : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
+                </Text>
               </View>
-              <Text style={styles.emptyTitle}>
-                {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
-              </Text>
-              <Text style={styles.emptySubtitle}>
-                {search
-                  ? 'Try modifying your search query'
-                  : `Storage is auto-detected. Tap "+ Add" above to create your first ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} key!`}
-              </Text>
+            }
+            ListFooterComponent={<View style={{height: 60}} />}
+          />
+
+          <TouchableScale
+            onPress={() => {
+              try {
+                listRef.current?.scrollToOffset({
+                  offset: 0,
+                  animated: true,
+                });
+              } catch {
+                try {
+                  listRef.current?.scrollToIndex({
+                    index: 0,
+                    animated: true,
+                  });
+                } catch {}
+              }
+            }}
+            hitSlop={12}
+            style={globalStyles.scrollTopBtn}>
+            <View style={{transform: [{rotate: '180deg'}]}}>
+              <ChevronIcon color={AppColors.white} size={18} />
             </View>
-          }
-          ListFooterComponent={<View style={{height: 60}} />}
-        />
+          </TouchableScale>
+        </>
       )}
 
       {/* ── Create / Edit Key Modal ── */}

package/src/components/Inspector/UpdateAvailableModal.tsx

@@ -125,6 +125,8 @@ export const UpdateAvailableModal: React.FC<UpdateAvailableModalProps> = ({
 
   const installCommand = `npm install react-native-inapp-inspector@latest`;
 
+  if (typeof __DEV__ === 'undefined' || !__DEV__) return null;
+
   useEffect(() => {
     if (visible) {
       setCopied(false);

package/src/components/LogCard.tsx

@@ -27,6 +27,7 @@ import {
   CircleAlertIcon,
   CircleXIcon,
   RepeatIcon,
+  PinIcon,
 } from './NetworkIcons';
 import {AppFonts} from '../styles/AppFonts';
 import styles from '../styles';
@@ -274,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
@@ -320,6 +294,7 @@ const LogCard = React.memo(function LogCard({
                   : isLoading
                   ? `${AppColors.darkOrange}30`
                   : `${statusColor}30`,
+                flexShrink: 0,
               },
             ]}>
             {renderStatusIcon()}
@@ -358,6 +333,7 @@ const LogCard = React.memo(function LogCard({
                 alignItems: 'center',
                 justifyContent: 'center',
                 marginRight: 4,
+                flexShrink: 0,
               }}>
               <GlobeIcon color={AppColors.skyBlue} size={11} />
             </View>
@@ -408,11 +384,47 @@ const LogCard = React.memo(function LogCard({
           </View>
         </View>
 
-        {/* Row 3: Footer (Timestamp on Left, Response Size & Duration on Right) */}
+        {/* Row 3: Footer (Timestamp & Origin on Left, Response Size & Duration on Right) */}
         <View style={styles.cardFooterRow}>
-          <View style={styles.cardDateRow}>
-            <CalendarIcon color={AppColors.grayTextWeak} size={10} />
-            <Text style={styles.cardDateText}>{triggeredAt}</Text>
+          <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>
+
+            {item.caller && item.caller !== 'Unknown' && (
+              <View
+                style={[
+                  styles.chip,
+                  {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: `${AppColors.skyBlue}14`,
+                    borderColor: `${AppColors.skyBlue}30`,
+                    paddingHorizontal: 5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                    flexShrink: 1,
+                    minWidth: 0,
+                  },
+                ]}>
+                <PinIcon color={AppColors.skyBlue} size={8.5} />
+                <Text
+                  style={[
+                    styles.chipText,
+                    {
+                      color: AppColors.skyBlue,
+                      fontSize: 8.5,
+                      fontFamily: AppFonts.interMedium,
+                    },
+                  ]}
+                  numberOfLines={1}
+                  ellipsizeMode="middle">
+                  {item.caller}
+                </Text>
+              </View>
+            )}
           </View>
 
           <View style={styles.cardFooterRight}>

package/src/components/NetworkIcons.tsx

@@ -2219,3 +2219,30 @@ 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>
+);
+

package/src/constants/index.ts

@@ -26,6 +26,9 @@ export const METHOD_COLORS: Record<Method, string> = {
   PUT: '#D97706',     // Amber Gold
   PATCH: '#7C3AED',   // Rich Violet
   DELETE: '#DC2626',  // Crimson Red
+  QUERY: '#0284C7',   // Sky Cyan (HTTP QUERY RFC 9535)
+  OPTIONS: '#475569', // Cool Slate
+  HEAD: '#0891B2',    // Cyan
 };
 
 export const DOMAIN_COLORS: string[] = AppColors.domainColors;

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.8';
+export const LIB_VERSION = '2.3.10';

package/src/helpers/telemetry.ts

@@ -98,6 +98,38 @@ async function getOrCreateClientId(): Promise<string> {
   }
 }
 
+function isDeviceEmulator(): boolean {
+  try {
+    if (Platform.OS === 'android') {
+      const c = (Platform.constants as any) || {};
+      const model = String(c.Model || '').toLowerCase();
+      const brand = String(c.Brand || '').toLowerCase();
+      const fingerprint = String(c.Fingerprint || '').toLowerCase();
+      const hardware = String(c.Hardware || '').toLowerCase();
+      const manufacturer = String(c.Manufacturer || '').toLowerCase();
+      return (
+        model.includes('emulator') ||
+        model.includes('sdk') ||
+        model.includes('google_sdk') ||
+        model.includes('vbox') ||
+        brand.includes('generic') ||
+        fingerprint.startsWith('generic') ||
+        hardware.includes('goldfish') ||
+        hardware.includes('ranchu') ||
+        manufacturer.includes('genymotion')
+      );
+    }
+    if (Platform.OS === 'ios') {
+      const c = (Platform.constants as any) || {};
+      const model = String(c.Model || '').toLowerCase();
+      return model.includes('simulator') || Boolean(c.isSimulator);
+    }
+  } catch {
+    return false;
+  }
+  return false;
+}
+
 function getSystemMetadata(environment?: string) {
   const rnConstants = Platform.constants as any;
   const rnVersion = rnConstants?.reactNativeVersion
@@ -107,6 +139,7 @@ function getSystemMetadata(environment?: string) {
   const isHermes = Boolean(typeof (global as any).HermesInternal === 'object' && (global as any).HermesInternal !== null);
   const isFabric = Boolean((global as any)?.nativeFabricUIManager !== undefined);
   const isDev = Boolean(typeof __DEV__ !== 'undefined' && __DEV__);
+  const isEmulator = isDeviceEmulator();
 
   return {
     lib_version: LIB_VERSION,
@@ -116,6 +149,9 @@ function getSystemMetadata(environment?: string) {
     is_hermes: isHermes,
     is_fabric: isFabric,
     is_dev: isDev,
+    is_emulator: isEmulator,
+    device_type: isEmulator ? 'emulator' : 'real_device',
+    app_mode: isDev ? 'local_mode' : 'bundled_application',
     environment: environment || (isDev ? 'DEV' : 'PROD'),
     engagement_time_msec: 1000,
   };

package/src/index.tsx

@@ -567,6 +567,11 @@ const NetworkInspector = ({
   }, [latestNpmVersion]);
 
   useEffect(() => {
+    // Only check for npm updates when running in local development / debug mode (__DEV__)
+    // Never show or check in production / bundled application
+    if (typeof __DEV__ === 'undefined' || !__DEV__) {
+      return;
+    }
     let cancelled = false;
     fetch('https://registry.npmjs.org/react-native-inapp-inspector/latest')
       .then(res => (res.ok ? res.json() : null))