import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const navigation = useNavigation();
const handleLogin = () => {
console.log('Email:', email);
console.log('Password:', password);
navigation.goBack();
};
return (
<View style={styles.container}>
<Text style={styles.title}>Login</Text>
<TextInput
style={styles.input}
placeholder="Email"
onChangeText={text => setEmail(text)}
value={email}
/>
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry
onChangeText={text => setPassword(text)}
value={password}
/>
<TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
<Text style={styles.loginButtonText}>Login</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 20,
backgroundColor: 'black',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
color: 'white',
},
input: {
width: '100%',
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 5,
marginBottom: 10,
paddingHorizontal: 10,
color: 'white',
},
loginButton: {
width: '100%',
height: 40,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
marginTop: 20,
},
loginButtonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default Login;
NEW ENTRIES