react-native-inapp-inspector 2.3.8 → 2.3.10

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

@@ -1,99 +1,53 @@
 import React, { useCallback, useMemo, useRef } from 'react';
-import { Animated, FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
+import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
 import { animateNextLayout, useInspector } from './InspectorContext';
-import useAccordion from '../../customHooks/useAccordion';
 import TouchableScale from '../TouchableScale';
 import AnimatedEntrance from '../AnimatedEntrance';
 import DomainHeader from '../DomainHeader';
 import LogCard from '../LogCard';
 import EmptyState from '../EmptyState';
 import EndOfListFooter from '../EndOfListFooter';
+import NetworkFilterModal from './NetworkFilterModal';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { STATUS_FILTERS, METHOD_COLORS } from '../../constants';
+import { METHOD_COLORS } from '../../constants';
 import { useTranslation } from '../../i18n';
 import { SearchIcon, ClearIcon, TrashIcon, SortArrowIcon, FilterIcon, ChevronIcon, CircleCheckIcon, CircleXIcon, CircleAlertIcon, LayersIcon, HeaderPauseIcon, ClockIcon, GlobeIcon, RequestIcon, ResponseIcon, HeadersIcon, AtomIcon, BoltIcon, ShieldAlertIcon, } from '../NetworkIcons';
-const STATUS_META = {
-    ALL: { color: AppColors.grayText, Icon: LayersIcon },
-    '2xx': { color: AppColors.greenColor, Icon: CircleCheckIcon },
-    '200': { color: AppColors.greenColor, Icon: CircleCheckIcon },
-    '3xx': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
-    '300': { color: AppColors.warningIconGold, Icon: CircleAlertIcon },
-    '4xx': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
-    '400': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
-    '404': { color: AppColors.darkOrange, Icon: CircleAlertIcon },
-    '5xx': { color: AppColors.errorColor, Icon: CircleXIcon },
-    '500': { color: AppColors.errorColor, Icon: CircleXIcon },
-    Failed: { color: AppColors.errorColor, Icon: CircleXIcon },
-};
-const getStatusMeta = (filter) => {
-    if (STATUS_META[filter])
-        return STATUS_META[filter];
-    const num = parseInt(filter, 10);
-    if (!isNaN(num)) {
-        if (num >= 200 && num < 300)
-            return { color: AppColors.greenColor, Icon: CircleCheckIcon };
-        if (num >= 300 && num < 400)
-            return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
-        if (num >= 400 && num < 500)
-            return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
-        if (num >= 500)
-            return { color: AppColors.errorColor, Icon: CircleXIcon };
-    }
-    if (filter.startsWith('2'))
-        return { color: AppColors.greenColor, Icon: CircleCheckIcon };
-    if (filter.startsWith('3'))
-        return { color: AppColors.warningIconGold, Icon: CircleAlertIcon };
-    if (filter.startsWith('4'))
-        return { color: AppColors.darkOrange, Icon: CircleAlertIcon };
-    if (filter.startsWith('5'))
-        return { color: AppColors.errorColor, Icon: CircleXIcon };
-    return { color: AppColors.grayText, Icon: LayersIcon };
-};
-const FilterChip = React.memo(({ label, color, Icon, badge, active, onPress, }) => {
-    const iconColor = active ? color : AppColors.grayTextWeak;
-    return (<TouchableScale style={styles.statusFilterWrap} onPress={onPress} hitSlop={10}>
-      <View style={[
-            styles.statusFilterChip,
-            {
-                paddingHorizontal: 9,
-                paddingVertical: 5,
-                borderRadius: 7,
-                borderWidth: 1,
-                borderColor: active ? color : `${AppColors.grayBorderSecondary}`,
-                backgroundColor: active ? `${color}14` : AppColors.grayBackground,
-            },
-            active && {
-                shadowColor: color,
-                shadowOffset: { width: 0, height: 1 },
-                shadowOpacity: 0.2,
-                shadowRadius: 2,
-                elevation: 1.5,
-            },
-        ]}>
-        {badge != null ? (<View style={[
-                styles.methodBadgeMini,
-                { backgroundColor: badge },
-            ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
-        <Text numberOfLines={1} style={[
-            styles.statusFilterText,
-            {
-                color: active ? color : AppColors.grayText,
-                fontFamily: active ? AppFonts.interBold : AppFonts.interMedium,
-            },
-        ]}>
-          {label}
-        </Text>
-      </View>
-    </TouchableScale>);
-});
 const NetworkTab = React.memo(() => {
     const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = useInspector();
     const { t } = useTranslation();
-    const filtersAccordion = useAccordion(false, 300, 260);
     const apisListRef = useRef(null);
+    const [isFilterModalOpen, setIsFilterModalOpen] = React.useState(false);
     const [isSearchFocused, setIsSearchFocused] = React.useState(false);
+    const modalFilterState = useMemo(() => ({
+        statusCodes: statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
+        methods: methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
+        latency: 'all',
+        protocol: 'all',
+        sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
+    }), [statusFilters, methodFilters, sortOrder]);
+    const handleApplyNetworkFilters = useCallback((newFilters) => {
+        if (newFilters.statusCodes.has('all') ||
+            newFilters.statusCodes.size === 0) {
+            setStatusFilters(new Set());
+        }
+        else {
+            setStatusFilters(new Set(newFilters.statusCodes));
+        }
+        if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
+            setMethodFilters(new Set());
+        }
+        else {
+            setMethodFilters(new Set([...newFilters.methods].map(m => m)));
+        }
+        if (newFilters.sortBy === 'time_asc') {
+            setSortOrder('oldest');
+        }
+        else {
+            setSortOrder('newest');
+        }
+    }, [setStatusFilters, setMethodFilters, setSortOrder]);
     const quickCounts = useMemo(() => {
         let errorCount = 0;
         let successCount = 0;
@@ -520,10 +474,12 @@ const NetworkTab = React.memo(() => {
 
                 <TouchableScale style={[
                 styles.toolbarBtn,
-                filtersAccordion.isOpen &&
-                    styles.toolbarBtnActive,
-            ]} onPress={filtersAccordion.toggleOpen} hitSlop={6}>
-                  <FilterIcon color={filtersAccordion.isOpen
+                (statusFilters.size > 0 || methodFilters.size > 0) && {
+                    borderColor: AppColors.purple,
+                    backgroundColor: `${AppColors.purple}15`,
+                },
+            ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
+                  <FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
                 ? AppColors.purple
                 : AppColors.grayTextStrong} size={16}/>
                   {(statusFilters.size > 0 ||
@@ -685,6 +641,51 @@ const NetworkTab = React.memo(() => {
                       </View>
                     </TouchableScale>);
             })}
+
+                <TouchableScale onPress={() => setIsFilterModalOpen(true)}>
+                  <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingHorizontal: 10,
+                paddingVertical: 4.5,
+                borderRadius: 8,
+                backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? `${AppColors.purple}20`
+                    : AppColors.grayBackground,
+                borderWidth: 1,
+                borderColor: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors.purple
+                    : AppColors.grayBorderSecondary,
+                gap: 5,
+            }}>
+                    <FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
+                ? AppColors.purple
+                : AppColors.grayText}/>
+                    <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 10.5,
+                color: statusFilters.size > 0 || methodFilters.size > 0
+                    ? AppColors.purple
+                    : AppColors.grayText,
+            }}>
+                      More Filters
+                    </Text>
+                    {(statusFilters.size > 0 || methodFilters.size > 0) && (<View style={{
+                    backgroundColor: AppColors.purple,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 6,
+                }}>
+                        <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: AppColors.white,
+                }}>
+                          {statusFilters.size + methodFilters.size}
+                        </Text>
+                      </View>)}
+                  </View>
+                </TouchableScale>
               </ScrollView>
             </View>
 
@@ -833,86 +834,24 @@ const NetworkTab = React.memo(() => {
                 </TouchableScale>
               </View>)}
 
-            <Animated.View style={[
-                filtersAccordion.bodyStyle,
-                { overflow: 'hidden' },
-            ]}>
-              <View style={styles.filtersContainer}>
-                <Text style={styles.filtersHeading}>
-                  STATUS
-                </Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
-                  {STATUS_FILTERS.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? statusFilters.size === 0
-                    : statusFilters.has(filter);
-                const meta = getStatusMeta(filter);
-                return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
-                        if (isAll) {
-                            setStatusFilters(new Set());
-                        }
-                        else {
-                            setStatusFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </ScrollView>
-
-                <Text style={[
-                styles.filtersHeading,
-                { marginTop: 16 },
-            ]}>
-                  METHOD
-                </Text>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.statusRowContent}>
-                  {availableMethods.map(filter => {
-                const isAll = filter === 'ALL';
-                const active = isAll
-                    ? methodFilters.size === 0
-                    : methodFilters.has(filter);
-                const methodColor = METHOD_COLORS[filter] ??
-                    METHOD_COLORS.ALL;
-                return (<FilterChip key={filter} label={filter} color={methodColor} badge={methodColor} active={active} onPress={() => {
-                        if (isAll) {
-                            setMethodFilters(new Set());
-                        }
-                        else {
-                            setMethodFilters(prev => {
-                                const next = new Set(prev);
-                                next.has(filter)
-                                    ? next.delete(filter)
-                                    : next.add(filter);
-                                return next;
-                            });
-                        }
-                    }}/>);
-            })}
-                </ScrollView>
-              </View>
-            </Animated.View>
-
             {(search ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0) && (<Text style={styles.resultCount}>
+                methodFilters.size > 0 ||
+                quickFilter !== 'all') && (<Text style={styles.resultCount}>
                 {filteredLogs.length === logs.length
                     ? `${logs.length} requests`
                     : `${filteredLogs.length} of ${logs.length} filtered requests`}
               </Text>)}
           </View>} ListEmptyComponent={<EmptyState isSearch={search.length > 0 ||
                 statusFilters.size > 0 ||
-                methodFilters.size > 0} searchQuery={search} customTitle={search.length > 0
+                methodFilters.size > 0 ||
+                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
                 ? 'No matching API requests'
                 : 'No network activity'} onClearSearch={() => {
                 setSearch('');
                 setStatusFilters(new Set());
                 setMethodFilters(new Set());
+                setQuickFilter('all');
                 setSearchScope('all');
             }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
             styles.listContent,
@@ -940,6 +879,9 @@ const NetworkTab = React.memo(() => {
           <ChevronIcon color={AppColors.white} size={18}/>
         </View>
       </TouchableScale>
+
+      
+      <NetworkFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
     </View>);
 });
 export default NetworkTab;

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