[Bug]: Ornament position differs on Android and iOS

[AndreasWintherMoen]

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