Cambios nuevos

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";
@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
 	  marginTop: 40,
 	  marginBottom: 30,
 	  margin: 30,
-	  borderColor: "grey",
+	  borderColor: "white",
 	  borderRadius: 8,
 	  padding: (30, 16),
 	  backgroundColor: "black",
@@ -123,11 +123,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',
@@ -147,6 +147,11 @@ const styles = StyleSheet.create({
       color:"#black",
 	  fontSize: 30,
   },
+  intro2: {
+	fontWeight: "bold",
+	color:"#beb2c8",
+	fontSize: 20,
+},
 
   sub: {
 	color:"#black",  
@@ -160,6 +165,7 @@ const styles = StyleSheet.create({
 	  fontWeight: "bold",
 	  fontSize: 30,
 	  paddingBottom:10,
+	  alignItems: 'center',
   },
   scrollView:{
 	  marginHorizontal: 20
@@ -194,7 +200,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
@@ -364,6 +375,8 @@ function Picker() {
 	
 	</View>
   );
+
+  
 }
 
 
@@ -371,21 +384,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>,
@@ -400,7 +431,8 @@ vars = {
 			<Image source={require('./Logo.jpeg')} />
 			
 		 </View>
-		</ScrollView></View>,
+		</ScrollView>
+		</View>,
 		
 		dataOp:
 		<View style = {styles.containerbackground}>
@@ -416,6 +448,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>
 		
@@ -443,24 +482,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>
       );