ADD/VIEW/DELETE TASKS

App.js

@@ -4,6 +4,7 @@ import Header from "./components/Header";
 import Login from "./components/screens/Login";
 import Signup from "./components/screens/Signup";
 import Home from "./components/screens/Home";
+import Task from "./components/screens/Task";
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 const Stack = createNativeStackNavigator();
@@ -23,6 +24,11 @@ export default function App() {
           component={Home}
           options={{ title: 'Welcome' }}
         />
+        <Stack.Screen
+          name="Task"
+          component={Task}
+          options={{ title: 'Your Tasks' }}
+        />
 
       </Stack.Navigator>
     </View>

components/addtodo.js

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { StyleSheet, View, TextInput, Button } from 'react-native';
+
+export default function AddTodo({ submitHandler }) {
+  [text, setText] = useState('');
+
+  const changeHandler = (val) => {
+    setText(val);
+  };
+
+  return (
+    <View>
+      <TextInput 
+        style={styles.input} 
+        placeholder='new task...'
+        onChangeText={changeHandler} 
+        value={text} 
+      />
+      <Button color='red' onPress={() => submitHandler(text)} title='add task' />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    marginBottom: 10,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+  },
+});

components/screens/Home.js

@@ -1,34 +1,25 @@
 import React, { useEffect, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
-function Home() {
-  const [tasks, setTasks] = useState([
-    {
-      taskTitle: "Task#1",
-    },
-    {
-      taskTitle: "Task#2",
-    },
-  ]);
-  useEffect(() => {}, []);
+import { StyleSheet, Text, View,TouchableOpacity } from "react-native";
+import Task from "./Task";
+function Home({ navigation }) {
   return (
-    <View>
-      <Text style={styles.welcome}>Hello, Your tasks of the day !</Text>
-      <View style={styles.taskContainer}>
-        {tasks.map((item, index) => {
-          return <Task key={index} taskTitle={item.taskTitle} />;
-        })}
+    <View style={{flex:1,justifyContent:'flex-start',alignItems:'center'}}>
+      <TouchableOpacity
+              onPress={() => {
+                navigation.navigate("Task");
+              }}
+            >
+              <Text style={{ color: "green", marginTop: 6, fontSize:20,fontWeight:'bold' }}>
+                Click to Open Tasks!
+              </Text>
+            </TouchableOpacity>
+
       </View>
-    </View>
+
   );
 }
 
-const Task = ({ taskTitle }) => {
-  return (
-    <View style={styles.task}>
-      <Text>{taskTitle}</Text>
-    </View>
-  );
-};
+
 const styles = StyleSheet.create({
   welcome: {
     padding: 10,
@@ -41,7 +32,7 @@ const styles = StyleSheet.create({
   task: {
     marginVertical: 4,
     padding: 10,
-    borderColor: "black",
+    borderColor: "yellow",
     borderWidth: 1,
     borderRadius: 2,
     elevation: 2,

components/screens/Task.js

@@ -1,12 +1,70 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import { StyleSheet, Text, View, FlatList, Alert,TouchableWithoutFeedback, Keyboard } from 'react-native';
+import TodoItem from '../todoitem';
+import AddTodo from '../addtodo';
+import { useState } from 'react';
 
 const Task = () => {
+  const [todos, setTodos] = useState([
+    { text: 'buy coffee', key: '1' },
+    { text: 'create an app', key: '2' },
+    { text: 'play on the switch', key: '3' }
+  ]);
+  const pressHandler = (key) => {
+    setTodos(prevTodos => {
+      return prevTodos.filter(todo => todo.key != key);
+    });
+  };
+  const submitHandler = (text) => {
+    if(text.length > 3){
+      setText('');
+      setTodos(prevTodos => {
+        return [
+          { text, key: Math.random().toString() },
+          ...prevTodos
+        ];
+      });
+    } else {
+      Alert.alert('OOPS', 'Todo must be over 3 characters long', [
+        {text: 'Understood', onPress: () => console.log('alert closed') }
+      ]);
+    }
+  };
   return (
-    <View>
-      <Text>Task</Text>
-    </View>
-  )
+    <TouchableWithoutFeedback onPress={() => {
+      Keyboard.dismiss();
+      console.log('dismissed');
+    }}>
+      <View style={styles.container}>
+        <View style={styles.content}>
+          <AddTodo submitHandler={submitHandler} />
+          <View style={styles.list}>
+            <FlatList
+              data={todos}
+              renderItem={({ item }) => (
+                <TodoItem item={item} pressHandler={pressHandler} />
+              )}
+            />
+          </View>
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  );
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#2f4f4f',
+  },
+  content: {
+    flex: 1,
+    padding: 40,
+  },
+  list: {
+    flex: 1,
+    marginTop: 20,
+  },
+});
+
+
 export default Task

components/todoitem.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, Text} from 'react-native';
+
+export default function TodoItem({ pressHandler, item }) {
+  return (
+    <TouchableOpacity onPress={() => pressHandler(item.key)}>
+      <Text style={styles.item}>{item.text}   (Click to delete)</Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 16,
+    marginTop: 16,
+    borderColor: '#bbb',
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderRadius: 1,
+    borderRadius: 10,
+    backgroundColor: '#696969',
+  }
+});