How to show continuous moving car icon on react native maps?

Question

I am using react-native-maps library by airbnb to develop my react native app for android. This app shows a map and a car icon on the home page.

It works fine but when the car is moving and the car coordinates are changing continuously, the map is not rendering smoothly. The MapView Marker with the car icon jumps from point to point along the path. My expectation is to show a continuous moving object on the map, just like it shows on the google map.

Here is my code:

this.state = {
  latitude: 22.55231,
  longitude: 88.56772,
  angle: 0
}

componentDidMount(){
  navigator.geolocation.getCurrentPosition(
    position => {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      let angle = position.coords.heading;
      this.setState({latitude, longitude, angle});
    },
    error => console.log(error),
    {
      // enableHighAccuracy: true
    }
  );

  navigator.geolocation.watchPosition(
    position => {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      let angle = position.coords.heading;
      this.setState({latitude, longitude, angle});
    },
    error => console.log(error),
    {
      // enableHighAccuracy: true
    }
  );  
}

getMapRegion(){
  return {
    latitude: this.state.latitude,
    longitude: this.state.longitude,
    latitudeDelta: 0.9271,
    longitudeDelta: ASPECT_RATIO * 0.9271
  }
}

render(){
  let angle = this.state.angle || 0; 
  return(
    <MapView style={styles.map}
      showUserLocation={true}
      followUserLocation={true}
      region={this.getMapRegion()}>
      <MapView.Marker 
        title={'Hi'}
        style={{
          transform: { rotate: `${angle}deg` },
          width: 20,
          height: 20
        }}
        image={require('../../../images/car-marker-2.png')}
        coordinate={{ latitude: this.state.latitude, longitude: this.state.longitude }}/>
    </MapView>
  );
}

Any help on this is much appreciated.

Answer 1

I believe the car is "jumping" because it is the time it takes the GPS to calculate the new coordinates and you are just sending the new coordinates but you are not easing out the transition. Keep in mind the GPS does not work instantaneously.

You might want to Animate the Marker. See "Animated Marker Position" here: https://github.com/airbnb/react-native-maps