Implemented flatlist

app/screens/list.tsx

 
 import { addDoc, collection, onSnapshot } from 'firebase/firestore';
 import React, { useEffect, useState } from 'react';
-import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
+import { View, Text, Button, TextInput, StyleSheet, FlatList } from 'react-native';
 import { FIRESTORE_DB } from '../../firebaseConfig';
 
+export interface Todo {
+    title: string;
+    done: boolean;
+    id: string;
+}
 const List = ({navigation} : any) => {
-const[todos, setTodos] = useState<any[]>([]);
+const[todos, setTodos] = useState<Todo[]>([]);
 const[todo, setTodo] = useState('');
 useEffect(() => {
     const todoRef = collection(FIRESTORE_DB, 'todos');
@@ -13,14 +18,13 @@ useEffect(() => {
     const subscribe = onSnapshot(todoRef, {
         next: (snapshot) => {
              console.log('UPDATED');
-            const todos: any[]= [];
+            const todos: Todo[]= [];
             snapshot.docs.forEach((doc) => {
 
-
                     todos.push({
                         id: doc.id,
                         ...doc.data()
-                    })
+                    } as Todo)
             })
             setTodos(todos);
         },
@@ -37,6 +41,11 @@ const addTodo = async () => {
     setTodo('');
 };
 
+const renderTodo = ({item}: any) => {
+    return(
+        <Text> {item.title}</Text>
+    )
+}
 return (
 <View style ={styles.container}>
   <View style={styles.form}>
@@ -45,6 +54,15 @@ return (
           value={todo}/>
     <Button onPress={addTodo} title="Add Todo"disabled={todo === ''}/>
   </View>
+  {todos.length > 0 && (
+    <View>
+        <FlatList
+        data={todos}
+        renderItem={renderTodo}
+        keyExtractor={(todo: Todo) => todo.id}
+        />
+    </View>
+  )}
   <View>
     {todos.map((todo) => (
   <Text key={todo.id}>{todo.title}</Text>