complated project

components/ui/CountriesList.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from '@/components/ThemeContext';
 import { products_api } from '@/screens/home/lib/api';
 import { useInfiniteQuery } from '@tanstack/react-query';
+import { Image } from 'expo-image';
 import { Building2, ChevronDown, ChevronUp } from 'lucide-react-native';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -74,7 +75,7 @@ export default function CountriesList({ search }: { search: string }) {
     <FlatList
       data={allCountries}
       keyExtractor={(item) => item.id.toString()}
-      contentContainerStyle={{ gap: 12 }}
+      contentContainerStyle={{ gap: 5 }}
       onEndReached={loadMore}
       onEndReachedThreshold={0.4}
       ListFooterComponent={
@@ -83,7 +84,7 @@ export default function CountriesList({ search }: { search: string }) {
       showsVerticalScrollIndicator={false}
       renderItem={({ item }) => {
         const isOpen = openedCountryId === item.id;
-
+        const flagCode = item.flag ? item.flag.toLowerCase() : ''; // "uz"
         return (
           <View style={[styles.countryCard, isDark ? styles.darkCard : styles.lightCard]}>
             {/* Davlat sarlavhasi */}
@@ -92,9 +93,24 @@ export default function CountriesList({ search }: { search: string }) {
               onPress={() => toggleAccordion(item.id)}
               activeOpacity={0.8}
             >
-              <Text style={[styles.countryName, isDark ? styles.darkText : styles.lightText]}>
-                {item.name}
-              </Text>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  gap: 10,
+                  alignContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <Image
+                  source={{ uri: `https://flagcdn.com/w320/${flagCode}.png` }}
+                  style={{ width: 40, height: 20 }}
+                  resizeMode="cover" // objectFit o'rniga resizeMode ishlatildi
+                />
+
+                <Text style={[styles.countryName, isDark ? styles.darkText : styles.lightText]}>
+                  {item.name}
+                </Text>
+              </View>
               <View style={styles.rightSide}>
                 <Text
                   style={[styles.companyCount, isDark ? styles.darkSubText : styles.lightSubText]}
@@ -166,6 +182,7 @@ const styles = StyleSheet.create({
     shadowRadius: 6,
     elevation: 2,
     marginLeft: 2,
+    marginBottom: 5,
   },
   darkCard: {
     backgroundColor: '#1e293b',