Multiple Google Direction API request for a single request from React-native app.

[DivyanshuAlok]

Whenever I am reloading the application, the expected number of requests made to google direction API should be 1, but when I tally with Google API console, the number of requests is more, and it is time-bound. I.e, its ONE request every 2-3 seconds.

In the last one hour, I have reloaded the application twice and the number on request made to Directions API was 60.

And I have been building my project for the last one month. the picture below shows the API usage of last 30 days.

App.js

import {  SafeAreaView,  StyleSheet,  ScrollView,  View,  Text,  StatusBar,  ToastAndroid,} from 'react-native';
import Geolocation from 'react-native-geolocation-service';
import MapViewDirections from 'react-native-maps-directions';
import MapView, { PROVIDER_GOOGLE, Polyline } from 'react-native-maps';
export default class Map extends React.Component {
  constructor(props){
    super(props);
    this.state={
      latitude: 17.387456,
      longitude: 78.358063,
      origin: {latitude: 0, longitude: 0},
    };
  }
  componentWillMount(){
    Geolocation.getCurrentPosition((position) => {
      this.setState({
        origin: {longitude: position.coords.longitude, latitude: position.coords.latitude}
      });
    });
  }
  getCurrentLocation(){
    Geolocation.getCurrentPosition((position) => {
        this.setState({
        origin: {longitude: position.coords.longitude, latitude: position.coords.latitude}
        });
    });
    return this.state.origin;
  }
  render(){
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
              latitude: this.state.origin.latitude,
              longitude: this.state.origin.longitude,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
          }}
          showsUserLocation={true}
          followUserLocation={true}
          mapPadding={{ top: 90, right:0, bottom:0, left: 0 }}
        >
          <MapViewDirections
            origin={this.getCurrentLocation()}
            destination={"place_id:ChIJR6SgKbyTyzsR3s4r_j8Go5Q"}
            strokeWidth={4}
            mode="DRIVING"
            strokeColor="royalblue"
            resetOnChange={false}
            precision="high"
            apikey={"api key"}
          />
        </MapView>
      </View>
    );
  }
}`

This is the file that gets rendered and the locations are hardcoded. 

[bramus]

This is an issue with your implementation, not react-native-maps-directions itself. Therefore I'll be labelling the issue as invalid.

To answer your question though: you're passing this.getCurrentLocation() as your origin and your map is tracking that location (using followUserLocation={true}). As the value for the current location will change a lot, it will result in new requests being made.

[DivyanshuAlok]

Thanks, @bramus . That's one hell of a mistake I didn't recognize.