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
@@ -21,76 +21,79 @@ export default function SignInScreen() {
2121 } ;
2222
2323 return (
24- < TouchableWithoutFeedback onPress = { Keyboard . dismiss } accessible = { false } >
25- < View style = { [ styles . container , { backgroundColor : colors . background } ] } >
26- < View style = { styles . logoContainer } >
27- < Image
28- source = { require ( '../../assets/images/icon.png' ) }
29- style = { styles . logo }
30- resizeMode = "contain"
31- />
32- </ View >
33-
34- < View style = { [ styles . card , { backgroundColor : colors . card } ] } >
35- < Text style = { [ styles . title , { color : colors . text } ] } > Welcome Back</ Text >
36- < Text style = { [ styles . subtitle , { color : colors . textSecondary } ] } >
37- Sign in to your account
38- </ 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 >
3943
40- { error ? (
41- < Text style = { [ styles . error , { color : colors . error } ] } > { error } </ Text >
42- ) : null }
44+ { error ? (
45+ < Text style = { [ styles . error , { color : colors . error } ] } > { error } </ Text >
46+ ) : null }
4347
44- < TextInput
45- style = { [ styles . input , {
46- backgroundColor : colors . background ,
47- borderColor : colors . border ,
48- color : colors . text
49- } ] }
50- placeholder = "Email"
51- placeholderTextColor = { colors . textSecondary }
52- value = { email }
53- onChangeText = { setEmail }
54- autoCapitalize = "none"
55- keyboardType = "email-address"
56- />
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+ />
5761
58- < TextInput
59- style = { [ styles . input , {
60- backgroundColor : colors . background ,
61- borderColor : colors . border ,
62- color : colors . text
63- } ] }
64- placeholder = "Password"
65- placeholderTextColor = { colors . textSecondary }
66- value = { password }
67- onChangeText = { setPassword }
68- secureTextEntry
69- />
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+ />
7074
71- < TouchableOpacity
72- style = { [ styles . button , { backgroundColor : colors . primary } ] }
73- onPress = { handleSignIn } >
74- < Text style = { [ styles . buttonText , { color : colors . card } ] } > Sign In</ Text >
75- </ 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 >
7680
77- < View style = { styles . footer } >
78- < Text style = { [ styles . footerText , { color : colors . textSecondary } ] } >
79- Don't have an account?{ ' ' }
80- </ Text >
81- < Link href = "/sign-up" style = { [ styles . link , { color : colors . primary } ] } >
82- Sign Up
83- </ Link >
84- </ 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 >
8588 </ View >
8689 </ View >
87- </ TouchableWithoutFeedback >
90+ </ ScrollView >
8891 ) ;
8992}
9093
9194const styles = StyleSheet . create ( {
9295 container : {
93- flex : 1 ,
96+ flexGrow : 1 ,
9497 justifyContent : 'center' ,
9598 padding : 20 ,
9699 } ,
0 commit comments