react-native-inapp-inspector 1.1.35 → 2.0.0

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

@@ -176,10 +176,21 @@ const ReduxTab = React.memo(() => {
     // Filter & Sort slices: by default, the most recently updated item is at the FIRST position
     const filteredSlices = useMemo(() => {
         let list = sliceItems;
-        if (reduxSearch.trim().length > 0) {
-            const q = reduxSearch.toLowerCase();
-            list = list.filter(item => item.name.toLowerCase().includes(q) ||
-                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)));
+        if (reduxSearch && reduxSearch.trim().length > 0) {
+            const queryTokens = reduxSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
+            list = list.filter(item => {
+                const sliceVal = reduxState ? reduxState[item.name] : null;
+                const searchTarget = [
+                    item.name || '',
+                    item.lastAction?.type || '',
+                    item.lastAction?.payloadPreview || '',
+                    item.lastAction?.originType || '',
+                    item.status || '',
+                    item.statusMessage || '',
+                    sliceVal ? (typeof sliceVal === 'string' ? sliceVal : JSON.stringify(sliceVal)) : '',
+                ].join(' ').toLowerCase();
+                return queryTokens.every(tok => searchTarget.includes(tok));
+            });
         }
         return [...list].sort((a, b) => {
             if (sortMode === 'latest') {
@@ -189,12 +200,9 @@ const ReduxTab = React.memo(() => {
                 }
                 return a.name.localeCompare(b.name);
             }
-            else {
-                // Alphabetical A-Z
-                return a.name.localeCompare(b.name);
-            }
+            return a.name.localeCompare(b.name);
         });
-    }, [sliceItems, reduxSearch, sortMode]);
+    }, [sliceItems, reduxSearch, sortMode, reduxState]);
     const lastGlobalAction = useMemo(() => {
         const actions = Object.values(reduxLastActionMap);
         if (actions.length === 0)
@@ -438,7 +446,7 @@ const ReduxTab = React.memo(() => {
       </View>
 
       {/* ─── FlatList of Slices ─── */}
-      <FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={15} maxToRenderPerBatch={10} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+      <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={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect } from 'react';
-import { Alert, Platform, ScrollView, StatusBar, Text, View, } from 'react-native';
+import { Alert, Platform, ScrollView, StatusBar, Text, TextInput, View, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import LinearGradient from 'react-native-linear-gradient';
 import { animateNextLayout, useInspector } from './InspectorContext';
@@ -8,7 +8,7 @@ import styles, { toggleGlobalTheme } from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { LIB_VERSION } from '../../constants';
-import { isPersistentStorageAvailable } from '../../helpers/settingsStore';
+import { isPersistentStorageAvailable, calculateRamBasedLimits, } from '../../helpers/settingsStore';
 import { clearNetworkLogs } from '../../customHooks/networkLogger';
 import { clearConsoleLogs } from '../../customHooks/consoleLogger';
 import { clearAnalyticsEvents } from '../../customHooks/analyticsLogger';
@@ -21,7 +21,8 @@ import { useTranslation } from '../../i18n';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, WhiteBackNavigation, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, ForwardChevronIcon, } from '../NetworkIcons';
 const SettingsPanel = () => {
     const { t } = useTranslation();
-    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
+    const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit, isAutoRamLimitEnabled, setIsAutoRamLimitEnabled, deviceFreeRamMb, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
+    const autoRamProfile = calculateRamBasedLimits(deviceFreeRamMb);
     const isPersistent = isPersistentStorageAvailable();
     // Safe Area & Status Bar Padding for All Device Form Factors
     const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight || 24 : 44;
@@ -664,9 +665,204 @@ const SettingsPanel = () => {
                     </View>);
                 })}
               </View>
-            </View>) : (
-            /* UI Preferences Subtab */
-            <View style={{ gap: 14 }}>
+
+              {/* Section 3.5: RAM-Based Auto Limits */}
+              <View style={{
+                    backgroundColor: AppColors.primaryLight,
+                    borderRadius: 14,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    padding: 14,
+                    gap: 12,
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    lineHeight: 14,
+                    color: AppColors.grayTextWeak,
+                    letterSpacing: 0.8,
+                }}>
+                  RAM-Based Auto Limits
+                </Text>
+
+                {/* Auto RAM Limit Toggle */}
+                <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }}>
+                  <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                    flex: 1,
+                }}>
+                    <View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
+                    backgroundColor: AppColors.purpleShade50,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                      <PerformanceIcon color={AppColors.purple} size={15}/>
+                    </View>
+                    <View style={{ flex: 1 }}>
+                      <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 13.5,
+                    lineHeight: 18,
+                    color: AppColors.primaryBlack,
+                }}>
+                        Auto-Calculate Limits from Device RAM
+                      </Text>
+                      <Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        Automatically set API, Logs, Analytics & Crash limits based on available memory
+                      </Text>
+                    </View>
+                  </View>
+
+                  <TouchableScale accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle auto RAM limit calculation" accessibilityState={{ checked: isAutoRamLimitEnabled }} onPress={() => setIsAutoRamLimitEnabled(prev => !prev)} style={{
+                    width: 42,
+                    height: 24,
+                    borderRadius: 12,
+                    backgroundColor: isAutoRamLimitEnabled
+                        ? AppColors.purple
+                        : AppColors.grayBorderSecondary,
+                    padding: 2,
+                    justifyContent: 'center',
+                    alignItems: isAutoRamLimitEnabled ? 'flex-end' : 'flex-start',
+                }}>
+                    <View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 10,
+                    backgroundColor: AppColors.white,
+                    shadowColor: AppColors.black,
+                    shadowOpacity: 0.18,
+                    shadowRadius: 2,
+                    shadowOffset: { width: 0, height: 1 },
+                }}/>
+                  </TouchableScale>
+                </View>
+
+                <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
+
+                {/* Device Free RAM Display */}
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+                  <View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
+                    backgroundColor: isAutoRamLimitEnabled
+                        ? `${AppColors.purple}14`
+                        : AppColors.grayBackground,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <SignalIcon color={isAutoRamLimitEnabled ? AppColors.purple : AppColors.grayTextWeak} size={15}/>
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 13.5,
+                    lineHeight: 18,
+                    color: isAutoRamLimitEnabled
+                        ? AppColors.primaryBlack
+                        : AppColors.grayText,
+                }}>
+                      Detected Free RAM
+                    </Text>
+                    <Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                      {deviceFreeRamMb} MB available
+                    </Text>
+                  </View>
+                  <View style={{
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    borderRadius: 8,
+                    backgroundColor: isAutoRamLimitEnabled
+                        ? `${AppColors.purple}12`
+                        : AppColors.grayBackground,
+                    borderWidth: 1,
+                    borderColor: isAutoRamLimitEnabled
+                        ? `${AppColors.purple}26`
+                        : AppColors.dividerColor,
+                }}>
+                    <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 12,
+                    lineHeight: 15,
+                    color: isAutoRamLimitEnabled
+                        ? AppColors.purple
+                        : AppColors.grayText,
+                }}>
+                      {deviceFreeRamMb} MB
+                    </Text>
+                  </View>
+                </View>
+
+                {/* Current Auto-Calculated Limits Preview */}
+                {isAutoRamLimitEnabled && (<View style={{ marginTop: 8, paddingTop: 8, borderTopWidth: 1, borderTopColor: AppColors.dividerColor, gap: 6 }}>
+                    <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 11.5,
+                        lineHeight: 15,
+                        color: AppColors.purple,
+                    }}>
+                      Auto Profile: {autoRamProfile.profileName}
+                    </Text>
+                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+                      {[
+                        { label: 'APIs', value: autoRamProfile.maxNetworkLogs, color: AppColors.blue500 },
+                        { label: 'Logs', value: autoRamProfile.maxConsoleLogs, color: AppColors.sky500 },
+                        { label: 'Analytics', value: autoRamProfile.maxAnalyticsEvents, color: AppColors.purple },
+                        { label: 'Crash', value: autoRamProfile.maxCrashRecords, color: AppColors.errorColor },
+                    ].map(item => (<View key={item.label} style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                            paddingHorizontal: 8,
+                            paddingVertical: 4,
+                            borderRadius: 6,
+                            backgroundColor: `${item.color}14`,
+                            borderWidth: 1,
+                            borderColor: `${item.color}33`,
+                        }}>
+                          <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
+                            lineHeight: 14,
+                            color: item.color,
+                        }}>
+                            {item.label}
+                          </Text>
+                          <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
+                            lineHeight: 14,
+                            color: item.color,
+                        }}>
+                            {item.value}
+                          </Text>
+                        </View>))}
+                    </View>
+                  </View>)}
+              </View>
+            </View>) : (<View style={{ gap: 14 }}>
               {/* Section 1: Appearance */}
               <View style={{
                     backgroundColor: AppColors.primaryLight,
@@ -1421,83 +1617,128 @@ const SettingsPanel = () => {
         setSettingsPage('main');
     };
     // Helper: settings row with icon + label + optional description
-    const renderSettingRow = (opts) => (<View style={{
-            paddingVertical: 12,
-            borderBottomWidth: opts.isLast ? 0 : 1,
-            borderBottomColor: AppColors.dividerColor,
-        }}>
-      <TouchableScale disabled={!opts.onPress} onPress={opts.onPress} style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 12,
-        }}>
-        <View style={{
-            width: 36,
-            height: 36,
-            borderRadius: 10,
-            backgroundColor: AppColors.purpleShade50,
-            borderWidth: 1,
-            borderColor: `${AppColors.purple}2E`,
-            alignItems: 'center',
-            justifyContent: 'center',
-        }}>
-          {opts.icon}
-        </View>
-        <View style={{ flex: 1 }}>
-          <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 14,
-            lineHeight: 18,
-            color: AppColors.primaryBlack,
-        }}>
-            {opts.label}
-          </Text>
-          {opts.description ? (<Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11,
-                lineHeight: 15,
-                color: AppColors.grayText,
-                marginTop: 1,
+    const renderSettingRow = (opts) => {
+        return (<View style={{
+                paddingVertical: 12,
+                borderBottomWidth: opts.isLast ? 0 : 1,
+                borderBottomColor: AppColors.dividerColor,
             }}>
-              {opts.description}
-            </Text>) : null}
-        </View>
-        {opts.right || null}
-      </TouchableScale>
-      {opts.picker && (<View style={{
+        <TouchableScale disabled={!opts.onPress} onPress={opts.onPress} style={{
                 flexDirection: 'row',
-                backgroundColor: AppColors.grayBackground,
-                borderRadius: 8,
-                padding: 2.5,
-                marginTop: 10,
+                alignItems: 'center',
+                gap: 12,
+            }}>
+          <View style={{
+                width: 36,
+                height: 36,
+                borderRadius: 10,
+                backgroundColor: AppColors.purpleShade50,
                 borderWidth: 1,
-                borderColor: AppColors.dividerColor,
+                borderColor: `${AppColors.purple}2E`,
+                alignItems: 'center',
+                justifyContent: 'center',
             }}>
-          {opts.picker.options.map(opt => {
-                const isActive = opts.picker.selectedValue === opt;
-                return (<TouchableScale key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
-                        flex: 1,
-                        paddingVertical: 6,
-                        alignItems: 'center',
-                        borderRadius: 6,
-                        backgroundColor: isActive
-                            ? AppColors.purple
-                            : 'transparent',
-                    }}>
-                <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        lineHeight: 14,
-                        color: isActive ? AppColors.white : AppColors.grayText,
+            {opts.icon}
+          </View>
+          <View style={{ flex: 1 }}>
+            <Text style={{
+                fontFamily: AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors.primaryBlack,
+            }}>
+              {opts.label}
+            </Text>
+            {opts.description ? (<Text style={{
+                    fontFamily: AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                {opts.description}
+              </Text>) : null}
+          </View>
+          {opts.right || null}
+        </TouchableScale>
+        {opts.numericInput && (<View style={{ marginTop: 10, gap: 6 }}>
+            <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: AppColors.grayBackground,
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors.dividerColor,
+                    paddingHorizontal: 12,
+                    paddingVertical: 4,
+                }}>
+              <TextInput style={{
+                    flex: 1,
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 14,
+                    lineHeight: 18,
+                    color: AppColors.primaryBlack,
+                    paddingVertical: 6,
+                }} value={String(opts.numericInput.value || '')} onChangeText={text => {
+                    const num = parseInt(text.replace(/[^0-9]/g, ''), 10);
+                    if (!isNaN(num)) {
+                        const clamped = Math.max(opts.numericInput?.min ?? 1, Math.min(opts.numericInput?.max ?? 10000, num));
+                        opts.numericInput?.onChange(clamped);
+                    }
+                }} keyboardType={opts.numericInput.keyboardType ?? 'number-pad'} placeholder={opts.numericInput.placeholder} placeholderTextColor={AppColors.grayTextWeak} maxLength={6} selectTextOnFocus/>
+              <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors.purple,
+                    marginLeft: 6,
+                }}>
+                MAX
+              </Text>
+            </View>
+            {opts.numericInput.min !== undefined || opts.numericInput.max !== undefined ? (<Text style={{
+                        fontFamily: AppFonts.interRegular,
+                        fontSize: 10,
+                        lineHeight: 13,
+                        color: AppColors.grayTextWeak,
                     }}>
-                  {opts.picker.formatLabel
-                        ? opts.picker.formatLabel(opt)
-                        : opt}
-                </Text>
-              </TouchableScale>);
-            })}
-        </View>)}
-    </View>);
+                Range: {opts.numericInput.min ?? 1} - {opts.numericInput.max ?? '∞'}
+              </Text>) : null}
+          </View>)}
+        {opts.picker && (<View style={{
+                    flexDirection: 'row',
+                    backgroundColor: AppColors.grayBackground,
+                    borderRadius: 8,
+                    padding: 2.5,
+                    marginTop: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors.dividerColor,
+                }}>
+            {opts.picker.options.map(opt => {
+                    const isActive = opts.picker.selectedValue === opt;
+                    return (<TouchableScale key={String(opt)} onPress={() => opts.picker.onSelect(opt)} style={{
+                            flex: 1,
+                            paddingVertical: 6,
+                            alignItems: 'center',
+                            borderRadius: 6,
+                            backgroundColor: isActive
+                                ? AppColors.purple
+                                : 'transparent',
+                        }}>
+                  <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 11,
+                            lineHeight: 14,
+                            color: isActive ? AppColors.white : AppColors.grayText,
+                        }}>
+                    {opts.picker.formatLabel
+                            ? opts.picker.formatLabel(opt)
+                            : opt}
+                  </Text>
+                </TouchableScale>);
+                })}
+          </View>)}
+      </View>);
+    };
     let content = null;
     let title = '';
     let icon = null;
@@ -1518,10 +1759,12 @@ const SettingsPanel = () => {
                 icon: <SignalIcon color={AppColors.purple} size={16}/>,
                 label: t('settings.apis.maxRequestLogs'),
                 description: t('settings.apis.maxRequestLogsDescription'),
-                picker: {
-                    options: [50, 100, 200, 500],
-                    selectedValue: maxNetworkLogs,
-                    onSelect: setMaxNetworkLogs,
+                numericInput: {
+                    value: maxNetworkLogs,
+                    onChange: setMaxNetworkLogs,
+                    min: 10,
+                    max: 5000,
+                    placeholder: 'Enter max requests (10-5000)',
                 },
                 isLast: true,
             })}
@@ -1582,10 +1825,12 @@ const SettingsPanel = () => {
                 icon: <TerminalIcon color={AppColors.purple} size={16}/>,
                 label: t('settings.logs.maxConsoleLogs'),
                 description: t('settings.logs.maxConsoleLogsDescription'),
-                picker: {
-                    options: [100, 200, 500, 1000],
-                    selectedValue: maxConsoleLogs,
-                    onSelect: setMaxConsoleLogs,
+                numericInput: {
+                    value: maxConsoleLogs,
+                    onChange: setMaxConsoleLogs,
+                    min: 10,
+                    max: 10000,
+                    placeholder: 'Enter max logs (10-10000)',
                 },
             })}
           <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
@@ -1702,6 +1947,13 @@ const SettingsPanel = () => {
                 icon: <AnalyticsIcon color={AppColors.purple} size={16}/>,
                 label: t('settings.analytics.maxAnalyticsEvents'),
                 description: t('settings.analytics.maxAnalyticsEventsDescription', { count: analyticsEvents.length }),
+                numericInput: {
+                    value: maxAnalyticsEventsLimit,
+                    onChange: setMaxAnalyticsEventsLimit,
+                    min: 10,
+                    max: 5000,
+                    placeholder: 'Enter max events (10-5000)',
+                },
                 isLast: true,
             })}
         </View>
@@ -1848,10 +2100,12 @@ const SettingsPanel = () => {
                 icon: <LayersIcon color={AppColors.purple} size={16}/>,
                 label: t('settings.crash.maxCrashLogs'),
                 description: t('settings.crash.maxCrashLogsDesc'),
-                picker: {
-                    options: [25, 50, 100, 200],
-                    selectedValue: maxCrashLogs || 100,
-                    onSelect: val => setMaxCrashLogs(val),
+                numericInput: {
+                    value: maxCrashLogs,
+                    onChange: setMaxCrashLogs,
+                    min: 5,
+                    max: 500,
+                    placeholder: 'Enter max crashes (5-500)',
                 },
             })}
           <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Animated, ScrollView, Text, View } from 'react-native';
+import { Animated, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
+import { triggerNativeHaptic } from '../../native/NativeInspector';
 const TabBar = React.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
     const isReduxAvail = isReduxConnected();
@@ -80,7 +80,10 @@ const TabBar = React.memo(() => {
                 consoleLogs.length > lastReadLogsCount;
             const hasUnreadCrashes = activeTab !== 'crash' &&
                 (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
-            return (<TouchableScale key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
+            return (<TouchableOpacity key={tab.key} activeOpacity={0.7} onPress={() => {
+                    switchActiveTab(tab.key);
+                    triggerNativeHaptic('light');
+                }} style={[
                     styles.contentTabButton,
                     isActive && styles.contentTabButtonActive,
                 ]}>
@@ -116,7 +119,7 @@ const TabBar = React.memo(() => {
                         transform: [{ scale: unreadPulseAnim }],
                     }}/>)}
                 </View>
-              </TouchableScale>);
+              </TouchableOpacity>);
         })}
       </ScrollView>
     </View>);

package/dist/esm/components/NetworkIcons.d.ts

@@ -124,3 +124,4 @@ export declare const SmartphoneIcon: ({ color, size }: IconProps) => React.JSX.E
 export declare const AlertTriangleIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const BugIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -700,3 +700,7 @@ export const TagIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg
     <Path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8 8a2 2 0 0 0 2.828 0l7.172-7.172a2 2 0 0 0 0-2.828l-8-8z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
     <Circle cx="7.5" cy="7.5" r="1.5" fill={color}/>
   </Svg>);
+export const NpmIcon = ({ color = '#CB3837', size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 256 256" fill="none">
+    <Rect width="256" height="256" rx="32" fill={color}/>
+    <Path d="M48 48h160v160h-32V96h-32v112H48V48z" fill="#FFFFFF"/>
+  </Svg>);

package/dist/esm/components/TouchableScale.d.ts

@@ -7,6 +7,7 @@ export interface TouchableScaleProps extends PressableProps {
     children?: React.ReactNode;
     hitSlop?: any;
     disabled?: boolean;
+    enableHaptics?: boolean;
 }
 declare const TouchableScale: React.NamedExoticComponent<TouchableScaleProps>;
 export default TouchableScale;