How to show the icon of a continuous moving car to respond to native cards?

Question

I use the rec-native-maps library from airbnb to develop my own Android application for Android. This application shows the map and car icon on the main page.

It works great, but when the car moves and the coordinates of the car change continuously, the map does not work smoothly. A MapView marker with a car icon jumps from point to point along the way. My expectation is to show a continuous moving object on the map, as shown 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 greatly appreciated.

Answer 1

I believe that the car is "jumping" because it is the time that GPS takes to calculate the new coordinates, and you just send new coordinates, but you do not weaken the transition. Remember that GPS does not work instantly.

You might want to revitalize the marker. See "Animating marker position" here: https://github.com/airbnb/react-native-maps