[Bug]: Ornament position differs on Android and iOS

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS, Android

@rnmapbox/maps version

10.1.6

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  Camera,
} from '@rnmapbox/maps';

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}} compassPosition={{ top: 0, right: 20 }}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

On Android, the position of ornaments (e.g. compass or scale bar) doesn't respect safe area, but on iOS it does. So if I set the top position to 0, the Android build will overlay the device's top bar (with clock, wifi icons, etc), while being below on iOS. So what I have to do is set top position to 0 if iOS and use something like react-native-safe-area-context to retrieve safe area values if Android.

Please note, I have only tested this on one physical iOS and Android phone, but I seem to get the same issue on iOS/Android simulators as well.

Expected behavior

Behaviour on iOS and Android should match.

Notes / preliminary analysis

No response

Additional links and references

No response

Begin with the standalone JavaScript reproduction using MapView, Camera, and compassPosition, and compare ornament placement on Android and iOS with version 10.1.6. Trace the platform-specific safe-area behavior; the issue is done when compass and scale-bar positions consistently avoid the device top bar on both platforms.