I have a RN/EAS app, and I need to update my user's location/position on the map over a distance. I am trying to do this via watchPositionAsync but I am not handling something properly.
Below is my code:
useFocusEffect(
React.useCallback(()=> {
let isActive = true;
//permissions_get requests user permissions to access their location in the first place
const permission_get = async () => { //checks for permission to get the user's foreground location
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
Alert.alert('Location Permission Denied','Please update your settings to allow us to access your location')
console.log('Not permitted')
return;
}
let location = await Location.getCurrentPositionAsync({}); //get's the user's current location
if(isFocused){
setLocation(location);
}
}
permission_get()
const fetchGeoPosition = async() => { //this is what used to get the user's current location, but I have since replaced it with the geoPositionUpdater below. This really controls the activity indicator, which spins until 'setLoading is false'
let position = await Location.getCurrentPositionAsync({})
if (isActive){
setUserLatitude(position.coords.latitude);
setUserLongitude(position.coords.longitude);
setPositionError(null);
await client_instance.push_location(position.coords.latitude, position.coords.longitude) //pushes user's current location to the server. I don't think I need this anymore
}
setIsLoading(false) //Stops the activity indicator from spinning and displays the map
error => isActive && setPositionError(error.message),
{enableHighAccuracy: true, timeout: 0, maximumAge: 1000}
}
fetchGeoPosition()
const geoPositionUpdater = async() =>{
const updatedPosition = await Location.getCurrentPositionAsync({}) //initial belief is that I need to isolate the user's current position
if(updatedPosition != null && isFocused){ //essentially establishes that this function will run when an updated position has been found, and isFocused is true, meaning permissions have been granted
await Location.watchPositionAsync({
distanceInterval: 2,
enableHighAccuracy: true,
},
setUserLatitude(updatedPosition.coords.latitude),
setUserLongitude(updatedPosition.coords.longitude),
setPositionError(null),
await client_instance.push_location(updatedPosition.coords.latitude, updatedPosition.coords.longitude)
)
}
}
geoPositionUpdater()
console.log('updated position is ran')
return () =>{
isActive = false
console.log('Location Severed')
}
},
[],
),
)
//
<View style = {styles.middle}>
<MapView
ref={refMapRegion}
initialRegion = {{
latitude: updated_user_latitude,
longitude: updated_user_longitude,
latitudeDelta: 0.015,
longitudeDelta: 0.015
}}
style={styles.map}
provider = {PROVIDER_GOOGLE}
region={{
latitude: updated_user_latitude,
longitude: updated_user_longitude,
latitudeDelta: 0.015,
longitudeDelta: 0.0121
}}
>
<Marker
coordinate={
{latitude: updated_user_latitude,
longitude: updated_user_longitude,
error: position_error,
}}
>
<View>
{(user())}
</View>
</Marker>
</MapView>
</View>