Todos are now dispkayed in a list on the screen

app/screens/list.tsx

 
-import { addDoc, collection } from 'firebase/firestore';
+import { addDoc, collection, onSnapshot } from 'firebase/firestore';
 import React, { useEffect, useState } from 'react';
 import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
 import { FIRESTORE_DB } from '../../firebaseConfig';
@@ -7,7 +7,27 @@ import { FIRESTORE_DB } from '../../firebaseConfig';
 const List = ({navigation} : any) => {
 const[todos, setTodos] = useState<any[]>([]);
 const[todo, setTodo] = useState('');
-useEffect(() => {}, []);
+useEffect(() => {
+    const todoRef = collection(FIRESTORE_DB, 'todos');
+
+    const subscribe = onSnapshot(todoRef, {
+        next: (snapshot) => {
+             console.log('UPDATED');
+            const todos: any[]= [];
+            snapshot.docs.forEach((doc) => {
+                   
+
+                    todos.push({
+                        id: doc.id,
+                        ...doc.data()
+                    })
+            })
+            setTodos(todos);
+        },
+})
+
+return () => subscribe();
+}, []);
 
 const addTodo = async () => {
   console.log('ADD');
@@ -25,6 +45,11 @@ return (
           value={todo}/>
     <Button onPress={addTodo} title="Add Todo"disabled={todo === ''}/>
   </View>
+  <View>
+    {todos.map((todo) => (
+  <Text key={todo.id}>{todo.title}</Text>
+))}
+  </View>
 </View>
 );
 }
@@ -43,7 +68,7 @@ const styles = StyleSheet.create ({
         flex: 1,
         height: 40,
         borderWidth: 1,
-        borderRadius: 1,
+        borderRadius: 4,
         padding: 10,
         backgroundColor: '#fff',
     }