Changes colors and styles in app

App.js

 import React, {useState, useEffect} from 'react';
 import { View, Image, StyleSheet, Text, Button, ScrollView, Pressable} from 'react-native';
 import DropDownPicker from 'react-native-dropdown-picker';
-import { parse } from 'json2csv';
+
 
 //import JSON;
 //import { Dataframe, readJSON } from "danfojs";
 
 function organize(){
 	
-	var stringDiv = JSON.parse(information)
-	var csv = parse(stringDiv)
-	console.log(csv)
+	var stringDiv = JSON.stringify(information)
+	stringDiv = stringDiv.replace('[[', '');
+	stringDiv = stringDiv.replace(']]', '');
+	stringDiv = stringDiv.split(',')
+	//create smaller array variables
+	let variables = []
+	let value = []
+	let est = []
+	
+	
+	//theres a better way to do this but im not fixing it rn
+	for(let i = 0; i<stringDiv.length; i++){
+		if(i<stringDiv.length/3)
+		{variables.push(stringDiv[i])}
+		else if(i<stringDiv.length/3*2)
+		{value.push(stringDiv[i])}
+		else{est.push(stringDiv[i])}
+	}
+	
+	//anyways this to format it
 	
-	//var csv is the variable with the thing you just pulled
-	//put function and data cleaning here
-	//just make sure you change the return value in 'getInfo()'
-	//so it returns the actual organized table
-	//or make getInfo() organize the table as well
-	//and return that organized table
-	//i leave this to you
+	console.log("vars:",variables)
+	console.log("val:",value)
+	console.log("est:",est)
+	//organizedData = JSON.parse(information)
+	//console.log(stringDiv)
 	
 }
 
+function json_2_csv(information){
+	const csv = parse(obj);
+
+	console.log(csv);
+}
+
 //fix
 
 DropDownPicker.setListMode("SCROLLVIEW")
 	  borderColor: "grey",
 	  borderRadius: 8,
 	  padding: (30, 16),
-	  backgroundColor: "#008CBA",
+	  backgroundColor: "black",
 	  marginTop: 0
   }, 
   buttonContainer: {
     flexDirection: 'column',
-    backgroundColor: 'black',
+    backgroundColor: '#f0f8ff',
     alignItems: 'center',
     justifyContent: 'center',
 	paddingTop:100,
   container: {
     flexDirection: 'column',
 	justifyContent: 'center',
-    backgroundColor: 'black',
+    backgroundColor: '#f0f8ff',
     alignItems: 'center',
     justifyContent: 'center',
 	paddingTop:20,
   },
   containerbackground:{
 	
-    backgroundColor: '#063970'
+    backgroundColor: '#f0f8ff'
   },
   intro: {
 	  fontWeight: "bold",
-      color:"#beb2c8",
+      color:"#black",
 	  fontSize: 30,
   },
 
   sub: {
-	color:"#beb2c8",  
+	color:"#black",  
 	fontWeight: "bold",
 	fontSize: 15,
 	paddingBottom:10,
 },
 
   Navsub: {
-      color:"#beb2c8",  
+      color:"#black",  
 	  fontWeight: "bold",
 	  fontSize: 30,
 	  paddingBottom:10,
 });
 
 
+
 //default button press
 
 const handlePress = () => false
 	{label: 'Yauco', value: '153'}
   ]);
   
-  //add a thing here to select year to take info from
-  
-
-//add a dropdown in here 
 
   return (
   <View>
 	  searchPlaceholder="Busqueda..."
     />
 	
-	
-	
 	</View>
   );
 }
 //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.container}>
-		  
-		  
-				<Text style={styles.intro}>BIENVENIDO!!!!</Text>
-	
-				<Image source={require('./Logo.jpeg')} />
+				<Text style={styles.intro}>Bienvenido!</Text>
 			</View>
 			<View style = {styles.container}>
-				<Text style={styles.sub}>Aqui podra mantenerse al tanto con las 
-					ultimas noticias relacionadas al censo y tambien verificar 
-					las tablas por municipio.</Text>
+				<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>
 		   </View>
 		  </ScrollView>
 		</View>,
 			<Text style={styles.intro}>Noticias</Text>
 			
 			<Image source={require('./Logo.jpeg')} />
-		  
-			 
-			
 			
 		 </View>
 		</ScrollView></View>,
 		<ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
 		 <View style = {styles.container}>
 			
-		  
 			<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
 				
 			<Picker />
-			
-			<Image source={require('./testimg.gif')} />
+
 				
 			<DataButton />
 			
 			<View style = {styles.containerbackground}>
 				<View style = {styles.buttonContainer}>
 					<Text style={styles.Navsub}> Demographic Data Viewer</Text>
-						<Text style={styles.sub}> Navegador</Text>
 							<View style = {styles.buttons}>
-							
 			 		 			<Button
 								onPress = {this.setNews}
 				 				title = "Noticias"
-				 				color = "rgba(255, 0, 0, 0)"
+				 				color = "white"
 			  					/>
-			  
 			  					<Button
 								 onPress = {this.setData}
 								 title = "Datos"
-								 color = "rgba(255, 0, 0, 0)"
+								 color = "white"
 			  					/>
 							</View>
 						

yarn.lock

   "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"
   "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"
     "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"