Notes App - Draftbit Typing CST Test

Notes App — Draftbit Code

A simple note-taking app using Draftbit visual input components and local state to store text notes.

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

export default function NotesApp() {
	const [note, setNote] = useState('');
	const [notes, setNotes] = useState([]);

	const addNote = () => {
		if(note.trim()){
		setNotes([...notes, note]);
		setNote('');
		}
	};

	return (
		<View style={{ padding: 20 }}>
		<TextInput placeholder='Write a note...' value={note} onChangeText={setNote} />
		<Button title='Add Note' onPress={addNote} />
		<ScrollView>{notes.map((n, i) => <Text key={i}>{n}</Text>)}</ScrollView>
		</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