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,13 +34,18 @@ export default function PrayerTimeCard() {
       time: times[key] || '-----',
       icon: prayerIconMapping[key],
     }));
-
     setPrayerTimes(prayers);
 
-    // Find next prayer and calculate remaining time
+    const interval = setInterval(() => {
+      calculateRemainingTime();
+    }, 1000);
+
+    const calculateRemainingTime = () => {
       const now = new Date();
-    let nextPrayerInfo = null;
+      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) {
@@ -49,19 +55,19 @@ export default function PrayerTimeCard() {
       }
 
       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 };
+        const firstPrayer = prayers.find(p => p.time !== '-----');
+        if (firstPrayer) {
+          nextPrayerInfo = { name: firstPrayer.name, time: firstPrayer.time };
+        }
       }
       
-    setNextPrayer(nextPrayerInfo);
-  }, [selectedCity]);
+      setNextPrayer(current => {
+        if (current?.name === nextPrayerInfo?.name) return current;
+        return nextPrayerInfo;
+      });
 
-  useEffect(() => {
-    if (!nextPrayer) return;
-
-    const interval = setInterval(() => {
-      const now = new Date();
-      const [hours, minutes] = nextPrayer.time.split(':').map(Number);
+      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) {
@@ -73,10 +79,15 @@ export default function PrayerTimeCard() {
         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')}`);
-    }, 1000);
+      } else {
+        setRemainingTime('');
+      }
+    }
+
+    calculateRemainingTime();
 
     return () => clearInterval(interval);
-  }, [nextPrayer]);
+  }, [selectedCity]);
 
   return (
     <ImageBackground