Created
June 19, 2021 13:13
-
-
Save swaaz/a6a6e87f0e285d5c92b17c80212847dd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useEffect, useState } from 'react' | |
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View , StatusBar} from 'react-native' | |
import MapView, { Polyline } from 'react-native-maps'; | |
import StartTrackingFooter from './StartTrackingFooter'; | |
import TrackFooterCard from './TrackFooterCard'; | |
import * as Location from "expo-location"; | |
// import useLocation from '../hooks/useGeoLocation'; | |
import {haversine} from 'haversine'; | |
import useTimer from '../hooks/useTimer'; | |
import Header from './Header'; | |
const HomeScreen = ({navigation}) => { | |
const { timer, handleStart, handleReset } = useTimer(0); | |
const [isTracking, setIsTracking] = useState(false); | |
const [prevCoords, setPrevCoords] = useState({}); | |
const [ track , setTrack ] = useState({ | |
distance : 0.0, | |
speed : 0 | |
}); | |
const [getCurrentLocation, setCurrentLocation] = useState({ | |
latitude: 0.0 , | |
longitude: 0.0, | |
}) | |
const [coordinates, setCoordinates] = useState([]); | |
const [weather, setWeather] = useState({ | |
temperature : 0.0, | |
loaded : false, | |
}); | |
const startTrack = () => { | |
setIsTracking(true) | |
setCoordinates( prev => [...prev, getCurrentLocation] ); | |
setPrevCoords(getCurrentLocation); | |
handleStart(); | |
}; | |
const EndTrack = () => { | |
setIsTracking(false); | |
navigation.navigate('ShowMap', { currentLocation : getCurrentLocation, coordinates : coordinates, timer : timer, track : track, temperature : weather.temperature }); | |
handleReset(); | |
}; | |
useEffect(() => { | |
_getLocationAsync = async () => { | |
let { status } = await Location.requestForegroundPermissionsAsync(); | |
if (status !== 'granted') { | |
setErrorMsg('Permission to access location was denied'); | |
return; | |
} | |
let locations = await Location.watchPositionAsync({ accuracy: Location.Accuracy.High }, (loc) => { | |
setCurrentLocation({ | |
latitude : loc.coords.latitude, | |
longitude : loc.coords.longitude, | |
}) | |
// here inside promise isTracking value is not updaing. It shows the initial value (false) | |
if(isTracking) { | |
setCoordinates( prev => [...prev, { | |
latitude : loc.coords.latitude, | |
longitude : loc.coords.longitude | |
}] ); | |
setTrack(prev => ({ | |
...prev, | |
distance : prev.distance + haversine(prevCoords, { latitude : loc.coords.latitude, longitude : loc.coords.longitude }), | |
speed : prev.distance / (timer * 3600) | |
})); | |
setPrevCoords({ latitude : loc.coords.latitude, longitude : loc.coords.longitude }); | |
} | |
} | |
); | |
}; | |
_getLocationAsync(); | |
if(!weather.loaded){ | |
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${getCurrentLocation.latitude}&lon=${getCurrentLocation.longitude}&units=metric&appid=`) | |
.then((response) => response.json()) | |
.then((json) => setWeather({ temperature : json.main.temp, loaded : true})) | |
.catch((error) => console.error(error)) | |
} | |
},[]) | |
return( | |
<SafeAreaView style={styles.home}> | |
<Header navigation={navigation} /> | |
<View style={styles.maps}> | |
<MapView | |
style={styles.map} | |
showsUserLocation | |
followsUserLocation | |
region={{ | |
latitude: getCurrentLocation.latitude, | |
latitudeDelta: 0.001, | |
longitude: getCurrentLocation.longitude, | |
longitudeDelta: 0.001 | |
}} | |
> | |
<Polyline | |
coordinates={coordinates} | |
strokeWidth={6} | |
strokeColor="black" // fallback for when `strokeColors` is not supported by the map-provider | |
/> | |
</MapView> | |
</View> | |
{ | |
isTracking? | |
<TrackFooterCard setIsTracking={EndTrack} isTracking={isTracking} track={track} setTrack={setTrack} timer={timer} weather={weather} /> | |
: | |
<StartTrackingFooter setIsTracking={startTrack} /> | |
} | |
</SafeAreaView> | |
) | |
} | |
export default HomeScreen | |
const styles = StyleSheet.create({ | |
home : { | |
width: '100%', | |
flex: 1, | |
}, | |
maps: { | |
width: '100%', | |
height: '100%', | |
flex: 1, | |
alignItems : 'center', | |
justifyContent : 'center' | |
}, | |
map : { | |
...StyleSheet.absoluteFillObject, | |
}, | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@coderhawk999
There is the state
isTracking
whose initial value is false, I update it later to true. But Inside the promise (line number 63) the value is not reflecting. It shows the initial value itself. How to fix it?