11import React , { useState , useEffect } from 'react' ;
2- import { ImageBackground , ScrollView , StyleSheet , View , Text , Pressable , ActivityIndicator , Alert } from 'react-native' ;
2+ import {
3+ ImageBackground ,
4+ ScrollView ,
5+ StyleSheet ,
6+ View ,
7+ Text ,
8+ Pressable ,
9+ ActivityIndicator ,
10+ Alert ,
11+ } from 'react-native' ;
312import { SafeAreaView } from 'react-native-safe-area-context' ;
413import { useLocalSearchParams , useRouter , Stack } from 'expo-router' ;
514import { useAuth } from '@/context/AuthContext' ;
@@ -79,7 +88,7 @@ export default function EventSignUpPage() {
7988 const start = event ?. startDateTime ? new Date ( event . startDateTime ) : null ;
8089 const end = event ?. endDateTime ? new Date ( event . endDateTime ) : null ;
8190
82- const dateFormatted = start
91+ const dateFormatted = start
8392 ? start . toLocaleDateString ( undefined , {
8493 month : 'long' ,
8594 day : 'numeric' ,
@@ -100,39 +109,65 @@ export default function EventSignUpPage() {
100109 return (
101110 < >
102111 < Stack . Screen options = { { headerShown : false } } />
103- < ImageBackground source = { backgroundImage } style = { StyleSheet . absoluteFillObject } >
104- < SafeAreaView style = { styles . container } >
105- < ScrollView contentContainerStyle = { styles . scrollContent } >
106- < Pressable onPress = { ( ) => router . back ( ) } style = { styles . backButton } >
107- < Ionicons name = "arrow-back" size = { 24 } color = "#1D0F48" />
108- < Text style = { styles . backText } > Back</ Text >
109- </ Pressable >
110- < Text style = { styles . title } > Sign Up</ Text >
111- < View style = { styles . dateSection } >
112- < View style = { { flexDirection : 'row' , alignItems : 'center' , marginBottom : 12 } } >
113- < Ionicons name = "calendar-outline" size = { 24 } color = "#1D0F48" style = { { marginRight : 8 } } />
114- < Text style = { styles . sectionLabel } > Date:</ Text >
115- < Text style = { [ styles . dateValue , { marginLeft : 8 } ] } > { dateFormatted } </ Text >
116- </ View >
117- < View style = { { flexDirection : 'row' , alignItems : 'center' } } >
118- < Ionicons name = "time-outline" size = { 24 } color = "#1D0F48" style = { { marginRight : 8 } } />
119- < Text style = { [ styles . sectionLabel , ] } > Time:</ Text >
120- < Text style = { [ styles . dateValue , { marginLeft : 8 } ] } > { timeFormatted } </ Text >
112+ < ImageBackground
113+ source = { backgroundImage }
114+ style = { StyleSheet . absoluteFillObject }
115+ >
116+ < SafeAreaView style = { styles . container } >
117+ < ScrollView contentContainerStyle = { styles . scrollContent } >
118+ < Pressable onPress = { ( ) => router . back ( ) } style = { styles . backButton } >
119+ < Ionicons name = "arrow-back" size = { 24 } color = "#1D0F48" />
120+ < Text style = { styles . backText } > Back</ Text >
121+ </ Pressable >
122+ < Text style = { styles . title } > Sign Up</ Text >
123+ < View style = { styles . dateSection } >
124+ < View
125+ style = { {
126+ flexDirection : 'row' ,
127+ alignItems : 'center' ,
128+ marginBottom : 12 ,
129+ } }
130+ >
131+ < Ionicons
132+ name = "calendar-outline"
133+ size = { 24 }
134+ color = "#1D0F48"
135+ style = { { marginRight : 8 } }
136+ />
137+ < Text style = { styles . sectionLabel } > Date:</ Text >
138+ < Text style = { [ styles . dateValue , { marginLeft : 8 } ] } >
139+ { dateFormatted }
140+ </ Text >
141+ </ View >
142+ < View style = { { flexDirection : 'row' , alignItems : 'center' } } >
143+ < Ionicons
144+ name = "time-outline"
145+ size = { 24 }
146+ color = "#1D0F48"
147+ style = { { marginRight : 8 } }
148+ />
149+ < Text style = { [ styles . sectionLabel ] } > Time:</ Text >
150+ < Text style = { [ styles . dateValue , { marginLeft : 8 } ] } >
151+ { timeFormatted }
152+ </ Text >
153+ </ View >
121154 </ View >
122- </ View >
123- < Pressable
124- style = { [ styles . confirmButton , submitting && styles . confirmButtonDisabled ] }
125- onPress = { handleConfirm }
126- disabled = { submitting }
127- >
128- { submitting ? (
129- < ActivityIndicator color = "#1D0F48" />
130- ) : (
131- < Text style = { styles . confirmButtonText } > Confirm</ Text >
132- ) }
133- </ Pressable >
134- </ ScrollView >
135- </ SafeAreaView >
155+ < Pressable
156+ style = { [
157+ styles . confirmButton ,
158+ submitting && styles . confirmButtonDisabled ,
159+ ] }
160+ onPress = { handleConfirm }
161+ disabled = { submitting }
162+ >
163+ { submitting ? (
164+ < ActivityIndicator color = "#1D0F48" />
165+ ) : (
166+ < Text style = { styles . confirmButtonText } > Confirm</ Text >
167+ ) }
168+ </ Pressable >
169+ </ ScrollView >
170+ </ SafeAreaView >
136171 </ ImageBackground >
137172 </ >
138173 ) ;
@@ -165,7 +200,7 @@ const styles = StyleSheet.create({
165200 color : '#1D0F48' ,
166201 paddingHorizontal : 39 ,
167202 marginBottom : 59 ,
168- marginTop : 36.5
203+ marginTop : 36.5 ,
169204 } ,
170205 dateSection : {
171206 paddingHorizontal : 39 ,
@@ -183,7 +218,7 @@ const styles = StyleSheet.create({
183218 fontSize : 24 ,
184219 fontWeight : '400' ,
185220 color : '#1D0F48' ,
186- marginBottom : 8
221+ marginBottom : 8 ,
187222 } ,
188223 confirmButton : {
189224 backgroundColor : '#74C0EB' ,
0 commit comments