title: React-Native: Get rotation angle of react-native-maps
body: <p>i am building a ui for tracking a driver, i update the track as well as direction...
  And for the custom marker, I have used transform and the rotation of the driver's heading value, the marker animates very nicely with respective to the heading, but the problem comes when i rotate the map, after rotating the map the marker doesn't rotate along the map,
  Is there any possible way i could rotate the map and maintain the rotation of the marker?</p>
  
  <pre><code>import React from 'react';
  import { View, StyleSheet, Platform, Image } from 'react-native';
  import MapView, { AnimatedRegion } from 'react-native-maps';
  import { connect } from 'react-redux';
  import { Card, Heading, Text, Button } from '@shoutem/ui';
  import { Icon } from 'react-native-elements';
  import { DARK } from '../../config';
  import * as actions from '../../actions';
  import { Loading } from '../../components/common';
  
  const DEFAULT_PADDING = { top: 40, right: 40, bottom: 40, left: 40 };
  const IUST = {
      latitude: 33.9260206, longitude: 75.0173499
  };
  let IntervalFlag = 0;
  //Because without this componentWillUpdate will call setInterval as many times componentUpdates
  
  class TrackDriver extends React.Component {
    state = {
      loading: true,
      error: false,
      coordinate: new AnimatedRegion({
        latitude: IUST.latitude,
        longitude: IUST.longitude,
      }),
    }
    onDone = (loadingFlag, error) =&gt; {
      this.setState({ loading: loadingFlag });
      this.setState({ error });
    }
    onLayout = () =&gt; {
      const { origin, des } = this.props.liveLocation;
      console.log(origin);
      console.log(des);
      setTimeout(
          () =&gt; {
              try {
                  this.map.fitToCoordinates([{ latitude: Number(origin.lat), longitude: Number(origin.lng) }, { latitude: Number(des.lat), longitude: Number(des.lng) }], {
                      edgePadding: DEFAULT_PADDING,
                      animated: true,
                  });
              } catch (e) {
                  console.error(e);
              } 
          }, 1000
      );   
  }
    componentWillUnmount() {
      clearInterval(this.interval);
    }
    componentDidMount() {
      IntervalFlag = 0;
      this.setState({ loading: true });
      const { navigation } = this.props;
      const pool = navigation.getParam('pool');
      this.props.getJourneyState(pool, this.onDone);
    }  
    componentWillReceiveProps(nextProps) {
      const duration = 1000;
  
      if (this.props.liveLocation.origin !== nextProps.liveLocation.origin) {
        const newCoordinate = {
          latitude: Number(nextProps.liveLocation.origin.lat),
          longitude: Number(nextProps.liveLocation.origin.lng)
        };
  
  
        if (Platform.OS === 'android') {
          if (this.marker) {
            this.marker._component.animateMarkerToCoordinate(
              newCoordinate,
              duration
            );
          }
        } else if (this.props.liveLocation.origin != null) {
          const oldCoordinate = {
            latitude: Number(this.props.liveLocation.origin.lat),
            longitude: Number(this.props.liveLocation.origin.lng)
          };
          oldCoordinate.timing(newCoordinate).start();
          }
      }
    }
    componentWillUpdate() {
      const { navigation, liveLocation } = this.props;
      const pool = navigation.getParam('pool');
      if (this.state.loading === false &amp;&amp; IntervalFlag === 0) {
        IntervalFlag = 1;
        this.interval = setInterval(() =&gt; this.props.trackDirections(pool, liveLocation.des), 3000);
       }
    }
  
    renderContent() {
      if (this.state.loading) {
        return (
          &lt;Loading /&gt;
        );
      } else if (this.state.error) {
        return (
          &lt;Card&gt;
              &lt;Heading&gt; No directions available &lt;/Heading&gt;
              &lt;Button&gt; 
                &lt;Text&gt; Retry &lt;/Text&gt;
                &lt;Icon name='refresh' /&gt;
              &lt;/Button&gt;
          &lt;/Card&gt;
        );
      } 
      if (this.props.liveLocation.origin !== null) {
        const { origin, des, coords } = this.props.liveLocation;
        return (
          &lt;MapView
                provider='google'
                style={{ height: '100%', width: '100%' }}
                ref={ref =&gt; { this.map = ref; }}
                initialRegion={{
                  latitude: Number(origin.lat),
                  longitude: Number(origin.lng),
                  longitudeDelta: 0.2,
                  latitudeDelta: 0.2
                }}
                onLayout={this.onLayout}
          &gt;
            {origin != null &amp;&amp; &lt;MapView.Marker.Animated 
              coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
              ref={marker =&gt; { this.marker = marker }}
              style={{ transform: [{
                rotate: origin.heading === undefined ? '0deg' : `${origin.heading}deg`
              }]
            }}
              &gt;
              &lt;Image
                style={{ 
                  height: 50,
                  width: 50,
                  transform: [{
                  rotate: '270deg'
                  }]
                }}
                source={require('../../assets/car.png')}
              /&gt;
            &lt;/MapView.Marker.Animated&gt;}
  
             {des != null &amp;&amp; &lt;MapView.Marker 
              coordinate={{ latitude: Number(des.lat), longitude: Number(des.lng) }}
             &gt;
               &lt;Icon name='place' /&gt;
               &lt;/MapView.Marker&gt;}
  
            {coords.length &gt; 1 &amp;&amp; 
                  &lt;MapView.Polyline
                              coordinates={coords}
                              strokeWidth={2}
                              strokeColor="black"
                  /&gt;
                  }
          &lt;/MapView&gt;
        );
      }  
    }
    render() {
      return (
        &lt;View style={{ flex: 1 }}&gt;
        {this.renderContent()}
        &lt;/View&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      liveLocation: state.activepool.liveLocation
    };
  };
  export default connect(mapStateToProps, actions)(TrackDriver);
  </code></pre>