Adding task is in App.js now possible within App.js

App.js

-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState } from 'react';
+import { View, TextInput, Button, FlatList, Text, StyleSheet, TouchableOpacity } from 'react-native';
 
 export default function App() {
+  const [task, setTask] = useState('');
+  const [tasks, setTasks] = useState([]);
+
+  const addTask = () => {
+    if (task.trim()) {
+      setTasks([...tasks, { id: Date.now().toString(), text: task }]);
+      setTask('');
+    }
+  };
+
+  const removeTask = (id) => {
+    setTasks(tasks.filter((t) => t.id !== id));
+  };
+
   return (
     <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
+      <TextInput
+        style={styles.input}
+        placeholder="Enter a task"
+        value={task}
+        onChangeText={setTask}
+      />
+      <Button title="Add Task" onPress={addTask} />
+      <FlatList
+        data={tasks}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <TouchableOpacity onPress={() => removeTask(item.id)}>
+            <Text style={styles.task}>{item.text}</Text>
+          </TouchableOpacity>
+        )}
+      />
     </View>
   );
 }
@@ -13,8 +41,20 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingTop: 50,
+    paddingHorizontal: 20,
     backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+  },
+  input: {
+    borderBottomWidth: 1,
+    marginBottom: 10,
+    padding: 8,
+  },
+  task: {
+    fontSize: 18,
+    padding: 10,
+    backgroundColor: '#eee',
+    marginVertical: 5,
+    borderRadius: 5,
   },
 });