[Bug]: Camera padding affects MarkerView differently on iOS and Android

[ghitier]

Mapbox Implementation

Mapbox

Mapbox Version

10.1.39

React Native Version

0.79.1

Platform

Android, iOS

@rnmapbox/maps version

10.1.39

Standalone component to reproduce

import * as React from "react";
import Mapbox, { Camera, MapView, MarkerView } from "@rnmapbox/maps";
import { View } from "react-native";

Mapbox.setAccessToken("xxxx-your-access-token-xxx");

const MapboxCameraPaddingBugDemo = () => {
  const cameraRef = React.useRef<Camera>(null);

  const setPositionWithPadding = () => {
    if (cameraRef.current) {
      cameraRef.current.setCamera({
        centerCoordinate: [4, 45],
        padding: {
          paddingLeft: 0,
          paddingRight: 0,
          paddingTop: 0,
          paddingBottom: 400,
        },
      });
    }
  };

  React.useEffect(() => {
    // Set the camera position with padding after the component mounts
    const id = setTimeout(setPositionWithPadding, 3000);
    return () => clearTimeout(id);
  }, []);

  return (
    <MapView
      style={{
        flex: 1,
      }}
    >
      <Camera
        ref={cameraRef}
        bounds={{
          ne: [8, 50],
          sw: [0, 40],
        }}
        padding={{
          paddingLeft: 0,
          paddingRight: 0,
          paddingTop: 0,
          paddingBottom: 400,
        }}
      />
      <MarkerView coordinate={[4, 42]}>
        <View
          style={{
            width: 50,
            height: 50,
            backgroundColor: "green",
          }}
        />
      </MarkerView>
      <MarkerView coordinate={[4, 45]}>
        <View
          style={{
            width: 50,
            height: 50,
            backgroundColor: "red",
          }}
        />
      </MarkerView>
      <MarkerView coordinate={[4, 48]}>
        <View
          style={{
            width: 50,
            height: 50,
            backgroundColor: "blue",
          }}
        />
      </MarkerView>
    </MapView>
  );
};

export default MapboxCameraPaddingBugDemo;

Observed behavior and steps to reproduce

With the code example above, the behavior is different on iOS and Android, when you move around the map.

Android	iOS
After the map settles (initial load & camera movement w/ padding), if we move around the map, the MarkerViews disappear where the padding was.	After the map settles (initial load & camera movement w/ padding), if we move around the map, the MarkerViews DO NOT disappear where the padding was.

Expected behavior

I'd expect Android and iOS to behave the same. In my opinion the iOS behavior of ignoring camera padding is better.

Notes / preliminary analysis

Android	iOS
In the fileandroid/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerView.kt, ignoreCameraPadding(true) is not set in the MarkerView options.	In the file ios/RNMBX/RNMBXMarkerView.swift, options.ignoreCameraPadding = true is set in the MarkerView options (on Mapbox 11)

Additional links and references

On android it's possible to set ignoreCameraPadding(true) on the MarkerView, to achieve the same behavior as on iOS : https://docs.mapbox.com/android/maps/api/11.7.1/mapbox-maps-android/com.mapbox.maps/-view-annotation-options/-builder/ignore-camera-padding.html

I'm willing to make a PR for that :)