[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

[jgregory-apogee]

We're observing the same behavior. We have map markers that are loaded in batches, and we want the markers from later batches to show below the markers from earlier batches. We are both sorting the markers array each time a new batch comes in and also adding a zIndex style on each marker, but new markers still show on top of old markers. Once all markers are loaded, if we leave the map screen and return to it, the markers then show in the correct z-order.

[mfazekas]

@jgregory-apogee marker views are based on Mapbox view annotation.

There order is based on selected is top on non selected, otherwise views added later are top of views added earlier. RN zIndex will not have affect on this.
https://docs.mapbox.com/ios/maps/guides/markers-and-annotations/view-annotations/#specify-order

[jgregory-apogee]

Thanks for the quick response, @mfazekas!

I was hoping that pushing markers to the end of the list of <SearchMap> children would render them on top, but it looks like it doesn't. I almost got the behavior I wanted by forcing two renders each time a batch of markers comes in: one render with an empty marker list and an immediate follow-up render with all the markers in the expected order. This does fix the z-index issue, but with the unacceptable trade-off of all markers visibly disappearing for half a second or so before the second render.

I will keep trying things, and I appreciate the help!

[jgregory-apogee]

If anyone else is hitting this issue, I was able to work around it by briefly foiling the key prop on the markers each time a new batch comes in. This results in an occasional tiny flicker on the markers, but generally not noticeable.

const MapMarkers = ({ data }) => {
    const markers = useMemo(() => {
        return data.map((d) => ({
            id: d.id,
            coords: d.coords,
            zIndex: getZIndex(d),
        })
        .sort((a, b) => a.zIndex - b.zIndex);
    }, [data]);

    const [shouldBustMarkerMemos, setShouldBustMarkerMemos] = useState(false);
    useEffect(() => {
        setShouldBustMarkerMemos(true);
        setTimeout(() => setShouldBustMarkerMemos(false), 0);
    }, [data]);

    return sortedMarkers.map((marker) => {
        return (
            <MarkerView
                key={shouldBustMarkerMemos ? `${Math.random()}` : marker.id}
                id={marker.id}
                coordinate={marker.coords}
            >
                ...
            </MarkerView>
        );
    });
}