import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
export default function LoginScreen() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = () => {
console.log(`Login pressed with email: ${email} and password: ${password}`);
};
const handleGoogleSignIn = () => {
console.log('Google Sign-In pressed');
};
const handleAppleSignIn = () => {
console.log('Apple Sign-In pressed');
};
return (
<View style={styles.container}>
<Text style={styles.label}>Email:</Text>
<TextInput
style={styles.input}
keyboardType="email-address"
autoCapitalize="none"
value={email}
onChangeText={setEmail}
accessibilityLabel="Email input"
/>
<Text style={styles.label}>Password:</Text>
<TextInput
style={styles.input}
secureTextEntry
value={password}
onChangeText={setPassword}
accessibilityLabel="Password input"
/>
<View style={styles.button}>
<Button title="Login" onPress={handleLogin} accessibilityLabel="Login button" />
</View>
<Text style={styles.separator}>--- OR ---</Text>
<View style={styles.button}>
<Button title="Sign in with Google" onPress={handleGoogleSignIn} accessibilityLabel="Sign in with Google button" />
</View>
<View style={styles.button}>
<Button title="Sign in with Apple" onPress={handleAppleSignIn} accessibilityLabel="Sign in with Apple button" />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: 'center',
backgroundColor: '#fff'
},
label: {
fontSize: 16,
marginBottom: 4
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 8,
marginBottom: 12,
borderRadius: 4
},
separator: {
textAlign: 'center',
marginVertical: 12,
color: '#666'
},
button: {
marginVertical: 6
}
});This solution uses React Native functional components with hooks to manage email and password state.
We added three button handlers: one for login that prints the entered email and password, and two others for Google and Apple sign-in that print messages to the console.
The UI includes labeled TextInput fields for email and password with accessibility labels for screen readers.
Buttons are spaced with margin for clarity, and a separator text "--- OR ---" visually divides the login methods.
This simple setup helps beginners understand how to handle user input and button presses in React Native.
