Example: React Native Maps smooth animation to coordinate and region.

animate.js

import React, { Component } from 'react';
import {TouchableOpacity, Image,StyleSheet,Dimensions, View, Text, Animated, Easing, PanResponder, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { MapView } from 'expo';
import DateTimePicker from 'react-native-modal-datetime-picker';

const { width, height  } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.006339428281933124;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

console.disableYellowBox = true;

const iconSize = Math.round(height/10);

// impoart your own icon.
const carIcon = require('../../car1.png');

const initCoordinates = {
  latitude: 24.133765,
  longitude: 90.198258,
  latitudeDelta: 5,
  longitudeDelta: 5,
};

export default class SmoothAnimation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      routeData: {},
      bearing: 0,
      speed: 0,
      time: "N/A",
      coordinate: new MapView.AnimatedRegion({
        latitude: 23,
        longitude: 90,
      }), 
    };
    this.indx = 0;

  }

  handleAnimation = () => {
    const data = this.data[this.indx]  
    const coord = data.loc.coordinates
    const markerCoord = {
      latitude: coord[1],
      longitude: coord[0]
    }
    console.log("data ==>",data);
    this.indx = this.indx + 1;  
    const duration = 100
    const region = {
      ...markerCoord,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA        
    };      

    this.map.animateToRegion(region,1000*2)
    this.state.coordinate.timing(markerCoord,1000).start();
    // if (Platform.OS === 'android') {
    //   if (this.marker) {
    //     this.state.coordinate.timing(markerCoord,500*2).start();
    //     // console.log("===>",this.marker._component)
    //     // this.marker._component.animateMarkerToCoordinate(
    //     //   markerCoord,
    //     //   duration
    //     // );
    //   }
    // } else {
    //   console.log("markerCoord",markerCoord)
      

    // }

    this.setState({time: data.time, bearing: data.bearing})
  }
  countDonw  = () => {
    console.log("countDonw function");
  }
  componentDidMount = async () => {
    const result = await (await fetch('https://routedata-api-moxccjjiez.now.sh/')).json()
    this.data = result.data
    this.handleAnimation()
    setInterval(this.handleAnimation,3000)
  }

  render(){ 
    
    return (
      <View style={{flex:1}}>        
          <MapView
            style={styles.container}
            initialRegion = {initCoordinates}
            ref={ref => { this.map = ref; }}
          >
            <MapView.Marker.Animated
              coordinate={this.state.coordinate}
              ref={marker => { this.marker = marker; }}
              >
              
              <Image
                style={{
                width: 40,
                height: 40,
                resizeMode: 'contain',
                transform: [
                    { rotate: `${this.state.bearing}deg` }
                ],
                zIndex:3
                }}                
                source={carIcon}
              />
            </MapView.Marker.Animated>           
          </MapView>      
      </View>
    )
  }
}



var styles = StyleSheet.create({
   container: {
     // flex: 1,
    flex: 8,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,      
      //justifyContent: 'flex-end'
   },
   panview: {
    position: "absolute",    
  },
   box: {
      backgroundColor: 'rgba(0,0,0,0.7)',
      height: height, // let's make panview height is equal to screen height
      width: width,
      borderRadius: 10,
      //position: 'absolute'
   },

});

@ghost are you solve it?

@ghost are you solve it?

I have the same issue @ghost, Can you advise me any solution?

The Car is still taking pause for the next coordinate. How to get the smooth movement of marker from one coordinate to another ?

@ghost I have solved it, you need to following code:

this.state.coordinate.timing({
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
duration
}).start()

I get this error while runnig this code

"dependencies": {
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-maps": "0.27.1"
},

Windows10

Emulator = Pixel_3a_API_R

@dilipsuthar97 did you figure out the solution to the error?

@AnetteVestvik yes I got the solution for the above error. You just have to add value for latitudeDelta and longitudeDelta in coordinates object inside MapView and Marker as well.
If you r using animated mapview and marker than you probably have to add this.

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

state = {
    region: new AnimatedRegion({
      latitude: 0,
      longitude: 0,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
    coordinate: new AnimatedRegion({
      latitude: 0,
      longitude: 0,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
  };

And If you'r updating the value of coordinates than you should add latitudeDelta and longitudeDelta

this.state.coordinate.setValue({
      latitude: lat,
      longitude: long,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
});

I hope it'll help you

The Marker does not move anymore, seems like because https://routedata-api-moxccjjiez.now.sh is unavailable now

How can I do it with function Components??