Create dedicated Compass component #2402
Description
Using the MapView's compassImage property to display a custom compass produces some challenges:
- Dynamically sizing the compass is impossible - the source image is displayed at its original size
- Shadow needs to be "baked into" the image file, meaning that if the image rotates, the shadow rotates with it.
- Any animation in the compass image is impossible - it's a static image.
(Discussed in #2352.)
The obvious solution would be to display a React Native view, and use the map's heading to rotate it. This is something you could easily do in a native app, but the React Native bridge bottleneck makes it unworkable - even with debouncing/optimizations, the lag is really bad.
I did a quick proof of concept that shows how we could provide a <Compass /> component that does nothing except render children and rotate according to the map rotation, as shown.