[Bug]: PointAnnotation is displayed below other properties IOS

[irvingAlto]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.74.0

Platform

iOS

@rnmapbox/maps version

10.1.28

Standalone component to reproduce

import React, { Image, useRef } from 'react';
import {
  MapView,
  ShapeSource,
  SymbolLayer,
  Images,
  PointAnnotation,
} from '@rnmapbox/maps';

const Component = () => {
  const pointAnnotationRefs = useRef({});
  const imagesUsedInMap = {'TOP_ID': { uri: 'image-url' }}
  const topPlaces = [{"geometry": {"coordinates": [-118.2481904, 34.056944]}, "id": "TOP_ID"}]

  return (
    <MapView>
      {imagesUsedInMap && <Images images={imagesUsedInMap} />}
        <ShapeSource
          id='placesShape'
          shape={{
            type: 'FeatureCollection',
            features: [{ id: '123', "geometry": {"coordinates": [-118.251219, 34.052148]} }],
          }}
        >
          <SymbolLayer
            id='placesLayer'
            style={{ iconImage: [
              'case',
              ['==', ['to-number', ['get', 'isFavorite']], 1],
              'favorite',
              ['to-string', ['get', 'icon']],
            ] }}
          />
        </ShapeSource>

      {topPlaces?.length ? topPlaces.map((p) => (
        <PointAnnotation
          ref={(ref) => {
            pointAnnotationRefs.current[p.id] = ref;
          }}
          id={p.id}
          key={p.id + '--top'}
          coordinate={p.geometry.coordinates}
        >
          <Image
            source={imagesUsedInMap[p.id]}
            defaultSource={require('assets/img/no_image_placeholder.png')}
            style={{ width: 40, height: 40, borderRadius: 100, borderWidth: 1.5 }}
            fadeDuration={0}
            key={p.id + '--img'}
            onLoad={() => {
              pointAnnotationRefs?.current[p.id].refresh();
            }}
          />
        </PointAnnotation>
      )) : <></>}
  </MapView>
  )
}

Observed behavior and steps to reproduce

The previous code renders a list of icons and images that represent places in real life, however we have the issue that the icons appear above the images

I tried to correct this using the "symbolSortKey" and "belowLayerID" properties without success. If there is a way to achieve this it would be of great help.

Expected behavior

The images (PointAnnotations) are displayed above the icons (SymbolLayers), this is how looks in android:

Notes / preliminary analysis

No response

Additional links and references

No response

[irvingAlto]

Alternatively, try moving the images to the MarkerView component which corrects the problem with the icons but this results in some images not being displayed, I assume this is because the MarkerView does not have the refresh() method to update the Marker when the image finishes loading, is there a way to use the images with the MarkerView? Any way to correct the issue of the icons overlapping the images works for me