Two buttons have been added to the application. One to edit a task, and...

Two buttons have been added to the application. One to edit a task, and another to delete a task. No backend (firebase) yet.

App.js

@@ -4,16 +4,36 @@ import { View, TextInput, Button, FlatList, Text, StyleSheet, TouchableOpacity }
 export default function App() {
   const [task, setTask] = useState('');
   const [tasks, setTasks] = useState([]);
+  const [editingId, setEditingId] = useState(null);
 
-  const addTask = () => {
+  const addOrUpdateTask = () => {
     if (task.trim()) {
-      setTasks([...tasks, { id: Date.now().toString(), text: task }]);
+      if (editingId) {
+        // Update mode
+        setTasks(tasks.map(t => t.id === editingId ? { ...t, text: task } : t));
+        setEditingId(null);
+      } else {
+        // Add mode
+        setTasks([...tasks, { id: Date.now().toString(), text: task }]);
+      }
       setTask('');
     }
   };
 
   const removeTask = (id) => {
     setTasks(tasks.filter((t) => t.id !== id));
+    if (editingId === id) {
+      setTask('');
+      setEditingId(null);
+    }
+  };
+
+  const editTask = (id) => {
+    const taskToEdit = tasks.find(t => t.id === id);
+    if (taskToEdit) {
+      setTask(taskToEdit.text);
+      setEditingId(id);
+    }
   };
 
   return (
@@ -24,14 +44,22 @@ export default function App() {
         value={task}
         onChangeText={setTask}
       />
-      <Button title="Add Task" onPress={addTask} />
+      <Button title={editingId ? "Update Task" : "Add Task"} onPress={addOrUpdateTask} />
       <FlatList
         data={tasks}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
-          <TouchableOpacity onPress={() => removeTask(item.id)}>
+          <View style={styles.taskContainer}>
             <Text style={styles.task}>{item.text}</Text>
-          </TouchableOpacity>
+            <View style={styles.buttonRow}>
+              <TouchableOpacity onPress={() => editTask(item.id)} style={styles.editButton}>
+                <Text>Edit</Text>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => removeTask(item.id)} style={styles.deleteButton}>
+                <Text>Delete</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
         )}
       />
     </View>
@@ -50,11 +78,31 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     padding: 8,
   },
-  task: {
-    fontSize: 18,
-    padding: 10,
+  taskContainer: {
     backgroundColor: '#eee',
-    marginVertical: 5,
     borderRadius: 5,
+    padding: 10,
+    marginVertical: 5,
+  },
+  task: {
+    fontSize: 18,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 5,
+  },
+  editButton: {
+    marginRight: 10,
+    backgroundColor: '#d0e0ff',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 4,
+  },
+  deleteButton: {
+    backgroundColor: '#ffd0d0',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 4,
   },
 });

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "expo": "~53.0.8",
     "expo-status-bar": "~2.2.3",
+    "firebase": "^11.7.1",
     "react": "19.0.0",
     "react-native": "0.79.2"
   },