[Bug]: Sibling MarkerViews not observing zIndex style property

[brien-crean]

Mapbox Implementation

Mapbox

Mapbox Version

10.7.0

React Native Version

0.73.7

Platform

Android

@rnmapbox/maps version

10.1.19

Standalone component to reproduce

import React from 'react';
import MapboxGL, {MapView, Camera, MarkerView} from '@rnmapbox/maps';
import {StyleSheet, View} from 'react-native';

function MarkerRed() {
  return (
    <MarkerView
      id={'marker-red'}
      coordinate={[-74.00597, 40.71427]}
      allowOverlap
      style={styles.markerRedZ}>
      <View style={[styles.marker, styles.markerRed]} />
    </MarkerView>
  );
}

function MarkerBlue() {
  return (
    <MarkerView
      id={'marker-blue'}
      coordinate={[-74.00597, 40.71427]}
      allowOverlap
      style={styles.markerBlueZ}>
      <View style={[styles.marker, styles.markerBlue]} />
    </MarkerView>
  );
}

function App() {
  return (
    <MapView style={{flex: 1}}>
      <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
      <MarkerBlue />
      <MarkerRed />
    </MapView>
  );
}

const styles = StyleSheet.create({
  marker: {
    width: 35,
    height: 35,
    borderRadius: 9999,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  markerRed: {
    backgroundColor: 'red',
  },
  markerBlue: {
    backgroundColor: 'blue',
    width: 45,
    height: 45,
  },
  markerRedZ: {
    zIndex: 1,
  },
  markerBlueZ: {
    zIndex: 10,
  },
});

export default App;

Observed behavior and steps to reproduce

MarkerViews are not affected by the zIndex property passed in as a style prop. Therefore it does not seem possible to set a desired order to sibling MarkerView components. As a result the MarkerView that appears on top is the Marker that is closest to the closing </MapView>.

Expected behavior

I would expect <MarkerBlue /> to appear on top if it's zIndex is set higher than the zIndex of <MarkerRed />

Notes / preliminary analysis

Because of this behaviour it does not appear to be possible to programmatically set the order of sibling MarkerViews.

For example the coordinate value for one of the markers may depend on an value becoming available which creates a race condition and may result in it getting put on top regardless of its position within a MapView.

E.g. the blue marker here may not have userLocation available immediately. So when it becomes available it will appear on top of the red marker.

This makes it hard to maintain the desired order of overlapping MarkerViews.

{userLocation && (
  <MarkerBlue coordinate={userLocation} />
)}
<MarkerRed coordinate={[-74.00597, 40.71427]}  />

Additional links and references

N/a