Upload files to ''

App.js

@@ -1,8 +1,8 @@
-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 { parse } from 'json2csv';
+import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
 
 //import JSON;
 //import { Dataframe, readJSON } from "danfojs";
@@ -94,19 +94,20 @@ const styles = StyleSheet.create({
 	  marginTop: 40,
 	  marginBottom: 30,
 	  margin: 30,
-	  borderColor: "grey",
+	  borderColor: "white",
 	  borderRadius: 8,
-	  padding: (30, 16),
+	  paddingVertical: 15,
+	  paddingHorizontal: 30,
 	  backgroundColor: "#008CBA",
 	  marginTop: 0
   }, 
   buttonContainer: {
     flexDirection: 'column',
     backgroundColor: 'black',
-    alignItems: 'center',
+    // alignItems: 'center',
     justifyContent: 'center',
-	paddingTop:100,
-	marginTop: 20,
+	paddingTop:5,
+	marginTop: 30,
   },
   container: {
     flexDirection: 'column',
@@ -126,6 +127,11 @@ const styles = StyleSheet.create({
       color:"#beb2c8",
 	  fontSize: 30,
   },
+  intro2: {
+	fontWeight: "bold",
+	color:"#beb2c8",
+	fontSize: 20,
+},
 
   sub: {
 	color:"#beb2c8",  
@@ -139,6 +145,7 @@ const styles = StyleSheet.create({
 	  fontWeight: "bold",
 	  fontSize: 30,
 	  paddingBottom:10,
+	  alignItems: 'center',
   },
   scrollView:{
 	  marginHorizontal: 20
@@ -172,7 +179,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
@@ -348,6 +360,8 @@ function Picker() {
 	
 	</View>
   );
+
+  
 }
 
 
@@ -355,14 +369,29 @@ 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}>
 		  
 		  
@@ -375,9 +404,23 @@ vars = {
 					ultimas noticias relacionadas al censo y tambien verificar 
 					las tablas por municipio.</Text>
 		   </View>
-		  </ScrollView>
-		</View>,
-		 
+		   <View style = {styles.container}>
+				<Text style={styles.intro2}>Contactenos:</Text>
+				<Text style={styles.sub}>Prof: Hernando Mattei Torres
+				<Button onPress={() => Linking.openURL('mailto:hernando.mattei@upr.edu') }
+      			title="e-mail" /></Text>
+				<Text style={styles.sub}>Angelica Rosario Santos
+				<Button onPress={() => Linking.openURL('mailto:angelica.rosario2@upr.edu') }
+      			title="e-mail" /></Text>
+				<Text style={styles.sub}>Data from:</Text>
+				<Image source={require('./census-logos.png')} />
+				<Button onPress={() => Linking.openURL('https://data.census.gov/profile?q=United+States&g=0100000US') }
+      			title="United States Census page" />
+		   </View>
+		  
+		</View>
+		
+		,
 		newsView:
 		<View style = {styles.containerbackground}>
 		<ScrollView style={styles.scrollView}>
@@ -391,7 +434,8 @@ vars = {
 			
 			
 		 </View>
-		</ScrollView></View>,
+		</ScrollView>
+		</View>,
 		
 		dataOp:
 		<View style = {styles.containerbackground}>
@@ -409,6 +453,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>
 		
@@ -436,27 +487,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>
 						<Text style={styles.sub}> Navegador</Text>
-							<View style = {styles.buttons}>
+							<Pressable style = {styles.buttons} onPress={this.setNews}>
 							
 			 		 			<Button
-								onPress = {this.setNews}
-				 				title = "Noticias"
-				 				color = "rgba(255, 0, 0, 0)"
+								title = "Noticias"
+				 				color = "white"
 			  					/>
 			  
-			  					<Button
-								 onPress = {this.setData}
-								 title = "Datos"
-								 color = "rgba(255, 0, 0, 0)"
+			  					
+							</Pressable>
+								
+							<Pressable style = {styles.buttons} onPress={this.setData}>
+							
+			 		 			<Button
+								title = "Datos"
+				 				color = "white"
 			  					/>
-							</View>
-						
+			  
+			  					
+							</Pressable>
 						
 		  				{this.state.current}
 					</View>
+					</ScrollView>
 			</View>
 		</View>
       );