Simple Todo App - Draftbit Typing CST Test

Simple Todo App — Draftbit Code

Demonstrates a simple Draftbit app with a Todo list, adding tasks, and displaying them using visual components and optional custom React Native code.

// Visual components setup in Draftbit
// Example of custom React Native code for adding a todo
import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';

export default function TodoApp() {
	const [todos, setTodos] = useState([]);
	const [input, setInput] = useState('');

	const addTodo = () => {
		if(input.trim()){
		setTodos([...todos, input.trim()]);
		setInput('');
		}
	};

	return (
		<View style={{ padding: 20 }}>
		<TextInput value={input} onChangeText={setInput} placeholder='New Todo' />
		<Button title='Add' onPress={addTodo} />
		<FlatList data={todos} keyExtractor={(item, index) => index.toString()} renderItem={({item}) => <Text>{item}</Text>} />
		</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