nurmuhammet/umra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Nurmuhammet Allanov
2025-08-16 22:24:47 +05:00
parent 0f8c9b5e55
commit e431c42df1
13 changed files with 460 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/FeatureCard.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Colors from '@/constants/Colors';
import { FontAwesome } from '@expo/vector-icons';
import i18n from '@/i18n';
type FeatureCardProps = {
title: string;
@@ -16,7 +17,7 @@ export default function FeatureCard({ title, description, isNew = false }: Featu
<View style={[styles.container, { backgroundColor: Colors[colorScheme].secondary }]}>
{isNew && (
<View style={styles.newBadge}>
<Text style={styles.newText}>New Experience</Text>
<Text style={styles.newText}>{i18n.t('newExperience')}</Text>
</View>
)}
<View style={styles.content}>

3
components/PrayerTimeCard.tsx
View File

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ImageBackground, Pressable } from 'react-native
import Colors from '@/constants/Colors';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import prayerTimeCalculator, { cities } from '@/utils/prayerTimeCalculator';
import i18n from '@/i18n';
type Prayer = {
name: string;
@@ -97,7 +98,7 @@ export default function PrayerTimeCard() {
</View>
</View>
<Text style={styles.remainingTimeLabel}>
{nextPrayer ? `Left on ${nextPrayer.name} prayer` : 'Prayer Times'}
{nextPrayer ? i18n.t('leftOnPrayer', { prayerName: nextPrayer.name }) : i18n.t('prayerTimes')}
</Text>
<Text style={styles.remainingTime}>{remainingTime}</Text>
<View style={styles.prayerTimesContainer}>

11
components/ServicesGrid.tsx
View File

@@ -2,11 +2,12 @@ import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Colors from '@/constants/Colors';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import i18n from '@/i18n';
const services = [
{ name: 'Qur\'an', icon: 'book-open-variant' },
{ name: 'Hadith', icon: 'book-open-page-variant' },
{ name: 'Du\'a', icon: 'human-greeting' },
{ name: 'quran', icon: 'book-open-variant' },
{ name: 'hadith', icon: 'book-open-page-variant' },
{ name: 'dua', icon: 'human-greeting' },
];
export default function ServicesGrid() {
@@ -14,14 +15,14 @@ export default function ServicesGrid() {
return (
<View style={styles.container}>
<Text style={styles.title}>Services to Enrich Your Spiritual Experience</Text>
<Text style={styles.title}>{i18n.t('servicesToEnrich')}</Text>
<View style={styles.grid}>
{services.map((service, index) => (
<View key={index} style={styles.serviceItem}>
<View style={[styles.iconContainer, { backgroundColor: Colors[colorScheme].secondary }]}>
<MaterialCommunityIcons name={service.icon} size={30} color={Colors[colorScheme].tint} />
</View>
<Text style={styles.serviceName}>{service.name}</Text>
<Text style={styles.serviceName}>{i18n.t(service.name)}</Text>
</View>
))}
</View>