Rotate user location based on heading

CustomUserLocation.js

import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';

import sheet from '../styles/sheet';
import myIcon from '../assets/example.png';

import BaseExamplePropTypes from './common/BaseExamplePropTypes';
import Page from './common/Page';

const mapStyles = {
  icon: {
    iconImage: myIcon,
    iconAllowOverlap: true,
  },
};

class CustomUserLocation extends React.Component {
  static propTypes = {
    ...BaseExamplePropTypes,
  };

  constructor(props) {
    super(props);
    this.state = {
      coordinates: [0, 0],
      heading: 0,
    };
  }

  buildFeatureCollection = () => ({
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: this.state.coordinates,
        },
      },
    ],
  });

  onLocationUpdate = ({coords: {longitude, latitude, heading}}) =>
    this.setState({
      coordinates: [longitude, latitude],
      heading,
    });

  render() {
    const featureCollection = this.buildFeatureCollection();
    return (
      <Page {...this.props}>
        <MapboxGL.MapView style={sheet.matchParent}>
          <MapboxGL.UserLocation
            visible={true}
            onUpdate={this.onLocationUpdate}
          />
          <MapboxGL.ShapeSource
            id="customUserLocation"
            shape={featureCollection}>
            <MapboxGL.SymbolLayer
              id="customUsserLocation"
              style={{...mapStyles.icon, iconRotate: this.state.heading}}
            />
          </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
      </Page>
    );
  }
}

export default CustomUserLocation;