DEV Community

loading...

How to Animate pointer on Google Map in React Native

swapnilwatkar
Hi ! I am a Software Engineer, experienced in Mobile and Web applications.
・1 min read

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 :

Pointer Animation

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();
        }
    }
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)