How to Animate marker position on Google Map in React Native

This article is to show animation of pointer movement on Google map.
There are many ways of doing an animation of pointer movement on maps ,this article focus on using the react-native-maps.We use MapView, Marker and AnimatedRegion for this animation.

Here’s what we’ll create at the end of this article :

Marker Movement

For creating this animation we use the location array which has latitude and longitude values ,for example :
{latitude: 20.93289777777778,longitude:77.77506666666666}

We will update the location in state every 4 sec, so we will get the next pointer value and animate it on Map.

Code sample:

const [location ,setlocation ]=useState(0);

useEffect(() => {
const interval = setInterval(() => {
getLocation()

},4000);
return () => clearInterval(interval)
})

const getLocation = () => {
console.log(“get live location after 4 second”)
let i=0;
var locationArray=[
{latitude:20.752219999999998,longitude:79.75849777777778},
{latitude:20.75269111111111,longitude:79.75815999999999},
{latitude:20.75293111111111,longitude:79.75798222222222},
{latitude:20.754004444444444,longitude:79.75805333333334},
]
const { latitude, longitude } =locationArray[i+1];
animate(latitude, longitude);
}

const animate = (latitude, longitude) => {
const newCoordinate = {latitude, longitude};
if(Platform.OS == ‘android’){
if(markerRef.current){
markerRef.current.animateMarkerToCoordinate(newCoordinate, 7000);
}
}else{
coordinate.timing(newCoordinate).start();
}
}

The Complete code is available on https://github.com/swapnilwatkar/GoogleMap-Animation/blob/main/MapScreen.js

Thank you.