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/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>