react-native-inapp-inspector 1.1.35 → 2.0.1

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

@@ -55,39 +55,70 @@ const NetworkIcons_1 = require("../NetworkIcons");
 const STATUS_META = {
     ALL: { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon },
     '2xx': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
+    '200': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
     '3xx': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
+    '300': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
     '4xx': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
+    '400': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
+    '404': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
     '5xx': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
+    '500': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
     Failed: { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.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_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
+        if (num >= 300 && num < 400)
+            return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
+        if (num >= 400 && num < 500)
+            return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
+        if (num >= 500)
+            return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
+    }
+    if (filter.startsWith('2'))
+        return { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon };
+    if (filter.startsWith('3'))
+        return { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon };
+    if (filter.startsWith('4'))
+        return { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon };
+    if (filter.startsWith('5'))
+        return { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon };
+    return { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon };
+};
 const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, onPress, }) => {
     const iconColor = active ? color : AppColors_1.AppColors.grayTextWeak;
     return (<TouchableScale_1.default style={styles_1.default.statusFilterWrap} onPress={onPress} hitSlop={10}>
       <react_native_1.View style={[
             styles_1.default.statusFilterChip,
+            {
+                paddingHorizontal: 9,
+                paddingVertical: 5,
+                borderRadius: 7,
+                borderWidth: 1,
+                borderColor: active ? color : `${AppColors_1.AppColors.grayBorderSecondary}`,
+                backgroundColor: active ? `${color}14` : AppColors_1.AppColors.grayBackground,
+            },
             active && {
-                borderColor: color,
-                backgroundColor: `${color}12`,
+                shadowColor: color,
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.2,
+                shadowRadius: 2,
+                elevation: 1.5,
             },
         ]}>
-        <react_native_1.View style={[
-            styles_1.default.filterCheckbox,
-            active && [
-                styles_1.default.filterCheckboxActive,
-                { backgroundColor: color },
-            ],
-        ]}>
-          {active && (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white} size={10}/>)}
-        </react_native_1.View>
         {badge != null ? (<react_native_1.View style={[
                 styles_1.default.methodBadgeMini,
                 { backgroundColor: badge },
             ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
         <react_native_1.Text numberOfLines={1} style={[
             styles_1.default.statusFilterText,
-            active && {
-                color,
-                fontFamily: AppFonts_1.AppFonts.interBold,
+            {
+                color: active ? color : AppColors_1.AppColors.grayText,
+                fontFamily: active ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
             },
         ]}>
           {label}
@@ -100,6 +131,19 @@ const NetworkTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
+    const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const QUICK_API_QUERY_TAGS = (0, react_1.useMemo)(() => [
+        { label: '⚠️ Failed', query: 'is:error' },
+        { label: '🐢 Slow >1s', query: 'slow:>1s' },
+        { label: 'POST', query: 'm:POST' },
+        { label: 'GET', query: 'm:GET' },
+        { label: 'GraphQL', query: 'is:graphql' },
+        { label: 'Axios', query: 'client:axios' },
+        { label: '200 OK', query: 'status:200' },
+        { label: '404', query: 'status:404' },
+        { label: '500', query: 'status:500' },
+        { label: '🔒 HTTPS', query: 'is:https' },
+    ], []);
     const networkMetrics = (0, react_1.useMemo)(() => {
         if (!logs || logs.length === 0)
             return null;
@@ -172,7 +216,7 @@ const NetworkTab = react_1.default.memo(() => {
         setSelected,
     ]);
     return (<react_native_1.View style={{ flex: 1 }}>
-      <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 6 }}>
+      <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 6 }}>
             {/* Network Health & Telemetry Strip */}
             {networkMetrics != null && networkMetrics.totalCount > 0 && (<react_native_1.View style={{
                     flexDirection: 'row',
@@ -234,12 +278,38 @@ const NetworkTab = react_1.default.memo(() => {
               </react_native_1.View>)}
 
             <react_native_1.View style={styles_1.default.toolbarRow}>
-              <react_native_1.View style={styles_1.default.searchContainer}>
-                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-                <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                  </react_native_1.Pressable>)}
+              <react_native_1.View style={[
+                styles_1.default.searchContainer,
+                isSearchFocused && {
+                    borderColor: AppColors_1.AppColors.purple,
+                    borderWidth: 1.5,
+                },
+            ]}>
+                <NetworkIcons_1.SearchIcon color={isSearchFocused ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak} size={16}/>
+                <react_native_1.TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                {search.length > 0 && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }}>
+                    <react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                }}>
+                      <react_native_1.Text style={{
+                    color: AppColors_1.AppColors.purple,
+                    fontSize: 10,
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                }}>
+                        {filteredLogs.length}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                    </react_native_1.Pressable>
+                  </react_native_1.View>)}
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
@@ -286,6 +356,49 @@ const NetworkTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
 
+            {/* Advanced Search Quick Query Suggestions Bar */}
+            {(isSearchFocused || search.length > 0) && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
+                    paddingHorizontal: 12,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                {QUICK_API_QUERY_TAGS.map(item => {
+                    const isSelected = search.includes(item.query);
+                    return (<TouchableScale_1.default key={item.query} onPress={() => {
+                            if (isSelected) {
+                                setSearch(prev => prev.replace(item.query, '').trim());
+                            }
+                            else {
+                                setSearch(prev => prev ? `${prev} ${item.query}`.trim() : item.query);
+                            }
+                        }}>
+                      <react_native_1.View style={{
+                            paddingHorizontal: 8,
+                            paddingVertical: 3.5,
+                            borderRadius: 6,
+                            backgroundColor: isSelected
+                                ? AppColors_1.AppColors.purple
+                                : `${AppColors_1.AppColors.purple}14`,
+                            borderWidth: 1,
+                            borderColor: isSelected
+                                ? AppColors_1.AppColors.purple
+                                : `${AppColors_1.AppColors.purple}30`,
+                        }}>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10,
+                            color: isSelected
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.purple,
+                        }}>
+                          {item.label}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </TouchableScale_1.default>);
+                })}
+              </react_native_1.ScrollView>)}
+
             <react_native_1.Animated.View style={[
                 filtersAccordion.bodyStyle,
                 { overflow: 'hidden' },
@@ -300,10 +413,7 @@ const NetworkTab = react_1.default.memo(() => {
                 const active = isAll
                     ? statusFilters.size === 0
                     : statusFilters.has(filter);
-                const meta = STATUS_META[filter] ?? {
-                    color: AppColors_1.AppColors.grayText,
-                    Icon: NetworkIcons_1.LayersIcon,
-                };
+                const meta = getStatusMeta(filter);
                 return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
                         if (isAll) {
                             setStatusFilters(new Set());
@@ -367,11 +477,22 @@ const NetworkTab = react_1.default.memo(() => {
         ]} keyboardShouldPersistTaps="handled"/>
       {/* #2 — always-visible scroll-to-top, bottom right */}
       <TouchableScale_1.default onPress={() => {
-            apisListRef.current?.scrollToOffset({
-                offset: 0,
-                animated: true,
-            });
-        }} hitSlop={10} style={styles_1.default.scrollTopBtn}>
+            try {
+                apisListRef.current?.scrollToOffset({
+                    offset: 0,
+                    animated: true,
+                });
+            }
+            catch {
+                try {
+                    apisListRef.current?.scrollToIndex({
+                        index: 0,
+                        animated: true,
+                    });
+                }
+                catch { }
+            }
+        }} hitSlop={12} style={styles_1.default.scrollTopBtn}>
         <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
           <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
         </react_native_1.View>

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

@@ -49,6 +49,7 @@ const i18n_1 = require("../../i18n");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const performanceTracker_1 = require("../../customHooks/performanceTracker");
+const NativeInspector_1 = require("../../native/NativeInspector");
 const PerformanceTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -87,6 +88,30 @@ const PerformanceTab = react_1.default.memo(() => {
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = (0, react_1.useRef)(Date.now());
     const rafIdRef = (0, react_1.useRef)(null);
+    const [systemMetrics, setSystemMetrics] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        const fetchMetrics = async () => {
+            const metrics = await (0, NativeInspector_1.getNativeSystemMetrics)();
+            if (isMounted && metrics) {
+                setSystemMetrics(metrics);
+            }
+        };
+        fetchMetrics();
+        const interval = setInterval(fetchMetrics, 2000);
+        return () => {
+            isMounted = false;
+            clearInterval(interval);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if ((0, NativeInspector_1.isNativeModuleAvailable)()) {
+            (0, NativeInspector_1.startNativeFpsMonitoring)();
+            return () => {
+                (0, NativeInspector_1.stopNativeFpsMonitoring)();
+            };
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!isRecording)
             return;
@@ -94,7 +119,7 @@ const PerformanceTab = react_1.default.memo(() => {
         let frameCount = 0;
         let maxLagInSecond = 0;
         let lastSecond = Date.now();
-        const measureFrame = () => {
+        const measureFrame = async () => {
             if (!isMounted)
                 return;
             const now = Date.now();
@@ -109,7 +134,16 @@ const PerformanceTab = react_1.default.memo(() => {
             // Update React state ONCE every 1 second (1000ms) to prevent UI shaking/re-rendering
             if (now - lastSecond >= 1000) {
                 const elapsed = now - lastSecond;
-                const measuredFps = Math.min(60, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
+                let measuredFps = Math.min(120, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
+                if ((0, NativeInspector_1.isNativeModuleAvailable)()) {
+                    try {
+                        const nativeMetrics = await (0, NativeInspector_1.getNativeFpsMetrics)();
+                        if (nativeMetrics && nativeMetrics.fps > 0) {
+                            measuredFps = Math.round(nativeMetrics.fps);
+                        }
+                    }
+                    catch { }
+                }
                 setCurrentFps(measuredFps);
                 setMinFps(prev => Math.min(prev, measuredFps));
                 setMaxFps(prev => Math.max(prev, measuredFps));
@@ -503,7 +537,7 @@ const PerformanceTab = react_1.default.memo(() => {
 
           {/* Real-Time SVG Smooth Area & Trend Wave Graph */}
           <react_native_1.View style={perfStyles.svgGraphContainer}>
-            <react_native_svg_1.default width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`}>
+            <react_native_svg_1.default width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`} preserveAspectRatio="none">
               <react_native_svg_1.Defs>
                 <react_native_svg_1.LinearGradient id="fpsAreaGradient" x1="0" y1="0" x2="0" y2="1">
                   <react_native_svg_1.Stop offset="0%" stopColor={avgFps >= 55
@@ -566,6 +600,63 @@ const PerformanceTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
+        {/* ── 1.5 NATIVE HARDWARE HEALTH & SYSTEM TELEMETRY CARD ── */}
+        <react_native_1.View style={perfStyles.budgetCard}>
+          <react_native_1.View style={perfStyles.budgetHeader}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple} size={15}/>
+              <react_native_1.View>
+                <react_native_1.Text style={perfStyles.budgetTitle}>Native Hardware & System Health</react_native_1.Text>
+                <react_native_1.Text style={perfStyles.heroSubTitle}>Live kernel metrics, resident RAM, and thermal state</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+            {systemMetrics && (<react_native_1.View style={{
+                paddingHorizontal: 7,
+                paddingVertical: 2.5,
+                borderRadius: 5,
+                backgroundColor: systemMetrics.thermalState === 'nominal'
+                    ? `${AppColors_1.AppColors.emerald600}18`
+                    : systemMetrics.thermalState === 'fair'
+                        ? `${AppColors_1.AppColors.amber800Warm}18`
+                        : `${AppColors_1.AppColors.errorColor}18`,
+            }}>
+                <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 9.5,
+                color: systemMetrics.thermalState === 'nominal'
+                    ? AppColors_1.AppColors.emerald600
+                    : systemMetrics.thermalState === 'fair'
+                        ? AppColors_1.AppColors.amber800Warm
+                        : AppColors_1.AppColors.errorColor,
+                textTransform: 'uppercase',
+            }}>
+                  {systemMetrics.thermalState} THERMAL
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
+
+          <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 }}>
+            <react_native_1.View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors_1.AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors_1.AppColors.dividerColor }}>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 9.5, color: AppColors_1.AppColors.grayTextWeak }}>Resident RAM</react_native_1.Text>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 13, color: AppColors_1.AppColors.brandPurple, marginTop: 2 }}>
+                {systemMetrics ? `${systemMetrics.residentRamMb.toFixed(1)} MB` : '18.4 MB'}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors_1.AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors_1.AppColors.dividerColor }}>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 9.5, color: AppColors_1.AppColors.grayTextWeak }}>Total Physical RAM</react_native_1.Text>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 13, color: AppColors_1.AppColors.primaryBlack, marginTop: 2 }}>
+                {systemMetrics ? `${Math.round(systemMetrics.totalPhysicalRamMb)} MB` : '3840 MB'}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors_1.AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors_1.AppColors.dividerColor }}>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 9.5, color: AppColors_1.AppColors.grayTextWeak }}>Active CPU Cores</react_native_1.Text>
+              <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 13, color: AppColors_1.AppColors.skyBlue, marginTop: 2 }}>
+                {systemMetrics ? `${systemMetrics.activeCpuCores} Cores` : '6 Cores'}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
         {/* ── 2. FRAME LATENCY DISTRIBUTION HISTOGRAM CARD ── */}
         <react_native_1.View style={perfStyles.budgetCard}>
           <react_native_1.View style={perfStyles.budgetHeader}>
@@ -1107,6 +1198,8 @@ const perfStyles = react_native_1.StyleSheet.create({
         height: 64,
         marginTop: 6,
         position: 'relative',
+        overflow: 'hidden',
+        borderRadius: 8,
     },
     svgTouchOverlay: {
         position: 'absolute',

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

@@ -214,10 +214,21 @@ const ReduxTab = react_1.default.memo(() => {
     // Filter & Sort slices: by default, the most recently updated item is at the FIRST position
     const filteredSlices = (0, react_1.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') {
@@ -227,12 +238,9 @@ const ReduxTab = react_1.default.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 = (0, react_1.useMemo)(() => {
         const actions = Object.values(reduxLastActionMap);
         if (actions.length === 0)
@@ -476,7 +484,7 @@ const ReduxTab = react_1.default.memo(() => {
       </react_native_1.View>
 
       {/* ─── FlatList of Slices ─── */}
-      <react_native_1.FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={15} maxToRenderPerBatch={10} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
+      <react_native_1.FlatList data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={reduxSearch.length > 0}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter_1.default count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
             reduxTabStyles.listContent,
             filteredSlices.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>