react-native-inapp-inspector 2.3.7 → 2.3.9

package/src/components/Inspector/NpmUpdateToast.tsx

@@ -169,7 +169,7 @@ export const NpmUpdateToast = () => {
     handleDismiss();
   };
 
-  if (!showUpdateToast || !visible || !updateAvailable || !latestNpmVersion) return null;
+  if (typeof __DEV__ === 'undefined' || !__DEV__ || !showUpdateToast || !visible || !updateAvailable || !latestNpmVersion) return null;
 
   const progressWidth = progressAnim.interpolate({
     inputRange: [0, 1],

package/src/components/Inspector/PerformanceTab.tsx

@@ -22,6 +22,7 @@ import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
 import HighlightText from '../HighlightText';
 import EndOfListFooter from '../EndOfListFooter';
+import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
 import {useTranslation} from '../../i18n';
@@ -500,6 +501,8 @@ const PerformanceTab = React.memo(() => {
         </TouchableScale>
       </View>
 
+      <FeatureUnderDevNotice featureName="Performance & FPS Profiler" />
+
       {/* Filter Category Tabs Carousel */}
       <View style={perfStyles.categoryScrollWrapper}>
         <ScrollView

package/src/components/Inspector/ReduxTab.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {
   FlatList,
   Pressable,
@@ -42,6 +42,7 @@ import {
   TextAaIcon,
   StorageIcon,
   HeaderPauseIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 interface ReduxSliceItem {
@@ -121,6 +122,8 @@ const ReduxTab = React.memo(() => {
     setSelectedReduxSlice,
   } = useInspector();
 
+  const listRef = useRef<FlatList>(null);
+
   // Sort mode: 'latest' (newest updated first) vs 'alpha' (A-Z)
   const [sortMode, setSortMode] = useState<'latest' | 'alpha'>('latest');
 
@@ -656,6 +659,7 @@ const ReduxTab = React.memo(() => {
 
       {/* ─── FlatList of Slices ─── */}
       <FlatList
+        ref={listRef}
         data={filteredSlices}
         keyExtractor={item => item.id}
         renderItem={renderSliceItem}
@@ -683,6 +687,29 @@ const ReduxTab = React.memo(() => {
         ]}
         keyboardShouldPersistTaps="handled"
       />
+
+      <TouchableScale
+        onPress={() => {
+          try {
+            listRef.current?.scrollToOffset({
+              offset: 0,
+              animated: true,
+            });
+          } catch {
+            try {
+              listRef.current?.scrollToIndex({
+                index: 0,
+                animated: true,
+              });
+            } catch {}
+          }
+        }}
+        hitSlop={12}
+        style={styles.scrollTopBtn}>
+        <View style={{transform: [{rotate: '180deg'}]}}>
+          <ChevronIcon color={AppColors.white} size={18} />
+        </View>
+      </TouchableScale>
     </View>
   );
 });

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';
@@ -408,11 +409,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, flexShrink: 1, minWidth: 0}}>
+            <View style={styles.cardDateRow}>
+              <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,
+                    maxWidth: 160,
+                  },
+                ]}>
+                <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/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.7';
+export const LIB_VERSION = '2.3.9';

package/src/customHooks/networkLogger.ts

@@ -47,6 +47,8 @@ const IGNORED_URL_PATTERNS: RegExp[] = [
   /\/status(?:\?|$)/i,
   /127\.0\.0\.1:(?:8081|8082|8083|19000|19001|19002|3000|8000)/i,
   /localhost:(?:8081|8082|8083|19000|19001|19002|3000|8000)\/index\.bundle/i,
+  /google-analytics\.com\/mp\/collect/i,
+  /analytics\.google\.com/i,
 ];
 
 function shouldIgnoreUrl(url: string | undefined | null): boolean {

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))