DEV Community 👩‍💻👨‍💻

swapnilwatkar
swapnilwatkar

Posted on

How to Animate pointer 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 :

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

Top comments (0)

Hacktoberfest is happening now!



It is a month-long celebration of open source. For a lot of devs, its their introduction to open source.


Check out the Hacktoberfest tag on DEV to keep up with the latest!