How to animate marker and polyline with react-native-maps - react-native

Question

I'm using react native maps, redux, redux thunk (and a lot of other cool stuffs)
Any ideas about how to animate my marker and my polyline like this
map animation on dribbble
I already have the markers and the polyline on my map and I know how to move the map. I want to add 3 effects :
the pulse effect on the marker,
draw the polyline from start to arrival with a fancy animation
make a gradient color on the polyline
Thanks everyone !

Answer 1

It does not appear that you can animate the drawing of a polyline in react native maps, but you can give it a gradient color with the following code (iOS only):
import MapView, { Polyline } from 'react-native-maps';
<MapView>
<Polyline
coordinates={[
{ latitude: 37.8025259, longitude: -122.4351431 },
{ latitude: 37.7896386, longitude: -122.421646 },
{ latitude: 37.7665248, longitude: -122.4161628 },
{ latitude: 37.7734153, longitude: -122.4577787 },
{ latitude: 37.7948605, longitude: -122.4596065 },
{ latitude: 37.8025259, longitude: -122.4351431 }
]}
strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
strokeColors={[
'#7F0000',
'#00000000', // no color, creates a "long" gradient between the previous and next coordinate
'#B24112',
'#E5845C',
'#238C23',
'#7F0000'
]}
strokeWidth={6}
/>
Here is an example of an animated Marker as well:
import Mapview, { AnimatedRegion, Marker } from 'react-native-maps';
getInitialState() {
return {
coordinate: new AnimatedRegion({
latitude: LATITUDE,
longitude: LONGITUDE,
}),
};
}
componentWillReceiveProps(nextProps) {
const duration = 500
if (this.props.coordinate !== nextProps.coordinate) {
if (Platform.OS === 'android') {
if (this.marker) {
this.marker._component.animateMarkerToCoordinate(
nextProps.coordinate,
duration
);
}
} else {
this.state.coordinate.timing({
...nextProps.coordinate,
duration
}).start();
}
}
}
render() {
return (
<MapView initialRegion={...}>
<MapView.Marker.Animated
ref={marker => { this.marker = marker }}
coordinate={this.state.coordinate}
/>
</MapView>
);
}
More examples can be seen here: https://github.com/react-community/react-native-maps