title: How to resize shapes drawn on map based on zoom value with react-native-maps
body: <p>I am using <code>react-native-maps</code> to integrate maps in my application. I want to show some sort of radar heading the direction the user is heading, i want to area covered of different distances like 1 km, 5 km, and 10 km. resulting in something like the image below.</p>
  
  <p><a href="https://i.stack.imgur.com/ZlS0h.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZlS0h.jpg" alt="The desire result"></a></p>
  
  <p>My initial solution was to draw shapes using <code>View</code> with position absolute,
  i got something like this with the approach. </p>
  
  <p><a href="https://i.stack.imgur.com/eFZjb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eFZjb.png" alt="enter image description here"></a></p>
  
  <p>The problem with above approach is <code>View</code> height is static, and it doesn't respond to zoom value of the map, also the calculation of <code>View</code> height with respect to distance is non trivial.</p>
  
  <p>My second solution was to draw circles around user marker of certain radius, rather then a full circle, i can create semi circles or semi-semi circles achieve the desire result. But i cannot find any way to draw semi circle with the library <code>react-native-maps</code>. </p>
  
  <p>Any suggestion how can i achieve the desire result?</p>