Add 'Programs' tab to TabLayout and refactor ServicesScreen to use FlatList for service cards
- Introduced a new 'Programs' tab in the TabLayout with localized title and icon. - Refactored ServicesScreen to replace ScrollView with FlatList for improved performance and layout, displaying service cards with icons. - Updated localization files to include new keys for services and programs.
This commit is contained in:
@@ -42,6 +42,13 @@ export default function TabLayout() {
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="th-large" color={color} />,
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="programs"
|
||||
options={{
|
||||
title: i18n.t('programs'),
|
||||
tabBarIcon: ({ color }) => <TabBarIcon name="briefcase" color={color} />,
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
190
app/(tabs)/programs.tsx
Normal file
190
app/(tabs)/programs.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { useState } from 'react';
|
||||
import { StyleSheet, SafeAreaView, Text, View, TouchableOpacity, ScrollView } from 'react-native';
|
||||
import Colors from '@/constants/Colors';
|
||||
import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
|
||||
|
||||
type Activity = {
|
||||
time: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
transport?: string;
|
||||
};
|
||||
|
||||
type Activities = {
|
||||
[key: string]: Activity[];
|
||||
};
|
||||
|
||||
export default function Programs() {
|
||||
const colorScheme = 'dark';
|
||||
const [activeDay, setActiveDay] = useState('Day 1');
|
||||
|
||||
const activities: Activities = {
|
||||
'Day 1': [
|
||||
{
|
||||
time: '16:30 - 19:15',
|
||||
title: 'Depart for Mecca',
|
||||
description: 'From your location to Mecca',
|
||||
icon: <FontAwesome name="plane" size={24} color="black" />,
|
||||
transport: 'Transport to hotel',
|
||||
},
|
||||
{
|
||||
time: '21:00 - 23:00',
|
||||
title: 'Dinner at Al-Baik',
|
||||
description: 'Masjid al-',
|
||||
icon: <FontAwesome name="cutlery" size={24} color="black" />,
|
||||
},
|
||||
{
|
||||
time: '00:00 - 04:00',
|
||||
title: 'Tawaf',
|
||||
description: 'Kaaba',
|
||||
icon: <FontAwesome5 name="kaaba" size={24} color="black" />,
|
||||
},
|
||||
],
|
||||
'Day 2': [
|
||||
{
|
||||
time: '10:00 - 12:00',
|
||||
title: 'Shopping',
|
||||
description: 'Zamzam Tower',
|
||||
icon: <FontAwesome name="shopping-bag" size={24} color="black" />,
|
||||
},
|
||||
],
|
||||
'Day 3': [],
|
||||
'Day 4': [],
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.container, { backgroundColor: Colors[colorScheme].background }]}>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { color: Colors[colorScheme].text }]}>Umrah Pilgrimage</Text>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.daysScroll}>
|
||||
{Object.keys(activities).map((day) => (
|
||||
<TouchableOpacity
|
||||
key={day}
|
||||
style={[styles.dayButton, activeDay === day && styles.activeDayButton]}
|
||||
onPress={() => setActiveDay(day)}
|
||||
>
|
||||
<Text style={[styles.dayText, activeDay === day && styles.activeDayText]}>{day}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.content}>
|
||||
{activities[activeDay].map((activity, index) => (
|
||||
<View key={index}>
|
||||
<View style={styles.activityCard}>
|
||||
<View style={styles.timeContainer}>
|
||||
<Text style={styles.timeText}>{activity.time}</Text>
|
||||
<Text style={styles.activityTitle}>{activity.title}</Text>
|
||||
<Text style={styles.activityDescription}>{activity.description}</Text>
|
||||
</View>
|
||||
<View style={styles.iconContainer}>{activity.icon}</View>
|
||||
</View>
|
||||
{activity.transport && (
|
||||
<View style={styles.transportContainer}>
|
||||
<View style={styles.dot} />
|
||||
<View style={styles.dot} />
|
||||
<View style={styles.dot} />
|
||||
<Text style={styles.transportText}>{activity.transport}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
daysScroll: {
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
dayButton: {
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#333',
|
||||
marginRight: 10,
|
||||
},
|
||||
activeDayButton: {
|
||||
backgroundColor: '#555',
|
||||
},
|
||||
dayText: {
|
||||
color: 'white',
|
||||
},
|
||||
activeDayText: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
activityCard: {
|
||||
backgroundColor: '#222',
|
||||
borderRadius: 15,
|
||||
padding: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
timeContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
timeText: {
|
||||
color: 'gray',
|
||||
fontSize: 14,
|
||||
},
|
||||
activityTitle: {
|
||||
color: 'white',
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
marginVertical: 4,
|
||||
},
|
||||
activityDescription: {
|
||||
color: 'gray',
|
||||
fontSize: 14,
|
||||
},
|
||||
iconContainer: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
backgroundColor: 'white',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
transportContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginVertical: 10,
|
||||
},
|
||||
dot: {
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
backgroundColor: 'gray',
|
||||
marginHorizontal: 3,
|
||||
},
|
||||
transportText: {
|
||||
color: 'gray',
|
||||
marginLeft: 10,
|
||||
},
|
||||
});
|
||||
@@ -1,40 +1,39 @@
|
||||
import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
|
||||
import { Text, View } from '@/components/Themed';
|
||||
import AdhkarCard from '@/components/AdhkarCard';
|
||||
import SupplicationListItem from '@/components/SupplicationListItem';
|
||||
import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
|
||||
import { Text } from '@/components/Themed';
|
||||
import i18n from '@/i18n';
|
||||
import { FontAwesome5 } from '@expo/vector-icons';
|
||||
import ServiceCard from '@/components/ServiceCard';
|
||||
|
||||
const adhkarCategories = [
|
||||
'morningEveningThikr',
|
||||
'beforeSleepingThikr',
|
||||
'afterSalamThikr',
|
||||
const services = [
|
||||
{
|
||||
key: 'sarToTmt',
|
||||
icon: <FontAwesome5 name="exchange-alt" size={24} color="#D4AF37" />,
|
||||
},
|
||||
{
|
||||
key: 'hotelBusinessCard',
|
||||
icon: <FontAwesome5 name="vcard" size={24} color="#D4AF37" />,
|
||||
},
|
||||
{
|
||||
key: 'masterkeyBox',
|
||||
icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
|
||||
},
|
||||
{
|
||||
key: 'translator',
|
||||
icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
|
||||
},
|
||||
];
|
||||
|
||||
const supplications = [
|
||||
'breakingFastSupplication',
|
||||
'fastingPersonSupplication',
|
||||
'insultedWhileFasting',
|
||||
'seeingFruitSupplication',
|
||||
'sneezingSupplication',
|
||||
]
|
||||
|
||||
export default function ServicesScreen() {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<View style={styles.innerContainer}>
|
||||
<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}>{i18n.t('hisnAlMuslim')}</Text>
|
||||
{supplications.map((textKey, index) => (
|
||||
<SupplicationListItem key={index} text={i18n.t(textKey)} onPress={() => {}} />
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Text style={styles.title}>{i18n.t('services')}</Text>
|
||||
<FlatList
|
||||
data={services}
|
||||
renderItem={({ item }) => <ServiceCard title={i18n.t(item.key)} icon={item.icon} />}
|
||||
keyExtractor={(item) => item.key}
|
||||
numColumns={2}
|
||||
columnWrapperStyle={styles.row}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
@@ -42,8 +41,6 @@ export default function ServicesScreen() {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
innerContainer: {
|
||||
paddingHorizontal: 15,
|
||||
},
|
||||
title: {
|
||||
@@ -51,10 +48,8 @@ const styles = StyleSheet.create({
|
||||
fontWeight: 'bold',
|
||||
marginVertical: 15,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
marginVertical: 10,
|
||||
}
|
||||
row: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user