React-Native: Rotate and Animated Car with respective to heading - animation

Question

I am using react-native-maps, Right now i am able to update location of driver and update the polyline. What i want to achieve is like Uber, i want to animate the car to new coordinate and also rotate it with respective to the heading.
Right now i am able to update the polyline, but without animation, I did some research and i got to know that we use Animated Markers for this, but couldn't find a documentation for this implementation.
my render method:
renderContent() {
if (this.state.loading) {
return (
<Loading />
);
} else if (this.state.error) {
return (
<Card>
<Heading> No directions available </Heading>
<Button>
<Text> Retry </Text>
<Icon name='refresh' />
</Button>
</Card>
);
}
if (this.props.liveLocation.origin !== null) {
const { origin, des, coords } = this.props.liveLocation;
return (
<MapView
provider='google'
style={{ height: '100%', width: '100%' }}
ref={ref => { this.map = ref; }}
initialRegion={{
latitude: Number(origin.lat),
longitude: Number(origin.lng),
longitudeDelta: 0.2,
latitudeDelta: 0.2
}}
onLayout={this.onLayout}
>
{origin != null && <MapView.Marker
coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
>
<Icon name='directions-car' />
</MapView.Marker>}
{des != null && <MapView.Marker
coordinate={{ latitude: Number(des.lat), longitude: Number(des.lng) }}
>
<Icon name='place' />
</MapView.Marker>}
{coords.length > 1 &&
<MapView.Polyline
coordinates={coords}
strokeWidth={2}
strokeColor="black"
/>
}
</MapView>
);
}
}
origin has { lat, lng, heading, etc etc }