Simple Login Screen - Draftbit Typing CST Test

Simple Login Screen — Draftbit Code

Implements a simple login form UI using Draftbit visual inputs and a basic state check.

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

export default function LoginScreen() {
	const [email, setEmail] = useState('');
	const [password, setPassword] = useState('');

	const handleLogin = () => {
		if(email && password){
		Alert.alert('Login Successful', email);
		}else{
		Alert.alert('Please fill all fields');
		}
	};

	return (
		<View style={{ padding: 20 }}>
		<TextInput placeholder='Email' value={email} onChangeText={setEmail} />
		<TextInput placeholder='Password' value={password} secureTextEntry onChangeText={setPassword} />
		<Button title='Login' onPress={handleLogin} />
		</View>
	);
}

Draftbit Language Guide

Draftbit is a no-code and low-code visual builder for creating React Native mobile apps. It allows designers, founders, and developers to visually build screens, components, and navigation flows, while exporting clean React Native code.

More Draftbit Typing Exercises

Practice Other Languages