LoginScreen

LoginScreen is a ready-to-use authentication screen. It combines AuthLayout (the full-screen shell) with AuthForm (the controlled email/password form) and wires in client-side validation.

What it does

• Renders AuthLayout in login mode with a logo, title, and subtitle slot
• Renders AuthForm in mode="login" with email and password fields
• Validates on submit: empty fields and short passwords surface inline errors via emailError/passwordError props
• Provides a secondary link (“Don’t have an account? Sign up”) that switches to register mode

Location

src/screens/LoginScreen.tsx

Usage

LoginScreen is a complete screen — copy it into your project and wire onSuccess to your navigation or auth handler.

import { LoginScreen } from '@/screens/LoginScreen';

export default function AuthScreen() {
  return (
    <LoginScreen
      onSuccess={(email) => navigation.navigate('Home')}
    />
  );
}

Props

Prop	Type	Description
onSuccess	(email: string) => void	Called when the form passes validation
initialEmail	string	Pre-fill the email field

Validation rules

Field	Rule	Error message
Email	Must contain @	”Enter a valid email address”
Password	Must be ≥ 8 characters	”Password must be at least 8 characters”

Layers used

LoginScreen → AuthLayout (template) → AuthForm (organism) → FormField × 2 (molecule) → Input (atom)

Related

• AuthLayout — the full-screen shell
• AuthForm — the controlled form organism
• SettingsScreen — the other reference screen