Added functionaility to delete button and mark as done

app/screens/list.tsx

 
-import { addDoc, collection, onSnapshot } from 'firebase/firestore';
+import { addDoc, collection, deleteDoc, doc, onSnapshot, updateDoc } from 'firebase/firestore';
 import React, { useEffect, useState } from 'react';
 import { View, Text, Button, TextInput, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
 import { FIRESTORE_DB } from '../../firebaseConfig';
@@ -43,21 +43,24 @@ const addTodo = async () => {
 };
 
 const renderTodo = ({item} : any) => {
-    const toggleDone= async()=>{
 
+    const ref = doc(FIRESTORE_DB, `todos/${item.id}`)
+    const toggleDone= async()=>{
+        updateDoc(ref, {done: !item.done});
     }
 
     const deleteItem = async() =>{
-
+        deleteDoc(ref);
     }
     return(
         <View>
             <TouchableOpacity onPress={toggleDone} style={styles.todo}>
-                {item.done && <Ionicons name="checkmark-circle"  />}
+                {item.done && <Ionicons name="checkmark-circle" size={32} color="green" />}
                  {!item.done && <Entypo name="circle" size={24} color="black"/>}
                 <Text style={styles.todoText}> {item.title}</Text>
-            </TouchableOpacity>
+            
             <Ionicons name="trash-bin-outline" size={24} color="red" onPress={deleteItem}/>
+            </TouchableOpacity>
         </View>
     );
 };
@@ -78,11 +81,7 @@ return (
         />
     </View>
   )}
-  <View>
-    {todos.map((todo) => (
-  <Text key={todo.id}>{todo.title}</Text>
-))}
-  </View>
+
 </View>
 );
 }
@@ -108,6 +107,7 @@ const styles = StyleSheet.create ({
 
     todoContainer: {
         flexDirection: 'row',
+        justifyContent: 'space-between',
         alignItems: 'center',
         backgroundColor: '#fff',
         padding: 10,
@@ -115,9 +115,10 @@ const styles = StyleSheet.create ({
     },
     todoText: {
         flex: 1,
-
+        paddingHorizontal: 4,
     },
     todo: {
+     flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
     }