Upload files to ''

Home_page.js

@@ -0,0 +1,98 @@
+
+import React, {useState, useEffect} from 'react'
+import { Button, Text, View, StyleSheet} from 'react-native'
+import {FlatList, ListViewBase } from 'react-native'
+import {TouchableOpacity} from 'react-native-gesture-handler'
+import {List, Divider} from 'react-native-paper'
+import Loading from '../components/Loading'
+import firebase from 'firebase';
+
+
+export default function Home_page({navigation}) {
+  const [threads, setThreads] = useState([]);  
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+
+    const fire = firebase.firestore()
+    .collection('THREADS')
+    
+    .onSnapshot(querySnapshot => {
+      const threads = querySnapshot.docs.map(documentSnapshot => {
+        return{
+          _id:documentSnapshot.id,
+          name:'',
+          ...documentSnapshot.data()
+        };
+
+      });
+
+      setThreads(threads);
+
+      if(loading){
+        setLoading(false);
+      }
+
+    });
+
+    return () => fire();
+  }, []);
+  
+  if (loading) {
+    return <Loading />;
+  }
+  
+  return (
+      <View style={styles.container}>
+        <FlatList
+          data={threads}
+          keyExtractor = {item => item._id}
+          ItemSeparatorComponent={() => <Divider />}
+          renderItem = {({item}) => (
+
+            <TouchableOpacity
+            onPress={() => navigation.navigate('Room', {thread: item})}
+            
+            >
+            <List.Item
+              title={item.name}
+              description='Item description'
+              titleNumberOfLines={1}
+              titleStyle={styles.listTitle}
+              descriptionStyle={styles.listDescription}
+              descriptionNumberOfLines={1}
+            />
+          </TouchableOpacity>
+        )}
+      />
+
+      <Button
+        title='Add Room'
+        onPress={() => navigation.navigate('Add')}
+      />
+
+        <Button
+        title ='Room'
+        onPress= {() => navigation.navigate('Room')}
+        />
+
+      </View>
+    );
+  }
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: '#f5f5f5',
+      flex: 1
+    },
+    listTitle: {
+      fontSize: 22
+    },
+    listDescription: {
+      fontSize: 16
+    }
+  });
+
+
+
+
+