React Native Simple Todo App - React-native Typing CST Test

React Native Simple Todo App — React-native Code

Demonstrates a simple React Native app with a list of todos, adding and removing tasks, and state management using useState.

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

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

  const addTodo = () => {
    setTodos([...todos, { key: String(todos.length), title: text }]);
    setText('');
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput value={text} onChangeText={setText} placeholder='New Todo' />
      <Button title='Add' onPress={addTodo} />
      <FlatList data={todos} renderItem={({ item }) => <Text>{item.title}</Text>} />
    </View>
  );
}

React-native Language Guide

React Native is a popular open-source framework for building cross-platform mobile applications using JavaScript and React, allowing developers to write a single codebase for iOS and Android while delivering near-native performance.

Practice Other Languages