How do I properly implement watchPositionAsync into my React Native project?

Viewed 116

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>
0 Answers
Related