Question about the call API

[LcsLpr]

Is the call API to Google is send every time the position of the user change ? (origin)

ps : My destination don't change

[bramus]

Yes it does. Whenever origin, destination or waypoints changes, the directions are recalculated.

If you don't want this behaviour you can prevent this by not directly linking the user's “live” location to the origin prop.

In code that would translate to something like this:

import React, { Component } from 'react';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

class Example extends Component {

  constructor(props) {
    super(props);

    this.state = {
      // userLocation = the "live" user location.
      // We'll update this whenever the user his/her location changes
      // @note: if you don't want to re-render on every user move, consider storing this in a property / field
      userLocation: null,

      // A cached version of the user location, we'll use this as the origin in MapViewDirections
      // By using a cached version (which doens't change), it won't hit the Google Maps Directions API
      // whenever the user moves.
       userLocationForDirections: null,
    };

    this.watchID = null;
  }

  componentDidMount = () => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          userLocation: position.coords,
          userLocationForDirections: position.coords,
        });
      },
      (error) => {
        // …
      },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );

    this.watchID = navigator.geolocation.watchPosition((position) => {
      this.setState({
        userLocation: position.coords
      });
    });
  }

  componentWillUnmount = () => {
    this.watchID && navigator.geolocation.clearWatch(this.watchID);
  }

  render() {
    const {
      userLocation,
      userLocationForDirections,
    } = this.state;

    if (!userLocation || !userLocationForDirections) {
      return null;
    }

    return (
      <MapView
        // …
      >
        <MapViewDirections
          origin={`${userLocationForDirections.latitude},${userLocationForDirections.longitude}`}
          destination={/* … */}
          // …
        />
      </MapView>
    );
  }

}