react-native-inapp-inspector 1.1.35 → 2.0.1

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

@@ -89,6 +89,8 @@ const ConsoleTab = react_1.default.memo(() => {
         </react_native_1.Text>);
         }
     }, [visibleConsoleLogs.length, filteredConsoleLogs.length, logFilters]);
+    const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const QUICK_TAG_SUGGESTIONS = (0, react_1.useMemo)(() => ['[AXIOS]', '[API]', '[REDUX]', '[ANALYTICS]', '[AUTH]', '[WARN]', '[ERROR]'], []);
     return (<react_native_1.View style={{ flex: 1 }}>
       <react_native_1.View style={{
             backgroundColor: AppColors_1.AppColors.white,
@@ -100,12 +102,38 @@ const ConsoleTab = react_1.default.memo(() => {
             styles_1.default.toolbarRow,
             { marginTop: 12, marginBottom: 8 },
         ]}>
-          <react_native_1.View style={styles_1.default.searchContainer}>
-            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-            <react_native_1.TextInput placeholder={t('console.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {logSearch.length > 0 && (<react_native_1.Pressable onPress={() => setLogSearch('')} 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={t('console.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {logSearch.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,
+            }}>
+                    {filteredConsoleLogs.length}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Pressable onPress={() => setLogSearch('')} 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}>
@@ -135,6 +163,49 @@ const ConsoleTab = react_1.default.memo(() => {
           </react_native_1.View>
         </react_native_1.View>
 
+        {/* Quick Tag Search Suggestions Bar */}
+        {(isSearchFocused || logSearch.length > 0) && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
+                paddingHorizontal: 16,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+            }}>
+            {QUICK_TAG_SUGGESTIONS.map(tag => {
+                const isSelected = logSearch.includes(tag);
+                return (<TouchableScale_1.default key={tag} onPress={() => {
+                        if (isSelected) {
+                            setLogSearch(prev => prev.replace(tag, '').trim());
+                        }
+                        else {
+                            setLogSearch(prev => prev ? `${prev} ${tag}`.trim() : tag);
+                        }
+                    }}>
+                  <react_native_1.View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 3,
+                        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,
+                    }}>
+                      {tag}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </TouchableScale_1.default>);
+            })}
+          </react_native_1.ScrollView>)}
+
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
             paddingHorizontal: 16,
             paddingBottom: 4,
@@ -153,7 +224,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.indigo600Alt : AppColors_1.AppColors.indigo50,
                         borderColor: active ? AppColors_1.AppColors.indigo600 : AppColors_1.AppColors.indigo400,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.indigo600Alt,
@@ -166,21 +239,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.indigo600Alt} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.LayersIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt}/>
+                    <NetworkIcons_1.LayersIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.indigo600Alt}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -215,7 +276,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.teal600 : AppColors_1.AppColors.teal100,
                         borderColor: active ? AppColors_1.AppColors.teal600 : AppColors_1.AppColors.teal400,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.teal600,
@@ -228,21 +291,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
+                    gap: 6,
                 }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.teal400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.teal600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.UserIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.teal600}/>
+                    <NetworkIcons_1.UserIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.teal600}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -277,7 +328,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.sky600 : AppColors_1.AppColors.sky100,
                         borderColor: active ? AppColors_1.AppColors.blue700 : AppColors_1.AppColors.sky400,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.sky600,
@@ -290,21 +343,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
+                    gap: 6,
                 }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.sky600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.InfoCircleIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600}/>
+                    <NetworkIcons_1.InfoCircleIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.sky600}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -339,7 +380,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.amber600 : AppColors_1.AppColors.amber100,
                         borderColor: active ? AppColors_1.AppColors.amber700 : AppColors_1.AppColors.amber200,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.amber600,
@@ -352,21 +395,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber500,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.amber600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.WarningTriangleIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700}/>
+                    <NetworkIcons_1.WarningTriangleIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.amber700}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -401,7 +432,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.red500 : AppColors_1.AppColors.red100,
                         borderColor: active ? AppColors_1.AppColors.red600 : AppColors_1.AppColors.errorBorder,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.red500,
@@ -414,21 +447,9 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.red500,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.red500} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.ErrorCircleIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.red500}/>
+                    <NetworkIcons_1.ErrorCircleIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.red500}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
@@ -463,7 +484,9 @@ const ConsoleTab = react_1.default.memo(() => {
                     {
                         backgroundColor: active ? AppColors_1.AppColors.violet600 : AppColors_1.AppColors.purple100,
                         borderColor: active ? AppColors_1.AppColors.purple700 : AppColors_1.AppColors.purple200,
-                        borderRadius: 7,
+                        borderRadius: 8,
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
                     },
                     active && {
                         shadowColor: AppColors_1.AppColors.violet600,
@@ -476,29 +499,17 @@ const ConsoleTab = react_1.default.memo(() => {
                   <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 5,
-                }}>
-                    <react_native_1.View style={{
-                    width: 12,
-                    height: 12,
-                    borderRadius: 3,
-                    borderWidth: 1.2,
-                    borderColor: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple400,
-                    backgroundColor: active ? AppColors_1.AppColors.white : 'transparent',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: 6,
                 }}>
-                      {active && <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.violet600} size={8}/>}
-                    </react_native_1.View>
-                    <NetworkIcons_1.AnalyticsIcon size={12} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple}/>
+                    <NetworkIcons_1.AnalyticsIcon size={13} color={active ? AppColors_1.AppColors.white : AppColors_1.AppColors.violet600}/>
                     <react_native_1.Text numberOfLines={1} style={[
                     styles_1.default.statusFilterText,
                     {
-                        color: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.brandPurple,
+                        color: active ? AppColors_1.AppColors.white : AppColors_1.AppColors.purpleText,
                         fontFamily: AppFonts_1.AppFonts.interBold,
                     },
                 ]}>
-                      {t('tabs.analytics', 'Analytics')} ({logCounts.analytics})
+                      {t('console.analytics', 'Analytics')} ({logCounts.analytics})
                     </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>
@@ -507,7 +518,7 @@ const ConsoleTab = react_1.default.memo(() => {
         </react_native_1.ScrollView>
       </react_native_1.View>
 
-      <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter_1.default count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
+      <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter_1.default count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
             styles_1.default.listContent,
             filteredConsoleLogs.length === 0 && { flexGrow: 1 },
         ]} keyboardShouldPersistTaps="handled"/>

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

@@ -147,11 +147,16 @@ const CrashTab = react_1.default.memo(() => {
             }
             // Search filter
             if (searchQuery.trim().length > 0) {
-                const q = searchQuery.toLowerCase();
-                const msg = (item.message || '').toLowerCase();
-                const name = (item.name || '').toLowerCase();
-                const stack = (item.stack || '').toLowerCase();
-                return msg.includes(q) || name.includes(q) || stack.includes(q);
+                const queryTokens = searchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean);
+                const searchTarget = [
+                    item.message || '',
+                    item.name || '',
+                    item.stack || '',
+                    item.type || '',
+                    item.deviceInfo?.platform || '',
+                    ...(item.breadcrumbs || []).map(b => `${b.type || ''} ${b.message || ''}`),
+                ].join(' ').toLowerCase();
+                return queryTokens.every(token => searchTarget.includes(token));
             }
             return true;
         });
@@ -288,74 +293,75 @@ const CrashTab = react_1.default.memo(() => {
         </AnimatedEntrance_1.default>);
     }, [searchQuery, setSelectedCrash]);
     return (<react_native_1.View style={localStyles.container}>
-      {/* ─── Top Stats Bar ─── */}
-      <react_native_1.View style={localStyles.statsBar}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
-          <react_native_1.View style={[localStyles.statChip, localStyles.statChipActive]}>
-            <react_native_1.Text style={localStyles.statChipValue}>{stats.total}</react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</react_native_1.Text>
-          </react_native_1.View>
+      {crashRecords.length > 0 && (<>
+          {/* ─── Top Stats Bar ─── */}
+          <react_native_1.View style={localStyles.statsBar}>
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
+              <react_native_1.View style={[localStyles.statChip, localStyles.statChipActive]}>
+                <react_native_1.Text style={localStyles.statChipValue}>{stats.total}</react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.errorColor }]}>
-              {stats.fatalCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.errorColor }]}>
+                  {stats.fatalCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.offerPurple }]}>
-              {stats.jsCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.offerPurple }]}>
+                  {stats.jsCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.darkOrange }]}>
-              {stats.promiseCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.darkOrange }]}>
+                  {stats.promiseCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.purple }]}>
-              {stats.renderCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statRender')}</react_native_1.Text>
-          </react_native_1.View>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.purple }]}>
+                  {stats.renderCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statRender')}</react_native_1.Text>
+              </react_native_1.View>
 
-          <react_native_1.View style={localStyles.statChip}>
-            <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.skyBlue }]}>
-              {stats.nativeCount}
-            </react_native_1.Text>
-            <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statNative')}</react_native_1.Text>
+              <react_native_1.View style={localStyles.statChip}>
+                <react_native_1.Text style={[localStyles.statChipValue, { color: AppColors_1.AppColors.skyBlue }]}>
+                  {stats.nativeCount}
+                </react_native_1.Text>
+                <react_native_1.Text style={localStyles.statChipLabel}>{t('crash.statNative')}</react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.ScrollView>
           </react_native_1.View>
-        </react_native_1.ScrollView>
-      </react_native_1.View>
 
-      {/* ─── Search & Controls ─── */}
-      <react_native_1.View style={localStyles.controlsContainer}>
-        <react_native_1.View style={localStyles.searchRow}>
-          <react_native_1.View style={localStyles.searchInputWrapper}>
-            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-            <react_native_1.TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
-            {searchQuery.length > 0 && (<react_native_1.TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              </react_native_1.TouchableOpacity>)}
-          </react_native_1.View>
+          {/* ─── Search & Controls ─── */}
+          <react_native_1.View style={localStyles.controlsContainer}>
+            <react_native_1.View style={localStyles.searchRow}>
+              <react_native_1.View style={localStyles.searchInputWrapper}>
+                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                <react_native_1.TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
+                {searchQuery.length > 0 && (<react_native_1.TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.TouchableOpacity>)}
+              </react_native_1.View>
 
-          {/* Crash Filters */}
-          {crashRecords.length > 0 && (<TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={[
+              {/* Crash Filters */}
+              <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={[
                 localStyles.filterButton,
                 !(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && {
                     borderColor: `${AppColors_1.AppColors.brandPurple}60`,
                     backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
                 },
             ]}>
-              <NetworkIcons_1.FilterIcon size={14} color={(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)
+                <NetworkIcons_1.FilterIcon size={14} color={(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters)
                 ? AppColors_1.AppColors.grayTextStrong
                 : AppColors_1.AppColors.brandPurple}/>
-              {!(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && (<react_native_1.View style={{
+                {!(0, CrashFilterModal_1.isCrashFiltersDefault)(crashFilters) && (<react_native_1.View style={{
                     position: 'absolute',
                     top: 2,
                     right: 2,
@@ -366,40 +372,41 @@ const CrashTab = react_1.default.memo(() => {
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.white,
                 }}/>)}
-            </TouchableScale_1.default>)}
+              </TouchableScale_1.default>
 
-          {/* Clear Crashes */}
-          {crashRecords.length > 0 && (<TouchableScale_1.default onPress={handleClearAll} style={localStyles.clearButton}>
-              <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.errorColor}/>
-            </TouchableScale_1.default>)}
-        </react_native_1.View>
+              {/* Clear Crashes */}
+              <TouchableScale_1.default onPress={handleClearAll} style={localStyles.clearButton}>
+                <NetworkIcons_1.TrashIcon size={14} color={AppColors_1.AppColors.errorColor}/>
+              </TouchableScale_1.default>
+            </react_native_1.View>
 
-        {/* ─── Filter Chips ─── */}
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
-          {[
-            { key: 'all', label: t('crash.filterAll'), Icon: NetworkIcons_1.LayersIcon },
-            { key: 'fatal', label: t('crash.filterFatal'), Icon: NetworkIcons_1.SkullIcon },
-            { key: 'js', label: t('crash.filterJsError'), Icon: NetworkIcons_1.JsIcon },
-            { key: 'promise', label: t('crash.filterPromise'), Icon: NetworkIcons_1.HourglassIcon },
-            { key: 'render', label: t('crash.filterRender'), Icon: NetworkIcons_1.LayoutIcon },
-            { key: 'native', label: t('crash.filterNative'), Icon: NetworkIcons_1.ChipIcon },
-        ].map(chip => {
-            const isActive = filterType === chip.key;
-            return (<react_native_1.TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
-                    localStyles.filterChip,
-                    isActive && localStyles.filterChipActive,
-                ]}>
-                <chip.Icon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong}/>
-                <react_native_1.Text style={[
-                    localStyles.filterChipText,
-                    isActive && localStyles.filterChipTextActive,
-                ]}>
-                  {chip.label}
-                </react_native_1.Text>
-              </react_native_1.TouchableOpacity>);
-        })}
-        </react_native_1.ScrollView>
-      </react_native_1.View>
+            {/* ─── Filter Chips ─── */}
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
+              {[
+                { key: 'all', label: t('crash.filterAll'), Icon: NetworkIcons_1.LayersIcon },
+                { key: 'fatal', label: t('crash.filterFatal'), Icon: NetworkIcons_1.SkullIcon },
+                { key: 'js', label: t('crash.filterJsError'), Icon: NetworkIcons_1.JsIcon },
+                { key: 'promise', label: t('crash.filterPromise'), Icon: NetworkIcons_1.HourglassIcon },
+                { key: 'render', label: t('crash.filterRender'), Icon: NetworkIcons_1.LayoutIcon },
+                { key: 'native', label: t('crash.filterNative'), Icon: NetworkIcons_1.ChipIcon },
+            ].map(chip => {
+                const isActive = filterType === chip.key;
+                return (<react_native_1.TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
+                        localStyles.filterChip,
+                        isActive && localStyles.filterChipActive,
+                    ]}>
+                    <chip.Icon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text style={[
+                        localStyles.filterChipText,
+                        isActive && localStyles.filterChipTextActive,
+                    ]}>
+                      {chip.label}
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>);
+            })}
+            </react_native_1.ScrollView>
+          </react_native_1.View>
+        </>)}
 
       {/* ─── Crash List or Empty State ─── */}
       {filteredList.length === 0 ? (<react_native_1.ScrollView contentContainerStyle={localStyles.emptyContainer} showsVerticalScrollIndicator={false}>
@@ -412,7 +419,7 @@ const CrashTab = react_1.default.memo(() => {
                 ? t('crash.emptySearchSubtitle')
                 : t('crash.emptySubtitle')}
           </react_native_1.Text>
-        </react_native_1.ScrollView>) : (<react_native_1.FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter_1.default />}/>)}
+        </react_native_1.ScrollView>) : (<react_native_1.FlatList data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={true} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter_1.default />}/>)}
 
       {/* Filter Modal */}
       <CrashFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={crashFilters} onApply={setCrashFilters} searchQuery={searchQuery}/>
@@ -688,10 +695,11 @@ const localStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayTextWeak,
     },
     emptyContainer: {
+        flexGrow: 1,
         alignItems: 'center',
         justifyContent: 'center',
         padding: 32,
-        marginTop: 40,
+        paddingBottom: 80,
     },
     emptyIconCircle: {
         width: 72,