Check mark displayed

app/screens/list.tsx

 
 import { addDoc, collection, onSnapshot } from 'firebase/firestore';
 import React, { useEffect, useState } from 'react';
-import { View, Text, Button, TextInput, StyleSheet, FlatList } from 'react-native';
+import { View, Text, Button, TextInput, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
 import { FIRESTORE_DB } from '../../firebaseConfig';
+import Ionicons from '@expo/vector-icons/Ionicons';
 
 export interface Todo {
     title: string;
@@ -41,11 +42,23 @@ const addTodo = async () => {
     setTodo('');
 };
 
-const renderTodo = ({item}: any) => {
+const renderTodo = ({item} : any) => {
+    const toggleDone= async()=>{
+
+    }
+
+    const deleteItem = async() =>{
+
+    }
     return(
-        <Text> {item.title}</Text>
-    )
-}
+        <View>
+            <TouchableOpacity onPress={toggleDone}>
+                {!item.done && <Ionicons name="checkmark-circle"  />}
+                <Text> {item.title}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+};
 return (
 <View style ={styles.container}>
   <View style={styles.form}>
@@ -58,7 +71,7 @@ return (
     <View>
         <FlatList
         data={todos}
-        renderItem={renderTodo}
+        renderItem={(item) => renderTodo(item)}
         keyExtractor={(todo: Todo) => todo.id}
         />
     </View>