Simple Todo App - Nativebase Typing CST Test

Simple Todo App — Nativebase Code

Demonstrates a simple React Native app using NativeBase components with a Todo list, adding tasks, and displaying them with consistent UI.

import React, { useState } from 'react';
import { NativeBaseProvider, Box, Input, Button, VStack, Text } from 'native-base';

export default function App() {
	const [todos, setTodos] = useState([]);
	const [newTodo, setNewTodo] = useState('');

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

	return (
		<NativeBaseProvider>
		<Box safeArea p={4}>
		<VStack space={4}>
		<Input placeholder="New Todo" value={newTodo} onChangeText={setNewTodo} />
		<Button onPress={addTodo}>Add</Button>
		{todos.map((todo, index) => (
		<Text key={index}>{todo}</Text>
		))}
		</VStack>
		</Box>
		</NativeBaseProvider>
	);
}

Nativebase Language Guide

NativeBase is an open-source UI component library for React Native, providing a set of cross-platform, customizable components that accelerate mobile app development with consistent design.

More Nativebase Typing Exercises

Practice Other Languages