React-Native: Get rotation angle of react-native-maps

Question

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?

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) => {
    this.setState({ loading: loadingFlag });
    this.setState({ error });
  }
  onLayout = () => {
    const { origin, des } = this.props.liveLocation;
    console.log(origin);
    console.log(des);
    setTimeout(
        () => {
            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 && IntervalFlag === 0) {
      IntervalFlag = 1;
      this.interval = setInterval(() => this.props.trackDirections(pool, liveLocation.des), 3000);
     }
  }

  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.Animated 
            coordinate={{ latitude: Number(origin.lat), longitude: Number(origin.lng) }}
            ref={marker => { this.marker = marker }}
            style={{ transform: [{
              rotate: origin.heading === undefined ? '0deg' : `${origin.heading}deg`
            }]
          }}
            >
            <Image
              style={{ 
                height: 50,
                width: 50,
                transform: [{
                rotate: '270deg'
                }]
              }}
              source={require('../../assets/car.png')}
            />
          </MapView.Marker.Animated>}

           {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>
      );
    }  
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
      {this.renderContent()}
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    liveLocation: state.activepool.liveLocation
  };
};
export default connect(mapStateToProps, actions)(TrackDriver);

Answer 1

Have you tried flat prop of Marker? https://github.com/react-community/react-native-maps/blob/master/docs/marker.md