From 30dd67ecdf0d6b04189fd9c2806cae8b2cefda05 Mon Sep 17 00:00:00 2001
From: Mekan1206 <myradow207@gmail.com>
Date: Sat, 20 Sep 2025 11:56:07 +0500
Subject: [PATCH] Prayer city saved on click

---
 app/(tabs)/index.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 561fa63..87ef300 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,6 +1,7 @@
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useCallback, useEffect, useState } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { getPrayerTimes, cities } from '../../utils/prayerTimeCalculator';
 import i18n from '../../i18n';
@@ -21,6 +22,21 @@ export default function TabIndex() {
   const [nextPrayerName, setNextPrayerName] = useState<string | null>(null);
   const insets = useSafeAreaInsets();
 
+  useEffect(() => {
+    const loadSelectedCity = async () => {
+      try {
+        const city = (await AsyncStorage.getItem('selectedCity')) as City;
+        if (city) {
+          setSelectedCity(city);
+        }
+      } catch (error) {
+        console.error('Failed to load selected city:', error);
+      }
+    };
+
+    loadSelectedCity();
+  }, []);
+
   const prayerNameMapping: { [key: string]: string } = {
     fajr: i18n.t('fajr'),
     dhuhr: i18n.t('dhuhr'),
@@ -66,6 +82,15 @@ export default function TabIndex() {
     return () => clearInterval(interval);
   }, [updatePrayerTimes]);
 
+  const handleCityChange = async (city: City) => {
+    setSelectedCity(city);
+    try {
+      await AsyncStorage.setItem('selectedCity', city);
+    } catch (error) {
+      console.error('Failed to save selected city:', error);
+    }
+  };
+
   const renderPrayerTime = (prayer: Prayer) => {
     const isNextPrayer = prayer.name === nextPrayerName;
     return (
@@ -94,7 +119,7 @@ export default function TabIndex() {
         {(Object.keys(cities) as City[]).map((city) => (
           <Pressable
             key={city}
-            onPress={() => setSelectedCity(city)}
+            onPress={() => handleCityChange(city)}
             style={[styles.cityButton, { backgroundColor: theme.secondary }, selectedCity === city && [styles.activeCityButton, { backgroundColor: theme.tint }]]}>
             <Text
               style={[