11import { useState } from 'react' ;
2- import { View , Text , TextInput , TouchableOpacity , StyleSheet , Image , Keyboard , TouchableWithoutFeedback } from 'react-native' ;
3- import { Link , router } from 'expo-router' ;
2+ import { View , Text , TextInput , TouchableOpacity , StyleSheet , Image , ScrollView , Platform } from 'react-native' ;
3+ import { router } from 'expo-router' ;
44import { useAuth } from '../../lib/auth' ;
55import { useTheme } from '../../lib/theme' ;
66
77export default function SignInScreen ( ) {
8- console . log ( 'SignInScreen rendered' ) ;
98 const [ email , setEmail ] = useState ( '' ) ;
109 const [ password , setPassword ] = useState ( '' ) ;
1110 const [ error , setError ] = useState ( '' ) ;
@@ -22,76 +21,79 @@ export default function SignInScreen() {
2221 } ;
2322
2423 return (
25- < TouchableWithoutFeedback onPress = { Keyboard . dismiss } accessible = { false } >
26- < View style = { [ styles . container , { backgroundColor : colors . background } ] } >
27- < View style = { styles . logoContainer } >
28- < Image
29- source = { require ( '../../assets/images/icon.png' ) }
30- style = { styles . logo }
31- resizeMode = "contain"
32- />
33- </ View >
34-
35- < View style = { [ styles . card , { backgroundColor : colors . card } ] } >
36- < Text style = { [ styles . title , { color : colors . text } ] } > Welcome Back</ Text >
37- < Text style = { [ styles . subtitle , { color : colors . textSecondary } ] } >
38- Sign in to your account
39- </ Text >
24+ < ScrollView
25+ style = { { backgroundColor : colors . background } }
26+ contentContainerStyle = { styles . container }
27+ keyboardShouldPersistTaps = "handled"
28+ showsVerticalScrollIndicator = { false }
29+ >
30+ < View style = { styles . logoContainer } >
31+ < Image
32+ source = { require ( '../../assets/images/icon.png' ) }
33+ style = { styles . logo }
34+ resizeMode = "contain"
35+ />
36+ </ View >
37+
38+ < View style = { [ styles . card , { backgroundColor : colors . card } ] } >
39+ < Text style = { [ styles . title , { color : colors . text } ] } > Welcome Back</ Text >
40+ < Text style = { [ styles . subtitle , { color : colors . textSecondary } ] } >
41+ Sign in to your account
42+ </ Text >
4043
41- { error ? (
42- < Text style = { [ styles . error , { color : colors . error } ] } > { error } </ Text >
43- ) : null }
44+ { error ? (
45+ < Text style = { [ styles . error , { color : colors . error } ] } > { error } </ Text >
46+ ) : null }
4447
45- < TextInput
46- style = { [ styles . input , {
47- backgroundColor : colors . background ,
48- borderColor : colors . border ,
49- color : colors . text
50- } ] }
51- placeholder = "Email"
52- placeholderTextColor = { colors . textSecondary }
53- value = { email }
54- onChangeText = { setEmail }
55- autoCapitalize = "none"
56- keyboardType = "email-address"
57- />
48+ < TextInput
49+ style = { [ styles . input , {
50+ backgroundColor : colors . background ,
51+ borderColor : colors . border ,
52+ color : colors . text
53+ } ] }
54+ placeholder = "Email"
55+ placeholderTextColor = { colors . textSecondary }
56+ value = { email }
57+ onChangeText = { setEmail }
58+ autoCapitalize = "none"
59+ keyboardType = "email-address"
60+ />
5861
59- < TextInput
60- style = { [ styles . input , {
61- backgroundColor : colors . background ,
62- borderColor : colors . border ,
63- color : colors . text
64- } ] }
65- placeholder = "Password"
66- placeholderTextColor = { colors . textSecondary }
67- value = { password }
68- onChangeText = { setPassword }
69- secureTextEntry
70- />
62+ < TextInput
63+ style = { [ styles . input , {
64+ backgroundColor : colors . background ,
65+ borderColor : colors . border ,
66+ color : colors . text
67+ } ] }
68+ placeholder = "Password"
69+ placeholderTextColor = { colors . textSecondary }
70+ value = { password }
71+ onChangeText = { setPassword }
72+ secureTextEntry
73+ />
7174
72- < TouchableOpacity
73- style = { [ styles . button , { backgroundColor : colors . primary } ] }
74- onPress = { handleSignIn } >
75- < Text style = { [ styles . buttonText , { color : colors . card } ] } > Sign In</ Text >
76- </ TouchableOpacity >
75+ < TouchableOpacity
76+ style = { [ styles . button , { backgroundColor : colors . primary } ] }
77+ onPress = { handleSignIn } >
78+ < Text style = { [ styles . buttonText , { color : colors . card } ] } > Sign In</ Text >
79+ </ TouchableOpacity >
7780
78- < View style = { styles . footer } >
79- < Text style = { [ styles . footerText , { color : colors . textSecondary } ] } >
80- Don't have an account?{ ' ' }
81- </ Text >
82- < Link href = "/sign-up" style = { [ styles . link , { color : colors . primary } ] } >
83- Sign Up
84- </ Link >
85- </ View >
81+ < View style = { styles . footer } >
82+ < Text style = { [ styles . footerText , { color : colors . textSecondary } ] } >
83+ Don't have an account?{ ' ' }
84+ </ Text >
85+ < TouchableOpacity onPress = { ( ) => router . push ( '/sign-up' ) } >
86+ < Text style = { [ styles . link , { color : colors . primary } ] } > Sign Up</ Text >
87+ </ TouchableOpacity >
8688 </ View >
8789 </ View >
88- </ TouchableWithoutFeedback >
90+ </ ScrollView >
8991 ) ;
9092}
9193
9294const styles = StyleSheet . create ( {
9395 container : {
94- flex : 1 ,
96+ flexGrow : 1 ,
9597 justifyContent : 'center' ,
9698 padding : 20 ,
9799 } ,
0 commit comments