Added input text box and added some styling

app/screens/list.tsx

 
 import { addDoc, collection } from 'firebase/firestore';
-import React, { useEffect } from 'react';
-import { View, Text, Button } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
 import { FIRESTORE_DB } from '../../firebaseConfig';
 
 const List = ({navigation} : any) => {
+const[todos, setTodos] = useState<any[]>([]);
+const[todo, setTodo] = useState('');
 useEffect(() => {}, []);
 
 const addTodo = async () => {
   console.log('ADD');
   
-  const doc = addDoc(collection(FIRESTORE_DB, 'todos'), { title: 'I am a test', done: false });
+  const doc = await addDoc(collection(FIRESTORE_DB, 'todos'), { title: 'I am a test', done: false });
   console.log('📝 ~ file: List.tsx:12 ~ addTodo ~ doc:', doc);
 };
 
 return (
-  <View>
-    <Button onPress={() => addTodo()} title="Add Todo" />
+<View style ={styles.container}>
+  <View style={styles.form}>
+    <TextInput style={styles.input} placeholder="Add new todo" 
+          onChangeText={(text: string) => setTodo(text)} 
+          value={todo}/>
+    <Button onPress={addTodo} title="Add Todo"disabled={todo === ''}/>
+  </View>
 </View>
 );
 }
 export default List;
+
+const styles = StyleSheet.create ({
+    container: {
+        marginHorizontal: 20,
+    },
+    form: {
+        marginVertical: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    input: {
+        flex: 1,
+        height: 40,
+        borderWidth: 1,
+        borderRadius: 1,
+        padding: 10,
+        backgroundColor: '#fff',
+    }
+});
\ No newline at end of file