Implement multilingual support by integrating i18n for dynamic text rendering across the app. Added language selection modal in HomeScreen and updated various components to utilize localized strings. Updated package dependencies for async storage and localization.

app/(tabs)/services.tsx

@@ -2,19 +2,20 @@ import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
 import { Text, View } from '@/components/Themed';
 import AdhkarCard from '@/components/AdhkarCard';
 import SupplicationListItem from '@/components/SupplicationListItem';
+import i18n from '@/i18n';
 
 const adhkarCategories = [
-  'Thikr said in the morning and evening',
-  'Thikr before sleeping',
-  'Thikr after salam',
+  'morningEveningThikr',
+  'beforeSleepingThikr',
+  'afterSalamThikr',
 ];
 
 const supplications = [
-  'Upon breaking fast',
-  'Supplication said by one fasting when presented with food and does not break his fast',
-  'When insulted while fasting',
-  'Supplication upon seeing the early or premature fruit',
-  'Supplication upon sneezing',
+  'breakingFastSupplication',
+  'fastingPersonSupplication',
+  'insultedWhileFasting',
+  'seeingFruitSupplication',
+  'sneezingSupplication',
 ]
 
 export default function ServicesScreen() {
@@ -22,15 +23,15 @@ export default function ServicesScreen() {
     <SafeAreaView style={styles.container}>
       <ScrollView>
         <View style={styles.innerContainer}>
-          <Text style={styles.title}>Services</Text>
-          <Text style={styles.sectionTitle}>Adhkar</Text>
-          {adhkarCategories.map((title, index) => (
-            <AdhkarCard key={index} title={title} />
+          <Text style={styles.title}>{i18n.t('services')}</Text>
+          <Text style={styles.sectionTitle}>{i18n.t('adhkar')}</Text>
+          {adhkarCategories.map((titleKey, index) => (
+            <AdhkarCard key={index} title={i18n.t(titleKey)} />
           ))}
 
-          <Text style={styles.sectionTitle}>Hisn Al-Muslim</Text>
-          {supplications.map((text, index) => (
-            <SupplicationListItem key={index} text={text} onPress={() => {}} />
+          <Text style={styles.sectionTitle}>{i18n.t('hisnAlMuslim')}</Text>
+          {supplications.map((textKey, index) => (
+            <SupplicationListItem key={index} text={i18n.t(textKey)} onPress={() => {}} />
           ))}
         </View>
       </ScrollView>