Untitled

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet, ImageBackground, Alert } from 'react-native';

const LoginScreen = () => {
  const [email, setEmail] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [clear, setClear] = useState('');

  const handleLogin = () => {

    if (!email || !username || password.length < 6) {
      setError('Please fill in all fields correctly.');
    } else {
      setError('Login Successfully');
      console.log("Email: ", email);
      console.log("Username: ", username);
      console.log("Password: ", password);
    }
  };
  const handleClear = () => {
    // Clear the input fields and reset the error message
    setEmail('');
    setUsername('');
    setPassword('');
    setError('');
  };

  return (
    <ImageBackground
    source={require('./assets/nature.png')} 
      style={styles.background}
    >
      <View style={styles.container}>
        <Text style={styles.title}>HELLO!</Text>
        
        <TextInput
          style={styles.input}
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
        />
        <TextInput
          style={styles.input}
          placeholder="Username"
          value={username}
          onChangeText={setUsername}
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
        />
        
        {error ? <Text style={styles.error}>{error}</Text> : null}
        <View style={styles.buttonRow}>
          <View style={styles.button}>
        <Button title="SAVE" onPress={handleLogin} />
        </View>
        <View style={styles.button}></View>
        <Button title="CLEAR" onPress={handleClear} />
        </View>
        </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    width: '90%',
    backgroundColor: 'rgba(211, 211, 211, 0.1)', 
    borderRadius: 10,
    padding: 20,
    elevation: 6,

  },
  title: {
    fontSize: 24,
    marginBottom: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  input: {
    height: 50,
    borderColor: 'gray',
    borderWidth: 2,
    marginBottom: 10,
    paddingHorizontal: 10,
    borderRadius: 5,
  },
  error: {
    backgroundColor: 'gray',
    color: 'black',
    marginBottom: 10,
    textAlign: 'center'
  },
  buttonRow: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginTop: 10,
  },
  button: {
    width: '20%',
  },
  });

export default LoginScreen;