Refactor PrayerTimeCard component to improve remaining time calculation and enhance background color in HomeScreen for better visibility. Added View import in _layout.tsx for layout adjustments.

app/(tabs)/_layout.tsx

@@ -1,6 +1,6 @@
 import FontAwesome from '@expo/vector-icons/FontAwesome';
 import { Tabs } from 'expo-router';
-import { useColorScheme } from 'react-native';
+import { useColorScheme, View } from 'react-native';
 
 import Colors from '@/constants/Colors';
 import i18n from '@/i18n';

app/(tabs)/home.tsx

@@ -79,6 +79,7 @@ export default function HomeScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: Colors.dark.background,
   },
   innerContainer: {
     paddingHorizontal: 15,

components/PrayerTimeCard.tsx

@@ -4,6 +4,7 @@ import Colors from '@/constants/Colors';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { getPrayerTimes, cities } from '@/utils/prayerTimeCalculator';
 import i18n from '@/i18n';
+import { createIconSetFromFontello } from 'react-native-vector-icons';
 
 type Prayer = {
   name: string;
@@ -33,50 +34,60 @@ export default function PrayerTimeCard() {
       time: times[key] || '-----',
       icon: prayerIconMapping[key],
     }));
-
     setPrayerTimes(prayers);
 
-    // Find next prayer and calculate remaining time
-    const now = new Date();
-    let nextPrayerInfo = null;
-    for (const prayer of prayers) {
-      const [hours, minutes] = prayer.time.split(':').map(Number);
-      const prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
-      if (prayerDate > now) {
-        nextPrayerInfo = { name: prayer.name, time: prayer.time };
-        break;
-      }
-    }
-
-    if (!nextPrayerInfo && prayers.length > 0) {
-      // If all prayers for today have passed, next prayer is Fajr of tomorrow
-      nextPrayerInfo = { name: prayers[0].name, time: prayers[0].time };
-    }
-
-    setNextPrayer(nextPrayerInfo);
-  }, [selectedCity]);
-
-  useEffect(() => {
-    if (!nextPrayer) return;
-
     const interval = setInterval(() => {
-      const now = new Date();
-      const [hours, minutes] = nextPrayer.time.split(':').map(Number);
-      let prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
-      
-      if (prayerDate < now) {
-        prayerDate.setDate(prayerDate.getDate() + 1);
-      }
-
-      const diff = prayerDate.getTime() - now.getTime();
-      const h = Math.floor(diff / (1000 * 60 * 60));
-      const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-      const s = Math.floor((diff % (1000 * 60)) / 1000);
-      setRemainingTime(`${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`);
+      calculateRemainingTime();
     }, 1000);
 
+    const calculateRemainingTime = () => {
+      const now = new Date();
+      let nextPrayerInfo: { name: string; time: string } | 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) {
+          nextPrayerInfo = { name: prayer.name, time: prayer.time };
+          break;
+        }
+      }
+
+      if (!nextPrayerInfo && prayers.length > 0) {
+        const firstPrayer = prayers.find(p => p.time !== '-----');
+        if (firstPrayer) {
+          nextPrayerInfo = { name: firstPrayer.name, time: firstPrayer.time };
+        }
+      }
+      
+      setNextPrayer(current => {
+        if (current?.name === nextPrayerInfo?.name) return current;
+        return nextPrayerInfo;
+      });
+
+      if (nextPrayerInfo) {
+        const [hours, minutes] = nextPrayerInfo.time.split(':').map(Number);
+        let prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
+
+        if (prayerDate < now) {
+          prayerDate.setDate(prayerDate.getDate() + 1);
+        }
+
+        const diff = prayerDate.getTime() - now.getTime();
+        const h = Math.floor(diff / (1000 * 60 * 60));
+        const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        const s = Math.floor((diff % (1000 * 60)) / 1000);
+        setRemainingTime(`${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`);
+      } else {
+        setRemainingTime('');
+      }
+    }
+
+    calculateRemainingTime();
+
     return () => clearInterval(interval);
-  }, [nextPrayer]);
+  }, [selectedCity]);
 
   return (
     <ImageBackground