Add expo-asset dependency and update layout for safe area insets

- Included expo-asset in app.json and package.json for asset management.
- Refactored layout components in HomeScreen, TabIndex, Programs, and ServicesScreen to utilize safe area insets for better UI on different devices.
- Updated StatusBar style in RootLayoutNav for improved visibility.

app/(tabs)/index.tsx

@@ -1,5 +1,6 @@
-import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useCallback, useEffect, useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { getPrayerTimes, cities } from '../../utils/prayerTimeCalculator';
 import i18n from '../../i18n';
@@ -19,6 +20,7 @@ export default function TabIndex() {
   const [selectedCity, setSelectedCity] = useState<City>('Makkah');
   const [prayerTimes, setPrayerTimes] = useState<Prayer[]>([]);
   const [nextPrayerName, setNextPrayerName] = useState<string | null>(null);
+  const insets = useSafeAreaInsets();
 
   const prayerNameMapping: { [key: string]: string } = {
     fajr: i18n.t('fajr'),
@@ -88,7 +90,7 @@ export default function TabIndex() {
   };
 
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
+    <View style={[styles.container, { backgroundColor: theme.background, paddingTop: insets.top }]}>
       <View style={[styles.citySelector, { backgroundColor: theme.background }]}>
         {(Object.keys(cities) as City[]).map((city) => (
           <Pressable
@@ -109,7 +111,7 @@ export default function TabIndex() {
       <ScrollView contentContainerStyle={styles.listContainer}>
         {prayerTimes.map(renderPrayerTime)}
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 }