React Native Maps

Question

I'm busy developing a location-based app and making use of expo, is there anyone who knows how to track user location on the map and tell if they reached a specific destination on expo project similar to GPS.

      <MapViewDirections
      origin={userContext.userLocation}
      destination={userContext.userLocation}
      apikey={googleMapApi}
      mode='DRIVING'
      language='en's
      strokeWidth={8}
      strokeColor="#2A9D8F"
      optimizeWaypoints={true}
      resetOnChange={false}
      precision={"low"}
  
    />

This is not done with `react-native-maps`. You'll need a geolocation package like this one for example `https://github.com/react-native-community/react-native-geolocation` and put a marker on your coordinates — Guillaume Munsch, Sep 14 '20 at 09:25

score 0 · Answer 1 · answered Sep 14 '20 at 10:12

If you are using expo you should use watchPositionAsync from expo-location api https://docs.expo.io/versions/latest/sdk/location/#locationwatchpositionasyncoptions-callback

You should track here the changes and then put the coordinates in the map.

Usage


async componentWillMount() {

    const { status } = await Permissions.askAsync(Permissions.LOCATION);

    if (status === 'granted') {
      this._getLocationAsync();
    } else {
      this.setState({ error: 'Locations services needed' });
    }
  }

  componentWillUnmount() {
     this.location.remove(callback...);
  }

  _getLocationAsync = async () => {
      this.location = await Location.watchPositionAsync(
          {
              enableHighAccuracy: true,
              distanceInterval: 1,
              timeInterval: 10000
          },
          newLocation => {
              let coords = newLocation.coords;
          // this.props.getMyLocation sets my reducer state my_location
          this.props.getMyLocation({
              latitude: parseFloat(coords.latitude),
              longitude: parseFloat(coords.longitude)
          });
        },
        error => console.log(error)
      );
      return location;
  };

I can get the user location, but I don't know how to compare it with my destination to see if I have reached it. — Premodial Zhou, Sep 15 '20 at 10:16
you should use harvesine formula and compare the distance between them and you should make an acceptable range for example 5km should be good. https://stackoverflow.com/questions/18883601/function-to-calculate-distance-between-two-coordinates — anthony willis muñoz, Sep 15 '20 at 11:33

React Native Maps

1 Answers1