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.

app/(tabs)/_layout.tsx

@@ -26,7 +26,7 @@ export default function TabLayout() {
           backgroundColor: Colors[colorScheme].secondary,
           borderTopColor: Colors[colorScheme].secondary,
         },
-        headerShown: false, // Hide header globally for tabs
+        headerShown: false, // hide header globally for tabs
       }}>
       <Tabs.Screen
         name="home"
@@ -42,11 +42,18 @@ export default function TabLayout() {
           tabBarIcon: ({ color }) => <TabBarIcon name="th-large" color={color} />,
         }}
       />
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: i18n.t('menuSalah'),
+          tabBarIcon: ({ color }) => <TabBarIcon name="moon-o" color={color} />,
+        }}
+      />
       <Tabs.Screen
         name="programs"
         options={{
-          title: i18n.t('programs'),
-          tabBarIcon: ({ color }) => <TabBarIcon name="briefcase" color={color} />,
+          title: i18n.t('Programs'),
+          tabBarIcon: ({ color }) => <TabBarIcon name="calendar" color={color} />,
         }}
       />
     </Tabs>

app/(tabs)/home.tsx

@@ -31,14 +31,22 @@ export default function HomeScreen() {
 
   const currentLanguage = languages.find(l => l.value === i18n.locale.substring(0, 2))?.label;
 
+  const services = [
+    { name: 'quran', icon: 'book-open-variant' },
+    { name: 'hadith', icon: 'book-open-page-variant' },
+    { name: 'dua', icon: 'human-greeting' },
+  ];
+
   return (
     <SafeAreaView style={styles.container}>
+      
       <View style={styles.header}>
         <Text style={styles.title}>{i18n.t('home')}</Text>
         <Pressable onPress={() => setModalVisible(true)} style={pickerSelectStyles.inputIOS}>
           <Text style={{ color: 'white' }}>{currentLanguage}</Text>
         </Pressable>
       </View>
+
       <Modal
         animationType="slide"
         transparent={true}
@@ -69,7 +77,7 @@ export default function HomeScreen() {
           />
 
           <PrayerTimeCard />
-          <ServicesGrid />
+          <ServicesGrid services={services} />
         </View>
       </ScrollView>
     </SafeAreaView>
@@ -85,6 +93,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 15,
   },
   header: {
+    display: 'none', // hide for now, will show later
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',

app/(tabs)/index.tsx

@@ -1,5 +1,179 @@
-import { Redirect } from 'expo-router';
+import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useCallback, useEffect, useState } from 'react';
+
+import { getPrayerTimes, cities } from '../../utils/prayerTimeCalculator';
+import i18n from '../../i18n';
+import { useColorScheme } from 'react-native';
+import Colors from '../../constants/Colors';
+
+type Prayer = {
+  name: string;
+  time: string;
+};
+
+type City = keyof typeof cities;
 
 export default function TabIndex() {
-  return <Redirect href="/(tabs)/home" />;
+  const colorScheme = useColorScheme();
+  const theme = Colors[colorScheme ?? 'light'];
+  const [selectedCity, setSelectedCity] = useState<City>('Makkah');
+  const [prayerTimes, setPrayerTimes] = useState<Prayer[]>([]);
+  const [nextPrayerName, setNextPrayerName] = useState<string | null>(null);
+
+  const prayerNameMapping: { [key: string]: string } = {
+    fajr: i18n.t('fajr'),
+    dhuhr: i18n.t('dhuhr'),
+    asr: i18n.t('asr'),
+    maghrib: i18n.t('maghrib'),
+    isha: i18n.t('isha'),
+  };
+
+  const updatePrayerTimes = useCallback(() => {
+    const times = getPrayerTimes(selectedCity);
+    const prayers: Prayer[] = Object.keys(prayerNameMapping).map((key) => ({
+      name: prayerNameMapping[key],
+      time: times[key] || '-----',
+    }));
+    setPrayerTimes(prayers);
+
+    const now = new Date();
+    let nextPrayer: Prayer | null = null;
+
+    for (const prayer of prayers) {
+      if (prayer.time === '-----') continue;
+      const [hours, minutes] = prayer.time.split(':').map(Number);
+      const prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
+      if (prayerDate > now) {
+        nextPrayer = prayer;
+        break;
+      }
+    }
+
+    if (!nextPrayer && prayers.length > 0) {
+      const firstPrayer = prayers.find((p) => p.time !== '-----');
+      if (firstPrayer) {
+        nextPrayer = firstPrayer;
+      }
+    }
+
+    setNextPrayerName(nextPrayer ? nextPrayer.name : null);
+  }, [selectedCity]);
+
+  useEffect(() => {
+    updatePrayerTimes();
+    const interval = setInterval(updatePrayerTimes, 60000); // Update every minute
+    return () => clearInterval(interval);
+  }, [updatePrayerTimes]);
+
+  const renderPrayerTime = (prayer: Prayer) => {
+    const isNextPrayer = prayer.name === nextPrayerName;
+    return (
+      <View
+        key={prayer.name}
+        style={[styles.prayerRow, { backgroundColor: theme.secondary }, isNextPrayer && [styles.nextPrayerRow, { backgroundColor: theme.tint }]]}>
+        <View>
+          <Text style={[styles.prayerName, { color: theme.text }, isNextPrayer && styles.nextPrayerText]}>
+            {prayer.name}
+          </Text>
+        </View>
+        <Text style={[styles.prayerTime, { color: theme.text }, isNextPrayer && styles.nextPrayerTimeText]}>
+          {new Date(`1970-01-01T${prayer.time}:00`).toLocaleTimeString('en-US', {
+            hour: 'numeric',
+            minute: 'numeric',
+            hour12: false,
+          })}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+      <View style={[styles.citySelector, { backgroundColor: theme.background }]}>
+        {(Object.keys(cities) as City[]).map((city) => (
+          <Pressable
+            key={city}
+            onPress={() => setSelectedCity(city)}
+            style={[styles.cityButton, { backgroundColor: theme.secondary }, selectedCity === city && [styles.activeCityButton, { backgroundColor: theme.tint }]]}>
+            <Text
+              style={[
+                styles.cityButtonText,
+                { color: theme.text },
+                selectedCity === city && styles.activeCityButtonText,
+              ]}>
+              {i18n.t(city)}
+            </Text>
+          </Pressable>
+        ))}
+      </View>
+      <ScrollView contentContainerStyle={styles.listContainer}>
+        {prayerTimes.map(renderPrayerTime)}
+      </ScrollView>
+    </SafeAreaView>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  citySelector: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingVertical: 20,
+    paddingHorizontal: 10,
+  },
+  cityButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 25,
+    borderRadius: 20,
+    marginHorizontal: 5,
+  },
+  activeCityButton: {},
+  cityButtonText: {
+    fontSize: 18,
+    fontWeight: '500',
+  },
+  activeCityButtonText: {
+    color: '#fff',
+  },
+  listContainer: {
+    paddingHorizontal: 20,
+  },
+  prayerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 25,
+    paddingHorizontal: 20,
+    borderRadius: 15,
+    marginBottom: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  nextPrayerRow: {},
+  prayerName: {
+    fontSize: 28,
+    fontWeight: '600',
+  },
+  inCityText: {
+    fontSize: 18,
+  },
+  prayerTime: {
+    fontSize: 28,
+    fontWeight: 'bold',
+  },
+  nextPrayerText: {
+    color: '#fff',
+  },
+  nextPrayerTimeText: {
+    color: '#fff',
+    fontSize: 32,
+  },
+});

app/(tabs)/services.tsx

@@ -7,14 +7,12 @@ import React, { useState } from 'react';
 import CurrencyConverterModal from '@/components/CurrencyConverterModal';
 import HotelBusinessCardModal from '@/components/HotelBusinessCardModal';
 import LostKeyModal from '@/components/LostKeyModal';
-import TranslatorModal from '@/components/TranslatorModal';
 import PhrasebookModal from '@/components/PhrasebookModal';
 
 export default function ServicesScreen() {
   const [currencyModalVisible, setCurrencyModalVisible] = useState(false);
   const [hotelModalVisible, setHotelModalVisible] = useState(false);
   const [lostKeyModalVisible, setLostKeyModalVisible] = useState(false);
-  const [translatorModalVisible, setTranslatorModalVisible] = useState(false);
   const [phrasebookModalVisible, setPhrasebookModalVisible] = useState(false);
 
   const services = [
@@ -36,12 +34,6 @@ export default function ServicesScreen() {
       icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
       onPress: () => setLostKeyModalVisible(true),
     },
-    {
-      title: i18n.t('Translator'),
-      name: 'translator',
-      icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
-      onPress: () => setTranslatorModalVisible(true),
-    },
     {
       title: i18n.t('Phrasebook'),
       name: 'phrasebook',
@@ -73,10 +65,6 @@ export default function ServicesScreen() {
         visible={lostKeyModalVisible}
         onClose={() => setLostKeyModalVisible(false)}
       />
-      <TranslatorModal
-        visible={translatorModalVisible}
-        onClose={() => setTranslatorModalVisible(false)}
-      />
       <PhrasebookModal
         visible={phrasebookModalVisible}
         onClose={() => setPhrasebookModalVisible(false)}