Enhance app functionality and localization

- Added new dependencies: expo-file-system and expo-sharing.
- Updated package versions for @babel/core and react-dom.
- Introduced a new index screen for displaying prayer times with city selection.
- Refactored ServicesGrid to accept a dynamic services array and improved layout.
- Updated localization for new phrases and service titles in Turkmen.
- Enhanced LostKeyModal with a close button and additional text.
- Improved PhrasebookModal to allow expandable phrases for better user interaction.

components/LostKeyModal.tsx

@@ -1,3 +1,4 @@
+import { FontAwesome } from '@expo/vector-icons';
 import React from 'react';
 import { Modal, View, Text, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
 
@@ -18,7 +19,16 @@ const LostKeyModal: React.FC<LostKeyModalProps> = ({ visible, onClose }) => {
     >
       <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onClose}>
         <View style={styles.modalContainer}>
-          <Text style={styles.text}>Mastercard</Text>
+          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+            <FontAwesome name="close" size={24} color="black" />
+          </TouchableOpacity>
+          
+          <Text style={styles.smallText} >Aşak resepşyna şul aşakdaky haty görkeziň</Text>
+          <Text 
+            numberOfLines={1}
+            adjustsFontSizeToFit
+            style={styles.text}
+            >Mastercard</Text>
           <Text style={[styles.text, styles.arabicText]}>ماستركارد</Text>
         </View>
       </TouchableOpacity>
@@ -34,7 +44,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
   modalContainer: {
-    width: width * 0.6,
+    width: width * 0.9,
     padding: 20,
     backgroundColor: 'white',
     borderRadius: 10,
@@ -48,10 +58,22 @@ const styles = StyleSheet.create({
     shadowRadius: 3.84,
     elevation: 5,
   },
+  closeButton: {
+    position: 'absolute',
+    top: 15,
+    right: 15,
+    zIndex: 1,
+  },
   text: {
     fontSize: 40,
     marginBottom: 10,
   },
+  smallText: {
+    marginTop: 15,
+    fontSize: 20,
+    color: '#666',
+    textAlign: 'center',
+  },
   arabicText: {
     fontFamily: 'System',
     writingDirection: 'rtl',

components/PhrasebookModal.tsx

@@ -10,6 +10,8 @@ type PhrasebookModalProps = {
 };
 
 const PHRASES = [
+  { tk: 'Bu näçe?', ar: 'بكم هذا؟ (Bikam hadha?)' },
+  { tk: 'Arzanladyň', ar: 'تَخْفيض Takfidun' },
   { tk: 'Salam', ar: 'مرحبا (Marhaban)' },
   { tk: 'Hawa', ar: 'نعم (Na\'am)' },
   { tk: 'Ýok', ar: 'لا (La)' },
@@ -18,19 +20,26 @@ const PHRASES = [
   { tk: 'Haýyş edýärin', ar: 'من فضلك (Min fadlik)' },
   { tk: 'Bagyşlaň', ar: 'آسف (Asif)' },
   { tk: 'Men size nähili kömek edip bilerin?', ar: 'كيف يمكنني مساعدتك؟ (Kayfa yumkinuni musa\'adatuk?)' },
-  { tk: 'Bu näçe?', ar: 'بكم هذا؟ (Bikam hadha?)' },
   { tk: 'Hajathana nirede?', ar: 'أين الحمام؟ (Ayna al-hammam?)' },
   { tk: 'Men ýolumy ýitirdim', ar: 'لقد ضللت طريقي (Laqad dalalt tariqi)' },
   { tk: 'Lukman çagyryň', ar: 'اتصل بطبيب (Ittasil bi-tabib)' },
 ];
 
 const PhrasebookModal = ({ visible, onClose }: PhrasebookModalProps) => {
-  const renderItem = ({ item }: { item: { tk: string; ar: string } }) => (
-    <View style={styles.phraseItem}>
-      <Text style={styles.turkmenText}>{item.tk}</Text>
-      <Text style={styles.arabicText}>{item.ar}</Text>
-    </View>
-  );
+  const [expandedIndex, setExpandedIndex] = React.useState<number | null>(null);
+
+  const renderItem = ({ item, index }: { item: { tk: string; ar: string }; index: number }) => {
+    const isExpanded = index === expandedIndex;
+
+    return (
+      <TouchableOpacity onPress={() => setExpandedIndex(isExpanded ? null : index)}>
+        <View style={styles.phraseItem}>
+          <Text style={styles.turkmenText}>{item.tk}</Text>
+          {isExpanded && <Text style={styles.arabicText}>{item.ar}</Text>}
+        </View>
+      </TouchableOpacity>
+    );
+  };
 
   return (
     <Modal
@@ -51,6 +60,7 @@ const PhrasebookModal = ({ visible, onClose }: PhrasebookModalProps) => {
               renderItem={renderItem}
               keyExtractor={(item, index) => index.toString()}
               ItemSeparatorComponent={() => <View style={styles.separator} />}
+              extraData={expandedIndex}
             />
           </SafeAreaView>
         </View>

components/ServicesGrid.tsx

@@ -1,34 +1,42 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import Colors from '@/constants/Colors';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { router } from 'expo-router';
 import i18n from '@/i18n';
 
-const services = [
-  { name: 'quran', icon: 'book-open-variant' },
-  { name: 'hadith', icon: 'book-open-page-variant' },
-  { name: 'dua', icon: 'human-greeting' },
-];
-
-export default function ServicesGrid() {
-  const colorScheme = 'dark';
+type ServicesGridProps = {
+  services: {
+    name: string;
+    icon: any;
+  }[];
+};
+const ServicesGrid = ({ services }: ServicesGridProps) => {
+  const handlePress = (name: string) => {
+    if (name === 'quran') {
+      
+    }
+  };
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{i18n.t('servicesToEnrich')}</Text>
       <View style={styles.grid}>
-        {services.map((service, index) => (
-          <View key={index} style={styles.serviceItem}>
-            <View style={[styles.iconContainer, { backgroundColor: Colors[colorScheme].secondary }]}>
-              <MaterialCommunityIcons name={service.icon} size={30} color={Colors[colorScheme].tint} />
+        {services.map((service) => (
+          <TouchableOpacity
+            key={service.name}
+            style={styles.serviceItem}
+            onPress={() => handlePress(service.name)}>
+            <View style={[styles.iconContainer, { backgroundColor: Colors['dark'].secondary }]}>
+              <MaterialCommunityIcons name={service.icon} size={30} color={Colors['dark'].tint} />
             </View>
             <Text style={styles.serviceName}>{i18n.t(service.name)}</Text>
-          </View>
+          </TouchableOpacity>
         ))}
       </View>
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -37,8 +45,8 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: Colors.dark.text,
-    marginBottom: 15,
+    color: 'white',
+    marginBottom: 10,
   },
   grid: {
     flexDirection: 'row',
@@ -50,13 +58,15 @@ const styles = StyleSheet.create({
   iconContainer: {
     width: 60,
     height: 60,
-    borderRadius: 15,
+    borderRadius: 30,
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: 10,
+    marginBottom: 5,
   },
   serviceName: {
-    color: Colors.dark.text,
-    fontSize: 14,
+    color: 'white',
+    textAlign: 'center',
   },
 });
+
+export default ServicesGrid;