[Bug]: MarkerView Visibility Issue on Android (V11)

[ysainson]

Mapbox Implementation

Mapbox

Mapbox Version

11.0.0

Platform

Android

@rnmapbox/maps version

10.1.0-rc.1

Standalone component to reproduce

import React, { useState } from "react";

import { Button, Platform, View } from "react-native";
import Mapbox from "@rnmapbox/maps";

const MapView = () => {
  const [isVisible, setIsVisible] = useState(true);

  console.log(isVisible);

  // render
  return (
    <>
      <Mapbox.MapView
        style={{ flex: 1 }}
        styleURL="mapbox://styles/mapbox/standard-beta"
      >
        <Mapbox.StyleImport
          id="basemap"
          existing
          config={{
            lightPreset: "dusk",
            // @ts-ignore
            showRoadLabels: false,
            // @ts-ignore
            showPlaceLabels: false,
            // @ts-ignore
            showTransitLabels: false,
            // @ts-ignore
            showPointOfInterestLabels: false,
          }}
        />
        <Mapbox.Camera
          centerCoordinate={[-122.008921, 37.334508]}
          pitch={0}
          zoomLevel={14}
        />

        {isVisible ? (
          <Mapbox.MarkerView
            // allowOverlap => Visible at first if true
            coordinate={[-122.008921, 37.334508]}
          >
            <View style={{ width: 50, height: 50, backgroundColor: "red" }} />
          </Mapbox.MarkerView>
        ) : null}
      </Mapbox.MapView>
      <View style={{ height: 100, justifyContent: "center" }}>
        <Button
          title="Toggle visibility"
          onPress={() => setIsVisible(!isVisible)}
        />
      </View>
    </>
  );
};

export default MapView;

Observed behavior and steps to reproduce

Issue Description

I'm encountering an issue with the visibility of Mapbox.MarkerView on Android. The marker view doesn't appear initially. It only appears after toggling the visibility three times using a button that changes the isVisible state. Furthermore, if the allowOverlap prop is passed to Mapbox.MarkerView, it is visible at first but disappears and never reappears upon triggering the visibility toggle button.

Steps to Reproduce

1. Open the map view containing the Mapbox.MarkerView.
   Initially, the marker is not visible.
2. Click the "Toggle visibility" button.
   Surprisingly, the marker appears only when the isVisible state is set to false after three toggles, which is contrary to the expected behavior. It should appear when isVisible is true.

Additionally, I receive the following error in my full app, although I couldn't reproduce it in this sample:

Trying to add view annotation that was already added before! Please consider deleting annotation view (com.rnmapbox.components.annotation.RNMBXMarkerViewContent(e04...) beforehand.

Observed behavior

• The marker view does not appear on the initial render.
• Requires three button presses to display the marker when isVisible is set to false.
• Inconsistent behavior when using the allowOverlap prop.
• Error message regarding adding already added view annotations in the full app.

Expected behavior

• The marker should be visible when the component mounts if isVisible is true.
• Toggling the visibility with the button should show/hide the marker view on each press.
• No errors about adding view annotations that were already added.

Notes / preliminary analysis

No response

Additional links and references

No response