Nuevos cambios

App.js

@@ -1,6 +1,5 @@
-import { StatusBar } from 'expo-status-bar';
-import React, {useState, useEffect} from 'react';
-import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
+import React, {useState, useEffect, Component} from 'react';
+import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable, Linking} from 'react-native';
 import DropDownPicker from 'react-native-dropdown-picker';
 import { Alert } from 'react-native';
 
@@ -99,7 +98,8 @@ function fetchData() {
 	var query = queryBase + "(" + table + ")&for=county:" + pueblo + queryEnd 
 	
 	if(pueblo && table)
-	{loadDoc(query)}
+	{loadDoc(query);
+	if(information == ""){Alert.alert("No data response found.")}}
 	else
 	{Alert.alert("Please fill every parameter before calling!")}
 	
@@ -114,7 +114,7 @@ const styles = StyleSheet.create({
 	  marginTop: 40,
 	  marginBottom: 30,
 	  margin: 30,
-	  borderColor: "grey",
+	  borderColor: "white",
 	  borderRadius: 8,
 	  padding: (30, 16),
 	  backgroundColor: "black",
@@ -122,11 +122,11 @@ const styles = StyleSheet.create({
   }, 
   buttonContainer: {
     flexDirection: 'column',
-    backgroundColor: '#f0f8ff',
+    backgroundColor: 'black',
     alignItems: 'center',
     justifyContent: 'center',
-	paddingTop:100,
-	marginTop: 20,
+	paddingTop:5,
+	marginTop: 30,
   },
   container: {
     flexDirection: 'column',
@@ -146,6 +146,11 @@ const styles = StyleSheet.create({
       color:"#black",
 	  fontSize: 30,
   },
+  intro2: {
+	fontWeight: "bold",
+	color:"#beb2c8",
+	fontSize: 20,
+},
 
   sub: {
 	color:"#black",  
@@ -159,6 +164,7 @@ const styles = StyleSheet.create({
 	  fontWeight: "bold",
 	  fontSize: 30,
 	  paddingBottom:10,
+	  alignItems: 'center',
   },
   scrollView:{
 	  marginHorizontal: 20
@@ -193,7 +199,12 @@ const handlePress = () => false
 //data parsing goes here
 function getInfo(){
 	//console.log(information[6])
-	return information
+	if(!information)
+	{Alert.alert("Please try again later! Error retriving data")}
+	else
+	{return information}
+
+	
 }
 
 //data display
@@ -363,6 +374,8 @@ function Picker() {
 	
 	</View>
   );
+
+  
 }
 
 
@@ -370,21 +383,39 @@ function Picker() {
 //actual application
 
 class App extends React.Component {
+	//Note: if prop-types could not be found within the project
+	//run on terminal "npm install --save proptypes"
+
+	// constructor(props) {
+	// 	super(props);
+	// 	this.setData = {
+	// 	  HeadTable: ['Head1', 'Head2', 'Head3', 'Head4', 'Head5'],
+	// 	  DataTable: [
+	// 		['1', '2', '3', '4', '5'],
+	// 		['a', 'b', 'c', 'd', 'e'],
+	// 		['1', '2', '3', '4', '5'],
+	// 		['a', 'b', 'c', 'd', 'e'],
+	// 		['1', '2', '3', '4', '5']
+	// 	  ]
+	// 	}
+	//   }
+	
 
-//the text at the end of a page gets cut off if anyone knows how to fix that?
-vars = {
+	//the text at the end of a page gets cut off if anyone knows how to fix that?
+	vars = {
 		welcome:
 
 		<View style = {styles.containerbackground}>
 		<ScrollView style={styles.scrollView}>
+			<View style = {styles.containerbackground}>
+		
 		  	<View style = {styles.container}>
 				<Text style={styles.intro}>Bienvenido!</Text>
 			</View>
 			<View style = {styles.container}>
-				<Text style={styles.sub}>Aquí podra mantenerse al tanto con las 
-					últimas noticias relacionadas al Censo y tener acceso a los  
-					los Demographic Data Profiles de cada municipio de
-					Puerto Rico.</Text>
+				<Text style={styles.sub}>Aqui podra mantenerse al tanto con las 
+					ultimas noticias relacionadas al censo y tambien verificar 
+					las tablas por municipio.</Text>
 		   </View>
 		  </ScrollView>
 		</View>,
@@ -399,7 +430,8 @@ vars = {
 			<Image source={require('./Logo.jpeg')} />
 			
 		 </View>
-		</ScrollView></View>,
+		</ScrollView>
+		</View>,
 		
 		dataOp:
 		<View style = {styles.containerbackground}>
@@ -415,6 +447,13 @@ vars = {
 			
 			<Text style={styles.sub}>blehhhhhh bleh bleh bleh bleh bleh blehhhhhhhhhhhhhhhhh </Text>
 			
+			<View style={styles.container}>
+      		{/* <Table borderStyle={{borderWidth: 1, borderColor: '#ffa1d2'}}>
+        	<Row data={state.HeadTable} style={styles.HeadStyle} textStyle={styles.TableText}/>
+        	<Rows data={state.DataTable} textStyle={styles.TableText}/>
+      	</Table> */}
+    </View>
+
 		 </View>
 		</ScrollView></View>
 		
@@ -442,24 +481,33 @@ setNews = () => this.setState({ current: this.vars.newsView })
 	  <View>
 		
 			<View style = {styles.containerbackground}>
+				<ScrollView style={styles.scrollView}>
 				<View style = {styles.buttonContainer}>
 					<Text style={styles.Navsub}> Demographic Data Viewer</Text>
-							<View style = {styles.buttons}>
+						<Text style={styles.sub}> Navegador</Text>
+							<Pressable style = {styles.buttons} onPress={this.setNews}>
+							
 			 		 			<Button
-								onPress = {this.setNews}
-				 				title = "Noticias"
+								title = "Noticias"
 				 				color = "white"
 			  					/>
-			  					<Button
-								 onPress = {this.setData}
-								 title = "Datos"
-								 color = "white"
+			  
+			  					
+							</Pressable>
+								
+							<Pressable style = {styles.buttons} onPress={this.setData}>
+							
+			 		 			<Button
+								title = "Datos"
+				 				color = "white"
 			  					/>
-							</View>
-						
+			  
+			  					
+							</Pressable>
 						
 		  				{this.state.current}
 					</View>
+					</ScrollView>
 			</View>
 		</View>
       );

package-lock.json

@@ -21,6 +21,7 @@
         "react-native": "0.70.5",
         "react-native-dropdown-picker": "^5.4.3",
         "react-native-element-dropdown": "^2.5.0",
+        "react-native-table-component": "^1.2.2",
         "react-native-web": "~0.18.9"
       },
       "devDependencies": {
@@ -15482,6 +15483,11 @@
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==",
       "license": "MIT"
     },
+    "node_modules/react-native-table-component": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-native-table-component/-/react-native-table-component-1.2.2.tgz",
+      "integrity": "sha512-7bbsi5431iWcjj3toASh8lFHGi6AG/+MTd4M7GuksXKxx/CFs/Qwv1Ys7D2wgyuYKe3hxWNfSVrteFj0tOYXYw=="
+    },
     "node_modules/react-native-web": {
       "version": "0.18.10",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.10.tgz",
@@ -31873,6 +31879,11 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
     },
+    "react-native-table-component": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-native-table-component/-/react-native-table-component-1.2.2.tgz",
+      "integrity": "sha512-7bbsi5431iWcjj3toASh8lFHGi6AG/+MTd4M7GuksXKxx/CFs/Qwv1Ys7D2wgyuYKe3hxWNfSVrteFj0tOYXYw=="
+    },
     "react-native-web": {
       "version": "0.18.10",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.10.tgz",

package.json

@@ -22,6 +22,7 @@
     "react-native": "0.70.5",
     "react-native-dropdown-picker": "^5.4.3",
     "react-native-element-dropdown": "^2.5.0",
+    "react-native-table-component": "^1.2.2",
     "react-native-web": "~0.18.9"
   },
   "devDependencies": {

yarn.lock

@@ -2799,13 +2799,6 @@
   "resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
   "version" "2.2.0"
 
-"bindings@^1.5.0":
-  "integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
-  "resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
-  "version" "1.5.0"
-  dependencies:
-    "file-uri-to-path" "1.0.0"
-
 "bl@^4.1.0":
   "integrity" "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="
   "resolved" "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz"
@@ -5401,19 +5394,6 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@^1.2.7":
-  "integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
-  "version" "1.2.13"
-  dependencies:
-    "bindings" "^1.5.0"
-    "nan" "^2.12.1"
-
-"fsevents@^2.1.2", "fsevents@~2.3.2":
-  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -7663,11 +7643,6 @@
     "object-assign" "^4.0.1"
     "thenify-all" "^1.0.0"
 
-"nan@^2.12.1":
-  "integrity" "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
-  "resolved" "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz"
-  "version" "2.17.0"
-
 "nanomatch@^1.2.9":
   "integrity" "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA=="
   "resolved" "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
@@ -9091,6 +9066,11 @@
   "resolved" "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz"
   "version" "0.70.3"
 
+"react-native-table-component@^1.2.2":
+  "integrity" "sha512-7bbsi5431iWcjj3toASh8lFHGi6AG/+MTd4M7GuksXKxx/CFs/Qwv1Ys7D2wgyuYKe3hxWNfSVrteFj0tOYXYw=="
+  "resolved" "https://registry.npmjs.org/react-native-table-component/-/react-native-table-component-1.2.2.tgz"
+  "version" "1.2.2"
+
 "react-native-web@~0.18.9":
   "integrity" "sha512-YV2gtZa1n7ulTGp+HcxH+KsAtaDPBI/dKd9oOQS31zyFHURjObLUVkKnGjkmlYAUReWfvmlU64GzyNwoZF9/tA=="
   "resolved" "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.10.tgz"