react-native-maps: Marker [animateMarkerToCoordinate] error

try

animate(location) {
    const { coordinate } = this.state;
    const newCoordinate = {
      latitude: location.latitude  + ((Math.random() - 0.5) * (LATITUDE_DELTA / 2)),
      longitude: location.longitude  + ((Math.random() - 0.5) * (LONGITUDE_DELTA / 2))
    };

      //this command will move the MARKER to the new location when the user double clicks on one of the locations in the drop down
      coordinate.timing(newCoordinate).start();
}

@Norris1z Thank you so much, you made my day. This piece of code is running perfectly fine on Android Virtual Device: coordinate.timing(newCoordinate).start();

Thanks once again.

Is animateMarkerToCoordinate even supposed to work? If not, can it just be deleted from the docs? So many people are falling into this trap. If yes, what’s the solution to make it work?

Also, a tip for people posting “not working”, you’re not giving anybody useful information to help debug the problem, it just creates noise. This is open source, at least try to make an effort considering you are not paying for support.

I had to use something like

   // lets say we have the coordinates in our state
    this.state = {
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
      }),
    };

   // we animate it using
   const { coordinate } = this.state;
    const newCoordinate = {
      latitude: LATITUDE + ((Math.random() - 0.5) * (LATITUDE_DELTA / 2)),
      longitude: LONGITUDE + ((Math.random() - 0.5) * (LONGITUDE_DELTA / 2)),
    };

    coordinate.timing(newCoordinate).start();

this issue shouldn’t be closed in my opinion, I was just testing the cited code and it doesn’t work in my android emulator neither in my android phone, the only thing that works is:

coordinate.timing(newCoordinate).start();

I could check that the method animateMarkerToCoordinate exists for the marker object but it doesn’t make any change to the marker. This method is also used in the examples:

https://github.com/react-native-maps/react-native-maps/blob/c542b04dce6565fca1cb57bfc98f46482ea950db/example/examples/AnimatedMarkers.js#L46

So a lot of people starting with this lib is going to get same errors 'cause the code it’s wrong, issues like this will continue to be created until the examples will be amended.

I used like below

<MapView>
<MapView.Marker
    ref={(marker_=>{this.marker = marker}}
/>
</MapView>

this.marker.animateMarkerToCoordinate(this.region,3000)

and it works on Android

This works for me. Thanks!

don’t know why, but _component was undefined.

I used like below

<MapView>
<MapView.Marker
    ref={(marker_=>{this.marker = marker}}
/>
</MapView>

this.marker.animateMarkerToCoordinate(this.region,3000)

and it works on Android

I had to use something like

   // lets say we have the coordinates in our state
    this.state = {
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
      }),
    };

   // we animate it using
   const { coordinate } = this.state;
    const newCoordinate = {
      latitude: LATITUDE + ((Math.random() - 0.5) * (LATITUDE_DELTA / 2)),
      longitude: LONGITUDE + ((Math.random() - 0.5) * (LONGITUDE_DELTA / 2)),
    };

    coordinate.timing(newCoordinate).start();

It’s not working … can you give us something more… some more lines of code … anyway where is marker’s refrence …

Ok. I just understood that markers on android are bitmaps and they cannot be animated. Maybe one way to animate them is by rendering pure react native animated views outside of map and using ref property of map to figure out their absolute positioning.

@Norris1z The solution works but marker doesnt responds instantaneosly to new coordinates from onPanDrag={(e) => this.tryAnimation(e.nativeEvent.coordinate)} or onRegionChange={(newCoords) => this.tryAnimation(newCoords)}

Its updating the position after a second. Can you please help me out?

My final line is like this while calling the animation: this.state.coordinate.timing({latitude, longitude},1).start();

Thank you for the response. But I am looking the answer for the Android platform (not iOS). Do you have the answer for it. This line is a source for error: this.marker._component.animateMarkerToCoordinate(newCoordinate, 500);