bug fixed

screens/profile/ui/NotificationTab.tsx

@@ -91,32 +91,77 @@ export function NotificationTab() {
         <Text style={[styles.headerTitle, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
           {t('Bildirishnomalar')}
         </Text>
-
-        {notifications.some((n) => !n.is_read) && (
-          <TouchableOpacity
-            style={[
-              styles.markAllButton,
-              { backgroundColor: isDark ? '#1e293b' : '#e0f2fe', borderColor: '#3b82f6' },
-            ]}
-            onPress={() => markAllAsRead()}
-            disabled={isMarkingAllRead}
-          >
-            {isMarkingAllRead ? (
-              <ActivityIndicator size="small" color="#3b82f6" />
-            ) : (
-              <Text style={[styles.markAllText, { color: '#3b82f6' }]}>
-                {t("Barchasi o'qildi")}
-              </Text>
-            )}
-          </TouchableOpacity>
-        )}
       </View>
       <FlatList
         data={notifications}
         keyExtractor={(item) => item.id.toString()}
         contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
-        renderItem={({ item, index }) => <NotificationCard item={item} />}
+        ListHeaderComponent={() => {
+          if (notifications.length === 0) {
+            return (
+              <View style={styles.emptyHeader}>
+                <Text
+                  style={[
+                    styles.emptyTitle,
+                    { color: isDark ? '#f1f5f9' : '#0f172a' },
+                  ]}
+                >
+                  {t("Hozircha bildirishnomalar yo'q")}
+                </Text>
+
+                <Text
+                  style={[
+                    styles.emptyDesc,
+                    { color: isDark ? '#94a3b8' : '#64748b' },
+                  ]}
+                >
+                  {t("Yangi xabarlar shu yerda paydo bo‘ladi")}
+                </Text>
+              </View>
+            );
+          }
+
+          if (notifications.some((n) => !n.is_read)) {
+            return (
+              <View style={styles.headerActions}>
+                <TouchableOpacity
+                  style={[
+                    styles.markAllButton,
+                    {
+                      backgroundColor: isDark ? '#1e293b' : '#e0f2fe',
+                      borderColor: '#3b82f6',
+                    },
+                  ]}
+                  onPress={() => markAllAsRead()}
+                  disabled={isMarkingAllRead}
+                >
+                  {isMarkingAllRead ? (
+                    <ActivityIndicator size="small" color="#3b82f6" />
+                  ) : (
+                    <Text style={[styles.markAllText, { color: '#3b82f6' }]}>
+                      {t("Barchasi o'qildi")}
+                    </Text>
+                  )}
+                </TouchableOpacity>
+              </View>
+            );
+          }
+
+          return (
+            <View style={styles.allReadContainer}>
+              <Text
+                style={[
+                  styles.allReadText,
+                  { color: isDark ? '#94a3b8' : '#64748b' },
+                ]}
+              >
+                {t("Barcha bildirishnomalar o‘qilgan")}
+              </Text>
+            </View>
+          );
+        }}
+        renderItem={({ item }) => <NotificationCard item={item} />}
         onEndReached={() => {
           if (hasNextPage && !isFetchingNextPage) {
             fetchNextPage();
@@ -130,6 +175,15 @@ export function NotificationTab() {
         }
         refreshing={isLoading}
         onRefresh={refetch}
+        ListEmptyComponent={() =>
+          !isLoading && (
+            <View style={styles.emptyContainer}>
+              <Text style={[styles.emptyTitle, { color: isDark ? '#f1f5f9' : '#0f172a' }]}>
+                {t("Hozircha bildirishnomalar yo'q")}
+              </Text>
+            </View>
+          )
+        }
       />
     </View>
   );
@@ -266,6 +320,7 @@ const styles = StyleSheet.create({
   listContent: {
     padding: 16,
     paddingBottom: 32,
+    flexGrow: 1
   },
 
   /* Card Styles */
@@ -292,6 +347,38 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  headerActions: {
+    marginBottom: 16,
+    alignItems: 'flex-end',
+  },
+
+  emptyHeader: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+  },
+
+  allReadContainer: {
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+
+  allReadText: {
+    fontSize: 14,
+  },
+
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+
+  emptyDesc: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
   cardHeader: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -407,7 +494,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     borderRadius: 8,
     borderWidth: 1,
-    minWidth: 80,
+    width: "auto",
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -415,4 +502,10 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '600',
   },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 30,
+  },
 });