create-gufran-expo-app 2.0.0 → 2.0.2

package/template/src/screens/events/EventScreen.tsx

@@ -0,0 +1,460 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, StatusBar, Platform, TouchableOpacity, SectionList, Image } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { theme } from '@constants';
+import { Fonts } from '@constants/Fonts';
+import { moderateScale } from '@utils/scaling';
+import SVG from '@assets/icons';
+import Images from '@assets/images';
+import { EventScreenProps } from '@navigation';
+import { SearchBar } from 'react-native-screens';
+import { TextInput } from '@components/common';
+
+// Mock Data
+interface Event {
+    id: string;
+    type: 'match' | 'training' | 'fundraiser' | 'event';
+    title: string;
+    subtitle?: string;
+    time: string;
+    location: string;
+    team1?: { name: string; logo: any };
+    team2?: { name: string; logo: any };
+    tag?: string;
+}
+
+interface Section {
+    title: string;
+    data: Event[];
+}
+
+const EVENTS_DATA: Section[] = [
+    {
+        title: '6th May 2025',
+        data: [
+            {
+                id: '1',
+                type: 'match',
+                title: 'Net Masters',
+                time: '3:00 PM',
+                location: '98 Shirley Street 4209, Sydney',
+                team1: { name: 'All Starts', logo: Images.clubDefauldImage },
+                team2: { name: 'Pirates', logo: Images.clubDefauldImage },
+                subtitle: 'SAT, DEC 16'
+            }
+        ]
+    },
+    {
+        title: '7th May 2025',
+        data: [
+            {
+                id: '2',
+                type: 'training',
+                title: 'Team Strength Training',
+                time: '2:00 PM - 4:00 PM',
+                location: '98 Shirley Street 4209, Sydney',
+                tag: 'Training'
+            },
+            {
+                id: '3',
+                type: 'fundraiser',
+                title: 'Fundraiser Event',
+                time: '2:00 PM - 4:00 PM',
+                location: '98 Shirley Street 4209, Sydney',
+                tag: 'Fundraiser'
+            }
+        ]
+    }
+];
+
+export const EventScreen: React.FC<EventScreenProps> = ({ navigation, route }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const { selectedClub } = route.params || {};
+
+    const renderItem = ({ item }: { item: Event }) => {
+        if (item.type === 'match') {
+            return (
+                <View style={styles.card}>
+                    <View style={styles.cardHeader}>
+                        <Image source={Images.clubDefauldImage} style={styles.smallLogo} />
+                        <Text style={styles.cardTitle}>{item.title}</Text>
+                    </View>
+
+                    <View style={styles.matchInfo}>
+                        <Text style={styles.matchDate}>{item.subtitle}</Text>
+                        <Text style={styles.matchTime}>{item.time}</Text>
+                    </View>
+
+                    <View style={styles.teamsContainer}>
+                        <View style={styles.team}>
+                            <Image source={item.team1?.logo} style={styles.teamLogo} />
+                            <View>
+                                <Text style={styles.teamName}>{item.team1?.name}</Text>
+                                <Text style={styles.teamSubName}>Boomers</Text>
+                            </View>
+                        </View>
+                        <Text style={styles.vsText}>VS</Text>
+                        <View style={styles.team}>
+                            <View style={{ alignItems: 'flex-end' }}>
+                                <Text style={styles.teamName}>{item.team2?.name}</Text>
+                                <Text style={styles.teamSubName}>Eagles</Text>
+                            </View>
+                            <Image source={item.team2?.logo} style={styles.teamLogo} />
+                        </View>
+                    </View>
+
+                    <View style={styles.locationContainer}>
+                        <SVG.locationIcon width={moderateScale(16)} height={moderateScale(16)} />
+                        <Text style={styles.locationText}>{item.location}</Text>
+                    </View>
+                </View>
+            );
+        }
+
+        return (
+            <View style={styles.card}>
+                <View style={styles.cardHeader}>
+                    <Image source={Images.clubDefauldImage} style={styles.smallLogo} />
+                    <Text style={styles.cardTitle}>Net Masters</Text>
+                </View>
+
+                <View style={styles.eventRow}>
+                    <Text style={styles.eventTitle}>{item.title}</Text>
+                    {item.tag && (
+                        <View style={[styles.tag, item.tag === 'Training' ? styles.trainingTag : styles.fundraiserTag]}>
+                            <Text style={[styles.tagText, item.tag === 'Training' ? styles.trainingTagText : styles.fundraiserTagText]}>
+                                {item.tag}
+                            </Text>
+                        </View>
+                    )}
+                </View>
+
+                <Text style={styles.eventTime}>{item.time}</Text>
+
+                <View style={styles.locationContainer}>
+                    <SVG.locationIcon width={moderateScale(16)} height={moderateScale(16)} />
+                    <Text style={styles.locationText}>{item.location}</Text>
+                </View>
+            </View>
+        );
+    };
+
+    const renderSectionHeader = ({ section: { title } }: { section: { title: string } }) => (
+        <Text style={styles.sectionHeader}>{title}</Text>
+    );
+
+    const renderEmptyComponent = () => (
+        <View style={styles.emptyContainer}>
+            <Text style={styles.emptyListText}>No events found</Text>
+            <Text style={styles.emptySubText}>Try refreshing or check back later</Text>
+        </View>
+    );
+
+    return (
+        <View style={styles.container}>
+            <StatusBar
+                barStyle="light-content"
+                backgroundColor={theme.colors.blue}
+                translucent={Platform.OS === 'android' ? true : false}
+            />
+            {Platform.OS === 'ios' && <View style={styles.statusBarBackground} />}
+            <SafeAreaView style={styles.header}>
+                <View style={{ flexDirection: 'row', paddingHorizontal: theme.spacing.lg }}>
+                    <TouchableOpacity onPress={() => navigation.goBack()}>
+                        <SVG.arrowLeft_white width={moderateScale(25)} height={moderateScale(25)} />
+                    </TouchableOpacity>
+                    <View style={{ flexDirection: 'row' }}>
+                        <View style={styles.userConSty}>
+                            {!!selectedClub?.clubImage ? (
+                                <Image
+                                    source={{ uri: selectedClub.clubImage }}
+                                    resizeMode='cover'
+                                    style={styles.userDetailsSty} />
+                            ) : (
+                                <View style={styles.placeholderLogoHeader}>
+                                    <SVG.UsersIcon width={moderateScale(20)} height={moderateScale(20)} />
+                                </View>
+                            )}
+                        </View>
+                        <Text style={styles.userNameSty}>{selectedClub?.clubName || 'Boomers Club'}</Text>
+                    </View>
+                </View>
+                <Text style={styles.headerTitle}>Events</Text>
+
+                <View style={styles.content}>
+                    <View style={styles.searchContainer}>
+                        {/* <SVG.search width={moderateScale(20)} height={moderateScale(20)} /> */}
+                        {/* <TextInput
+                            style={styles.searchInput}
+                            placeholder="Search here"
+                            placeholderTextColor={theme.colors.textSecondary}
+                            value={searchQuery}
+                            onChangeText={setSearchQuery}
+                        /> */}
+                        <TextInput
+                            leftIconStyle={{ marginLeft: theme.spacing.sm }}
+                            leftIconSizeWidth={moderateScale(17)}
+                            leftIconSizeHeight={moderateScale(17)}
+                            placeholder="Unique code and club name"
+                            style={styles.searchInput}
+                            leftIcon={SVG.search}
+                            variant="outlined"
+                            maxLength={50}
+                            value={searchQuery}
+                            onChangeText={setSearchQuery}
+                        />
+
+                    </View>
+                    <View style={{ marginTop: theme.spacing.md }}>
+
+                        <SectionList
+                            sections={EVENTS_DATA}
+                            keyExtractor={(item) => item.id}
+                            renderItem={renderItem}
+                            renderSectionHeader={renderSectionHeader}
+                            contentContainerStyle={styles.listContent}
+                            showsVerticalScrollIndicator={false}
+                            stickySectionHeadersEnabled={false}
+                            ListEmptyComponent={renderEmptyComponent}
+                        />
+                    </View>
+                </View>
+            </SafeAreaView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: theme.colors.blue,
+    },
+    statusBarBackground: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: Platform.OS === 'ios' ? 44 : 0,
+        backgroundColor: theme.colors.blue,
+        zIndex: 1000,
+    },
+    header: {
+        flex: 1,
+        backgroundColor: theme.colors.blue,
+        paddingVertical: theme.spacing.xs,
+        paddingTop: Platform.OS === 'android' ? theme.spacing.lg : theme.spacing.xs,
+    },
+    headerTitle: {
+        marginTop: moderateScale(20),
+        fontFamily: Fonts.outfitMedium,
+        fontSize: moderateScale(22),
+        color: theme.colors.white,
+        paddingHorizontal: theme.spacing.lg,
+        marginBottom: theme.spacing.sm,
+    },
+    content: {
+        flex: 1,
+        backgroundColor: theme.colors.white,
+        paddingHorizontal: theme.spacing.lg,
+        paddingTop: theme.spacing.md,
+        borderTopLeftRadius: moderateScale(30),
+        borderTopRightRadius: moderateScale(30),
+    },
+    userConSty: {
+        marginHorizontal: moderateScale(10),
+        width: moderateScale(30),
+        height: moderateScale(30),
+        borderRadius: moderateScale(15),
+        borderWidth: 1.5,
+        borderColor: theme.colors.imageBorder,
+        backgroundColor: theme.colors.background,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    userNameSty: {
+        marginTop: moderateScale(5),
+        color: theme.colors.white,
+        fontFamily: Fonts.outfitMedium,
+        fontSize: moderateScale(15)
+    },
+    userDetailsSty: {
+        width: moderateScale(30),
+        height: moderateScale(30),
+        borderRadius: moderateScale(15),
+    },
+    placeholderLogoHeader: {
+        width: moderateScale(20),
+        height: moderateScale(20),
+        borderRadius: moderateScale(10),
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    searchContainer: {
+        paddingVertical: theme.spacing.sm,
+        marginBottom: theme.spacing.lg,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: Fonts.outfitRegular,
+        fontSize: moderateScale(14),
+        color: theme.colors.text,
+    },
+    sectionHeader: {
+        fontFamily: Fonts.outfitMedium,
+        fontSize: moderateScale(14),
+        color: theme.colors.blue,
+        marginBottom: theme.spacing.md,
+        marginTop: theme.spacing.sm,
+    },
+    listContent: {
+        paddingBottom: theme.spacing.xl,
+    },
+    card: {
+        backgroundColor: theme.colors.lightLavenderGray,
+        borderRadius: moderateScale(16),
+        padding: theme.spacing.md,
+        marginBottom: theme.spacing.lg,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+        borderWidth: 1,
+        borderColor: theme.colors.imageBorder,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: theme.spacing.sm,
+    },
+    smallLogo: {
+        width: moderateScale(20),
+        height: moderateScale(20),
+        borderRadius: moderateScale(10),
+        marginRight: theme.spacing.xs,
+    },
+    cardTitle: {
+        fontFamily: Fonts.outfitMedium,
+        fontSize: moderateScale(14),
+        color: theme.colors.text,
+    },
+    matchInfo: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: theme.spacing.md,
+    },
+    matchDate: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: moderateScale(12),
+        color: theme.colors.black,
+        textTransform: 'uppercase',
+    },
+    matchTime: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: moderateScale(12),
+        color: theme.colors.text,
+    },
+    teamsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: theme.spacing.md,
+    },
+    team: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    teamLogo: {
+        width: moderateScale(40),
+        height: moderateScale(40),
+        borderRadius: moderateScale(20),
+        marginHorizontal: theme.spacing.sm,
+    },
+    teamName: {
+        fontFamily: Fonts.outfitSemiBold,
+        fontSize: moderateScale(14),
+        color: theme.colors.text,
+    },
+    teamSubName: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: moderateScale(12),
+        color: theme.colors.textSecondary,
+    },
+    vsText: {
+        fontFamily: Fonts.outfitBold,
+        fontSize: moderateScale(16),
+        color: theme.colors.text,
+        marginHorizontal: theme.spacing.sm,
+    },
+    locationContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.border,
+        paddingTop: theme.spacing.sm,
+    },
+    locationText: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: moderateScale(12),
+        color: theme.colors.textSecondary,
+        marginLeft: theme.spacing.xs,
+    },
+    eventRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: theme.spacing.xs,
+    },
+    eventTitle: {
+        fontFamily: Fonts.outfitSemiBold,
+        fontSize: moderateScale(16),
+        color: theme.colors.text,
+    },
+    tag: {
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs / 2,
+        borderRadius: moderateScale(12),
+    },
+    trainingTag: {
+        backgroundColor: '#E0F7FA',
+    },
+    fundraiserTag: {
+        backgroundColor: '#FCE4EC',
+    },
+    tagText: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: moderateScale(10),
+    },
+    trainingTagText: {
+        color: '#006064',
+    },
+    fundraiserTagText: {
+        color: '#880E4F',
+    },
+    eventTime: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: moderateScale(12),
+        color: theme.colors.textSecondary,
+        marginBottom: theme.spacing.md,
+    },
+    emptyContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: theme.spacing.xl,
+    },
+    emptyListText: {
+        fontFamily: Fonts.outfitMedium,
+        fontSize: theme.typography.fontSize.md,
+        color: theme.colors.text,
+        textAlign: 'center',
+        marginBottom: theme.spacing.xs,
+    },
+    emptySubText: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: theme.typography.fontSize.sm,
+        color: theme.colors.textSecondary,
+        textAlign: 'center',
+    },
+});

package/template/src/screens/index.ts

@@ -0,0 +1,42 @@
+export * from './HomeScreen';
+export * from './ProfileScreen';
+export * from './SettingsScreen';
+export * from './DetailsScreen';
+export * from './SportHubScreen';
+export * from './auth';
+//Club Screens
+export * from './clubs/JoinClub';
+export * from './clubs/ClubDeteils';
+export * from './clubs/Announcements';
+export * from './raffles/RafflesScreen';
+
+//Team Screens
+export * from './teams/MyTeamScreen';
+export * from './teams/MyTeamDetailsScreen';
+export * from './teams/JoinTeamScreen';
+export * from './teams/PendingRequestsScreen';
+
+//Chat Screens
+export * from './chat/ChatThreadsScreen';
+export * from './chat/ChatScreen';
+export * from './chat/ReportMessageScreen';
+export * from './volunteerOpportunities/VolunteerOpportunitiesScreen';
+export * from './volunteerOpportunities/VolunteerOpportunitiesDetailsScreen';
+
+
+//Raffles Screens
+export * from './raffles/MyReferralMembersScreen';
+export * from './raffles/RaffleDetailsScreen';
+export * from './clubs/BuyRaffleTicketsScreen';
+
+// Reminder Screen
+export * from './volunteerOpportunities/SetReminderScreen';
+export * from './raffles/SetRaffleReminderScreen';
+
+// Event Screen
+export * from './events/EventScreen';
+
+
+
+
+