complated

screens/create-ads/ui/CategorySelectorBottomSheet.tsx

@@ -5,6 +5,7 @@ import {
   BottomSheetModal,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
+import { Image } from 'expo-image';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
@@ -12,6 +13,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 export type Option = {
   label: string;
   value: string;
+  flag?: string;
 };
 
 type CategorySelectorProps = {
@@ -91,6 +93,12 @@ export default function CategorySelectorBottomSheet({
               onClose();
             }}
           >
+            {item.flag ? (
+              <Image
+                source={{ uri: `https://flagcdn.com/24x18/${item.flag.toLowerCase()}.png` }}
+                style={{ width: 24, height: 18, borderRadius: 2 }}
+              />
+            ) : null}
             <Text
               style={[
                 styles.optionText,
@@ -129,6 +137,10 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     paddingHorizontal: 20,
     borderBottomWidth: 1,
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    gap: 10,
   },
   optionText: {
     fontSize: 16,