adjust styles

app/(tabs)/services.tsx

@@ -4,40 +4,17 @@ import i18n from '@/i18n';
 import { FontAwesome5 } from '@expo/vector-icons';
 import ServiceCard from '@/components/ServiceCard';
 
-const services = [
-  {
-    key: 'sarToTmt',
-    title: 'Manat kursy',
-    icon: <FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />,
-  },
-  {
-    key: 'hotelBusinessCard',
-    title: 'Oteliň wizitkasy',
-    icon: <FontAwesome5 name="hotel" size={24} color="#D4AF37" />,
-  },
-  {
-    key: 'masterkeyBox',
-    title: 'Oteliň açary içinde galsa',
-    icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
-  },
-  {
-    key: 'translator',
-    title: 'Terjimeçi',
-    icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
-  },
-];
-
 export default function ServicesScreen() {
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.title}>{i18n.t('services')}</Text>
-        <FlatList
+
-          data={services}
+      <View style={styles.row}>
-          renderItem={({ item }) => <ServiceCard title={item.title} icon={item.icon} />}
+        <ServiceCard title="Manat kursy" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
-          keyExtractor={(item) => item.key}
+        <ServiceCard title="Oteliň wizitkasy" icon={<FontAwesome5 name="hotel" size={24} color="#D4AF37" />} />
-          numColumns={2}
+        <ServiceCard title="Oteliň açary içinde galsa" icon={<FontAwesome5 name="key" size={24} color="#D4AF37" />} />
-          columnWrapperStyle={styles.row}
+        <ServiceCard title="Terjimeçi" icon={<FontAwesome5 name="language" size={24} color="#D4AF37" />} />
-        />
+      </View>
     </SafeAreaView>
   );
 }
@@ -56,5 +33,8 @@ const styles = StyleSheet.create({
   row: {
     flex: 1,
     justifyContent: 'space-around',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    rowGap: 0,
   },
 });