Kaynağa Gözat

Merge branch 'master' into devErnesto

ErnestoOrtiz2 3 yıl önce
ebeveyn
işleme
dc4af06c0f
3 değiştirilmiş dosya ile 111 ekleme ve 1 silme
  1. 88
    0
      Home_page.js
  2. 18
    0
      Loading.js
  3. 5
    1
      README.md

+ 88
- 0
Home_page.js Dosyayı Görüntüle

@@ -0,0 +1,88 @@
1
+
2
+import React, {useState, useEffect} from 'react'
3
+import { Button, Text, View, StyleSheet} from 'react-native'
4
+import {FlatList, ListViewBase } from 'react-native'
5
+import {TouchableOpacity} from 'react-native-gesture-handler'
6
+import {List, Divider} from 'react-native-paper'
7
+import Loading from '../components/Loading'
8
+import firebase from 'firebase';
9
+import { styles } from "../config/styles";
10
+import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground} from "react-native";
11
+
12
+export default function Home_page({navigation}) {
13
+  const [threads, setThreads] = useState([]);  
14
+  const [loading, setLoading] = useState(true);
15
+
16
+  useEffect(() => {
17
+
18
+    const fire = firebase.firestore()
19
+    .collection('THREADS')
20
+    
21
+    .onSnapshot(querySnapshot => {
22
+      const threads = querySnapshot.docs.map(documentSnapshot => {
23
+        return{
24
+          _id:documentSnapshot.id,
25
+          name:'',
26
+          ...documentSnapshot.data()
27
+        };
28
+
29
+      });
30
+
31
+      setThreads(threads);
32
+
33
+      if(loading){
34
+        setLoading(false);
35
+      }
36
+
37
+    });
38
+
39
+    return () => fire();
40
+  }, []);
41
+  
42
+  if (loading) {
43
+    return <Loading />;
44
+  }
45
+  
46
+  return (
47
+    <View>
48
+    <ImageBackground style={styles.stdcontainer} source={require('../assets/yellow-white.jpg')}>
49
+        <FlatList
50
+          data={threads}
51
+          keyExtractor = {item => item._id}
52
+          ItemSeparatorComponent={() => <Divider />}
53
+          renderItem = {({item}) => (
54
+
55
+            <TouchableOpacity
56
+            onPress={() => navigation.navigate('Room', {thread: item})}
57
+            
58
+            >
59
+            <List.Item
60
+              title={item.name}
61
+              description='Item description'
62
+              titleNumberOfLines={1}
63
+              titleStyle={styles.listTitle}
64
+              descriptionStyle={styles.listDescription}
65
+              descriptionNumberOfLines={1}
66
+            />
67
+          </TouchableOpacity>
68
+        )}
69
+      />
70
+
71
+      <Button
72
+        title='Ver mensajes'
73
+        onPress={() => navigation.navigate('Add')}
74
+      />
75
+
76
+        <Button
77
+        title ='Hacer Busqueda'
78
+        onPress= {() => navigation.navigate('Room')}
79
+        />
80
+        </ImageBackground>
81
+      </View>
82
+    );
83
+  }
84
+
85
+
86
+
87
+
88
+

+ 18
- 0
Loading.js Dosyayı Görüntüle

@@ -0,0 +1,18 @@
1
+import React from 'react';
2
+import { View, ActivityIndicator, StyleSheet } from 'react-native';
3
+
4
+export default function Loading() {
5
+  return (
6
+    <View style={styles.loadingContainer}>
7
+      <ActivityIndicator size='large' color='#6646ee' />
8
+    </View>
9
+  );
10
+}
11
+
12
+const styles = StyleSheet.create({
13
+  loadingContainer: {
14
+    flex: 1,
15
+    alignItems: 'center',
16
+    justifyContent: 'center'
17
+  }
18
+});

+ 5
- 1
README.md Dosyayı Görüntüle

@@ -1 +1,5 @@
1
-#Probando
1
+#Para poder correr el proyecto: 
2
+Instalar Nodejs, que incluye npm <br>
3
+npm install --global expo-cli<br>
4
+Instalar los paquetes que aparecen en package-lock.json usando<br>
5
+npm install nombreDelPaquete<br>