react-native-inapp-inspector 2.3.7 → 2.3.9

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

@@ -92,7 +92,7 @@ export const NpmUpdateToast = () => {
         Linking.openURL('https://www.npmjs.com/package/react-native-inapp-inspector').catch(() => { });
         handleDismiss();
     };
-    if (!showUpdateToast || !visible || !updateAvailable || !latestNpmVersion)
+    if (typeof __DEV__ === 'undefined' || !__DEV__ || !showUpdateToast || !visible || !updateAvailable || !latestNpmVersion)
         return null;
     const progressWidth = progressAnim.interpolate({
         inputRange: [0, 1],

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

@@ -5,6 +5,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';
@@ -356,6 +357,8 @@ const PerformanceTab = React.memo(() => {
         </TouchableScale>
       </View>
 
+      <FeatureUnderDevNotice featureName="Performance & FPS Profiler"/>
+
       
       <View style={perfStyles.categoryScrollWrapper}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { FlatList, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useTranslation } from '../../i18n';
 import { useInspector } from './InspectorContext';
@@ -12,7 +12,7 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { getActionHistory, getReduxAutoRefresh, setReduxAutoRefresh, } from '../../customHooks/reduxLogger';
-import { TerminalIcon, SearchIcon, ClearIcon, LayersIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, LoadingSpinnerIcon, CircleAlertIcon, TextAaIcon, HeaderPauseIcon, } from '../NetworkIcons';
+import { TerminalIcon, SearchIcon, ClearIcon, LayersIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, LoadingSpinnerIcon, CircleAlertIcon, TextAaIcon, HeaderPauseIcon, ChevronIcon, } from '../NetworkIcons';
 const getOriginBadge = (originType) => {
     switch (originType) {
         case 'saga':
@@ -60,6 +60,7 @@ const getOriginBadge = (originType) => {
 const ReduxTab = React.memo(() => {
     const { t } = useTranslation();
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = useInspector();
+    const listRef = useRef(null);
     const [sortMode, setSortMode] = useState('latest');
     const [isReduxPaused, setIsReduxPaused] = useState(!getReduxAutoRefresh());
     const handleTogglePause = useCallback(() => {
@@ -453,10 +454,32 @@ const ReduxTab = React.memo(() => {
       </View>
 
       
-      <FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} 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>);
 });
 const reduxTabStyles = StyleSheet.create({

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

@@ -275,11 +275,12 @@ const SettingsPanel = () => {
         }}>
       <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 100, gap: 14 }} showsVerticalScrollIndicator={false}>
         
+        
         <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,
@@ -287,95 +288,79 @@ 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',
-        }}>
-            <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,
+            paddingHorizontal: 2,
         }}>
-              {t('settings.ramLimits')}
-            </Text>
-          </TouchableScale>
+            {[
+            {
+                key: 'module',
+                label: t('settings.modulesAndTools', 'Modules & Tools'),
+                Icon: LayersIcon,
+                badge: `${allModules.filter(m => stagedTabVisibility?.[m.key] || m.key === 'apis').length}/${allModules.length}`,
+            },
+            {
+                key: 'ui',
+                label: t('settings.uiPreferences', 'UI Preferences'),
+                Icon: ScreenIcon,
+            },
+            {
+                key: 'limits',
+                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' && (<View style={{ gap: 12 }}>

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

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { View, Text, ScrollView, FlatList, TextInput, Modal, Alert, StyleSheet, ActivityIndicator, Platform, } from 'react-native';
 import TouchableScale from '../TouchableScale';
+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, } from '../NetworkIcons';
+import { DatabaseIcon, SearchIcon, ClearIcon, PlusIcon, PencilIcon, TrashIcon, CopyIcon, CheckIcon, LayersIcon, ResetIcon, ChevronIcon, } from '../NetworkIcons';
 import { fetchStorageEntries, setStorageEntry, removeStorageEntry, clearStorageDriver, isAsyncStorageConnected, isMMKVConnected, getRegisteredMMKVInstanceIds, subscribeToStorageChanges, } from '../../customHooks/storageInspector';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
@@ -95,6 +96,7 @@ const StorageEntryCard = React.memo(function StorageEntryCard({ entry, isExpande
 });
 export const StorageTab = React.memo(() => {
     const { t } = useTranslation();
+    const listRef = useRef(null);
     const [activeDriver, setActiveDriver] = useState('asyncStorage');
     const [activeMMKVId, setActiveMMKVId] = useState('default');
     const [entries, setEntries] = useState([]);
@@ -360,19 +362,43 @@ export const StorageTab = React.memo(() => {
       {isLoading ? (<View style={styles.loadingContainer}>
           <ActivityIndicator size="small" color={AppColors.purple}/>
           <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}/>
-              </View>
-              <Text style={styles.emptyTitle}>
-                {search ? 'No matching keys found' : `No ${activeDriver === 'asyncStorage' ? 'AsyncStorage' : 'MMKV'} Keys`}
-              </Text>
-              <Text style={styles.emptySubtitle}>
-                {search
+        </View>) : (<>
+          <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>} ListFooterComponent={<View style={{ height: 60 }}/>}/>)}
+                </Text>
+              </View>} 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>
+          </TouchableScale>
+        </>)}
 
       
       <Modal visible={modalVisible} transparent animationType="fade" onRequestClose={() => setModalVisible(false)}>

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

@@ -32,6 +32,8 @@ export const UpdateAvailableModal = ({ visible, latestVersion, onClose, }) => {
     const fadeAnim = useState(new Animated.Value(0))[0];
     const scaleAnim = useState(new Animated.Value(0.92))[0];
     const installCommand = `npm install react-native-inapp-inspector@latest`;
+    if (typeof __DEV__ === 'undefined' || !__DEV__)
+        return null;
     useEffect(() => {
         if (visible) {
             setCopied(false);

package/dist/esm/components/LogCard.js

@@ -4,7 +4,7 @@ import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
 import { getStatusColor, getDurationColor, formatDateTime, getSize, } from '../helpers';
-import { CalendarIcon, ClockIcon, SizeIcon, GlobeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, } from './NetworkIcons';
+import { CalendarIcon, ClockIcon, SizeIcon, GlobeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, PinIcon, } from './NetworkIcons';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
 import HighlightText from './HighlightText';
@@ -310,9 +310,39 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
 
         
         <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/dist/esm/constants/version.d.ts

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

package/dist/esm/constants/version.js

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

package/dist/esm/customHooks/networkLogger.js

@@ -22,6 +22,8 @@ const IGNORED_URL_PATTERNS = [
     /\/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) {
     if (!url)

package/dist/esm/helpers/telemetry.js

@@ -79,6 +79,36 @@ async function getOrCreateClientId() {
         return `${Math.floor(100000000 + Math.random() * 900000000)}.${Math.floor(1000000000 + Math.random() * 9000000000)}`;
     }
 }
+function isDeviceEmulator() {
+    try {
+        if (Platform.OS === 'android') {
+            const c = Platform.constants || {};
+            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 || {};
+            const model = String(c.Model || '').toLowerCase();
+            return model.includes('simulator') || Boolean(c.isSimulator);
+        }
+    }
+    catch {
+        return false;
+    }
+    return false;
+}
 function getSystemMetadata(environment) {
     const rnConstants = Platform.constants;
     const rnVersion = rnConstants?.reactNativeVersion
@@ -87,6 +117,7 @@ function getSystemMetadata(environment) {
     const isHermes = Boolean(typeof global.HermesInternal === 'object' && global.HermesInternal !== null);
     const isFabric = Boolean(global?.nativeFabricUIManager !== undefined);
     const isDev = Boolean(typeof __DEV__ !== 'undefined' && __DEV__);
+    const isEmulator = isDeviceEmulator();
     return {
         lib_version: LIB_VERSION,
         platform: Platform.OS,
@@ -95,6 +126,9 @@ function getSystemMetadata(environment) {
         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/dist/esm/index.js

@@ -362,6 +362,9 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         return false;
     }, [latestNpmVersion]);
     useEffect(() => {
+        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))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "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/Inspector/AnalyticsTab.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState, useMemo, useEffect} from 'react';
+import React, {useCallback, useState, useMemo, useEffect, useRef} from 'react';
 import {
   FlatList,
   Pressable,
@@ -55,6 +55,7 @@ import {
   PinIcon,
   MoneyIcon,
   UserCheckIcon,
+  ChevronIcon,
 } from '../NetworkIcons';
 
 const AnalyticsHeader = React.memo(() => {
@@ -1090,6 +1091,7 @@ const AnalyticsTab = React.memo(() => {
     isAnalyticsFilterApplied,
   } = useInspector();
 
+  const listRef = useRef<FlatList>(null);
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
 
   const keyExtractor = useCallback(
@@ -1305,49 +1307,75 @@ const AnalyticsTab = React.memo(() => {
         style={{flex: 1}}
         onLayout={() => setIsAnalyticsLayoutReady(true)}>
         {isAnalyticsLayoutReady ? (
-          <FlatList
-            data={filteredAnalyticsEvents}
-            keyExtractor={keyExtractor}
-            ListHeaderComponent={AnalyticsHeader}
-            renderItem={renderItem}
-            initialNumToRender={12}
-            maxToRenderPerBatch={8}
-            windowSize={5}
-            removeClippedSubviews={true}
-            renderToHardwareTextureAndroid={true}
-            ListEmptyComponent={
-              <EmptyState
-                isSearch={analyticsSearch.length > 0}
-                searchQuery={analyticsSearch}
-                customTitle={
-                  analyticsSearch.length > 0
-                    ? 'No matching analytics events'
-                    : 'No analytics events yet'
-                }
-                customSub={
-                  analyticsSearch.length > 0
-                    ? `No events matched "${analyticsSearch}"`
-                    : 'Call setupAnalyticsLogger(analytics()) at app start.'
-                }
-                onClearSearch={() => setAnalyticsSearch('')}
-              />
-            }
-            ListFooterComponent={
-              filteredAnalyticsEvents.length > 0 ? (
-                <EndOfListFooter
-                  count={filteredAnalyticsEvents.length}
-                  label="events"
+          <>
+            <FlatList
+              ref={listRef}
+              data={filteredAnalyticsEvents}
+              keyExtractor={keyExtractor}
+              ListHeaderComponent={AnalyticsHeader}
+              renderItem={renderItem}
+              initialNumToRender={12}
+              maxToRenderPerBatch={8}
+              windowSize={5}
+              removeClippedSubviews={true}
+              renderToHardwareTextureAndroid={true}
+              ListEmptyComponent={
+                <EmptyState
+                  isSearch={analyticsSearch.length > 0}
+                  searchQuery={analyticsSearch}
+                  customTitle={
+                    analyticsSearch.length > 0
+                      ? 'No matching analytics events'
+                      : 'No analytics events yet'
+                  }
+                  customSub={
+                    analyticsSearch.length > 0
+                      ? `No events matched "${analyticsSearch}"`
+                      : 'Call setupAnalyticsLogger(analytics()) at app start.'
+                  }
+                  onClearSearch={() => setAnalyticsSearch('')}
                 />
-              ) : null
-            }
-            contentContainerStyle={[
-              styles.listContent,
-              filteredAnalyticsEvents.length === 0 && {
-                flexGrow: 1,
-              },
-            ]}
-            keyboardShouldPersistTaps="handled"
-          />
+              }
+              ListFooterComponent={
+                filteredAnalyticsEvents.length > 0 ? (
+                  <EndOfListFooter
+                    count={filteredAnalyticsEvents.length}
+                    label="events"
+                  />
+                ) : null
+              }
+              contentContainerStyle={[
+                styles.listContent,
+                filteredAnalyticsEvents.length === 0 && {
+                  flexGrow: 1,
+                },
+              ]}
+              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>
+          </>
         ) : null}
       </View>
     </>

package/src/components/Inspector/BundleTab.tsx

@@ -19,6 +19,7 @@ import HighlightText from '../HighlightText';
 import SegmentedTabs from '../SegmentedTabs';
 import AnimatedEntrance from '../AnimatedEntrance';
 import EndOfListFooter from '../EndOfListFooter';
+import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import {AppColors} from '../../styles/AppColors';
 import {AppFonts} from '../../styles/AppFonts';
 import styles from '../../styles';
@@ -1400,6 +1401,8 @@ const BundleTab = React.memo(() => {
         </TouchableScale>
       </View>
 
+      <FeatureUnderDevNotice featureName="Metro Bundle Analyzer" />
+
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}