App

App.js

@@ -4,14 +4,28 @@ import { View, Image, StyleSheet, Text, Button, ScrollView } from 'react-native'
 import data from './transfer.json' 
 
 
+//where data will be put
+var organizedData
 
-var information = ""
+//where data will be stored
+var information = "default text"
 
+//organize data make it pretty
+function organize(){
+	
+	
+	
+	
+}
+
+
+//calls data query
 function loadDoc() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
          information = this.responseText;
+		 organize()
   }
   };
   xhttp.open("GET", "https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72", true);
@@ -19,17 +33,23 @@ function loadDoc() {
   
 }
 
+loadDoc()
+
+
+
+
+
 //change this to an external css file later
 const styles = StyleSheet.create({
 	
   buttons: {
 	  flexDirection: 'row',
 	  justifyContent: 'center',
-	  marginTop: 30,
+	  marginTop: 40,
 	  marginBottom: 30,
-	  margin: 4,
+	  margin: 30,
 	  borderColor: "grey",
-  },
+  }, 
   container: {
     flexDirection: 'column',
 	justifyContent: 'center',
@@ -37,12 +57,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
 	marginTop: 20,
-	marginBottom: 500
   },
   containerbackground:{
 	
     backgroundColor: '#063970',
-	padding: 40
+	marginTop: 20
   },
   intro: {
 	  fontWeight: "bold",
@@ -51,9 +70,8 @@ const styles = StyleSheet.create({
 	 
   },
   sub: {
-      color:"#D7D6D6",
-	  
-	  fontSize: 20,
+      color:"#D7D6D6",  
+	  fontSize: 20
   },
   scrollView:{
 	  marginHorizontal: 20
@@ -80,6 +98,7 @@ let states = {
 		  
 
 		<View style = {styles.containerbackground}>
+		<ScrollView style={styles.scrollView}>
 		  <View style = {styles.container}>
 		  
 		  
@@ -90,43 +109,43 @@ let states = {
 			 
 			<Image source={require('./testimg.gif')} />
 			
-		  </View>
+		  </View> 
+		  </ScrollView>
 		</View>,
-		  
-		dataView:
-		
+		 
+		newsView:
 		<View style = {styles.containerbackground}>
 		<ScrollView style={styles.scrollView}>
 		 <View style = {styles.container}>
 		  
 		  
-			<Text style={styles.intro}>DATADATADATADATADATA</Text>
-		
-			<Text style={styles.sub}>{information}</Text>
+			<Text style={styles.intro}>Noticias</Text>
 			 
 			<Image source={require('./testimg.gif')} />
 			
 		 </View>
-		</ScrollView></View>,
+		</ScrollView></View>
 
+		
+	}
 
-		newsView:
-		<View style = {styles.containerbackground}>
+function dataView(){	
+	return (
+	<View style = {styles.containerbackground}>
 		<ScrollView style={styles.scrollView}>
 		 <View style = {styles.container}>
 		  
 		  
-			<Text style={styles.intro}>Noticias</Text>
+			<Text style={styles.intro}>DATADATADATADATADATA</Text>
+		
+			<Text style={styles.sub}>{information}</Text>
 			 
 			<Image source={require('./testimg.gif')} />
 			
 		 </View>
 		</ScrollView></View>
-
-		
-	}
-
-
+	)
+}
 
 
 class App extends React.Component {
@@ -136,7 +155,11 @@ state = {current: states.welcome}
 
 //state changing functions
 setHome = () => this.setState({ current: states.welcome })
-setData = () => {loadDoc(); this.setState({ current: states.dataView })}
+
+
+setData = () => this.setState({current: dataView()})
+
+
 setNews = () => this.setState({ current: states.newsView })