text: import React, { useState, useEffect } from 'react';
  import { AsyncStorage, StatusBar, Text } from 'react-native';
  import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native'
  import { createDrawerNavigator } from '@react-navigation/drawer'
  import NetInfo from '@react-native-community/netinfo'
  import * as Permissions from 'expo-permissions'
  import * as Location from 'expo-location';
  import MainScreen from './screens/MainScreen'
  import Info from './screens/Info'
  import Settings from './screens/Settings'
  import { InfoContext } from './context/InfoContext'
  import axios from "axios";
  
  function App() {
  	const [latitude, changeLatitude] = useState("Waiting...")
  	const [longitude, changeLongitude] = useState("Waiting...")
  	const [altitude, changeAltitude] = useState("Waiting...")
  	const [locationPermission, changeLocPerm] = useState("Waiting...")
  	const [carrier, setCarrier] = useState("Getting Carrier....")
  	const [downSpeed, setDownSpeed] = useState("Waiting...")
  	const [theme, changeTheme] = useState("light")
  	const [data, changeData] = useState("Getting Data")
  	const [heatmapPoints, changeHeatmapPoints] = useState(data)
  	const [displayAltitude, changeDisplayAltitude] = useState(altitude)
  
  	let updateTime = 120000 //in milliseconds
  
  	const getTheme = async () => {
  		let value = await AsyncStorage.getItem('theme');
  		if (value !== null) {
  			changeTheme(value);
  		}
  		else {
  			setTheme()
  		}
  	}
  
  	const setTheme = async () => {
  		await AsyncStorage.setItem('theme', theme);
  	}
  
  	const getLocation = async () => {
  		let { status } = await Permissions.askAsync(Permissions.LOCATION)
  		changeLocPerm(status)
  
  		if (status !== 'granted') {
  			changeLatitude("Provide Permission")
  			changeLongitude("Provide Permission")
  			changeAltitude("Provide Permission")
  		}
  
  		let options = {
  			accuracy: Location.Accuracy.Highest,
  			timeInterval: updateTime,
  			distanceInterval: 0,
  		}
  
  		await Location.watchPositionAsync(options, (data) => {
  			changeLatitude(data.coords.latitude)
  			changeLongitude(data.coords.longitude)
  			changeAltitude(data.coords.altitude)
  
  		}).then(() => {
  			if(latitude !== "Waiting..." && longitude !== "Waiting..." && carrier !== "Getting Carrier...." ){
  			    var data = {
  			        "ping": 100,
  			        "latitude": latitude,
  			        "longitude": longitude,
  			        "isp": carrier,
  			        "down": downSpeed === "Waiting..." ? 0 : downSpeed
  				}
  				
  				let url = "https://hotspotsave.herokuapp.com/post?ping=" + data["ping"] + 
  						"&latitude=" + data["latitude"] + "&longitude=" + data["longitude"] + 
  						"&isp=" + data["isp"] + "&down=" + data["down"]
  				
  			    let response = fetch(
  			        url,
  			        {
  			            method: "POST",
  			            headers: {
  			                "Accept": "application/json",
  			                "Content-Type": "application/json"
  			            },
  			            body: JSON.stringify(data)
  			        }
  				).then((response) => console.log(response))
  				
  			}
  		})
  	}
  
  	let speed = 0
  	const getDownSpeed = async () => {
  		let uri = "https://images.pexels.com/photos/248159/pexels-photo-248159.jpeg?crop=entropy&cs=srgb&dl=road-in-city-during-sunset-248159.jpg&fit=crop&fm=jpg&h=3519&w=5279"
  		let size = 2059767
  		const start = new Date().getTime()
  
  		fetch(uri, {
  			headers: {
  				'Cache-Control': 'no-cache, no-store, must-revalidate',
  				'Pragma': 'no-cache',
  				'Expires': 0
  			}
  		}).then(() => {
  			const end = new Date().getTime()
  			let timeTaken = end - start
  
  			speed = (size / 1024) / (timeTaken / 1000)
  		}).then(() => {
  			setDownSpeed(speed.toFixed(3))
  			setTimeout(() => {
  				getDownSpeed()
  			}, updateTime)
  		})
  	}
  
  	const getCarrier = async () => {
  		NetInfo.fetch().then(data => {
  			setCarrier(data.details.carrier)
  			return data.details.carrier
  		}).then((carr) => {
  			getPoints(carr)
  		})
  	}
  
  	const getPoints = async (carr) => {
  		if(carr != "Getting Carrier....") {
  			let url = "https://hotspotsave.herokuapp.com/" + carr
  
  			let response = await axios.get(url).then(res => {
  				res.json()
  			}).then((result) => {
  				let points = []
  				result.map((point) => {
  					let obj = {
  						latitude: Number(point["latitude"]),
  						longitude: Number(point["longitude"]),
  						weight: point["down"] === undefined ? 0: 
  							Number(point["down"]) >= 1000? 1000: Number(point["down"])
  					}
  
  					points.push(obj)
  				})
  				changeData(points)
  			}).catch(error => console.error(error));
  
  			setTimeout(() => {
  				getPoints(carr)
  			}, updateTime)
  		}
  	}
  
  	useEffect(() => {
  		getTheme()
  		getCarrier()
  		getLocation()
  		getDownSpeed()
  	}, [])
  
  	// const changeLevel = (type) => {
      //     let newAlt = null
      //     if(type === "increase") {
      //         newAlt = displayAltitude + 50
      //     } else if(type === "decrease") {
      //         newAlt = displayAltitude - 50
      //     }
      //     changeDisplayAltitude(newAlt)
      //     filterPoints()
  	// }
  	
  	// const filterPoints = () => {
      //     const altDiff = 15
      //     let newPoints = []
  
      //     points.map((point) => {
      //         let diff = Math.abs(point.altitude - displayAltitude)
      //         if(diff <= altDiff) {
  	// 			let obj = {
  	// 				latitude: Number(point.latitude),
  	// 				longitude: Number(point.longitude),
  	// 				weight: point["down"] === undefined ? 0: 
  	// 				Number(point["down"]) >= 1000? 1000: Number(point["down"])
  	// 			}
      //             newPoints.push(obj)
      //         }
      //     })
  
      //     changeHeatmapPoints(newPoints)
      // }
  
  	let info = {
  		latitude: latitude,
  		longitude: longitude,
  		altitude: altitude,
  		locPerm: locationPermission,
  		carrier: carrier,
  		downSpeed: downSpeed,
  		theme: theme,
  		changeTheme: changeTheme,
  		points: data,
  		// changeLevel: changeLevel
  	}
  
  	const Drawer = createDrawerNavigator()
  	return (
  		<InfoContext.Provider value={info}>
  			<StatusBar 
  				backgroundColor={theme === "dark" ? "#161616" : "white"}
  				barStyle={theme === "dark" ? "default" : "dark-content"}
  			/>
  			<NavigationContainer theme={theme === 'dark' ? DarkTheme : DefaultTheme}>
  				<Drawer.Navigator initialRouteName="Home" >
  					<Drawer.Screen name="Home" component={MainScreen} />
  					<Drawer.Screen name="Your Info" component={Info} />
  					<Drawer.Screen name="Settings" component={Settings} />
  				</Drawer.Navigator>
  			</NavigationContainer>
  		</InfoContext.Provider>
  	)
  }
  
  export default App