Android: PointAnnotation renders underneath other layers

When PointAnnotation is rendered in the same space as another layer (such as LineLayer, or RasterLayer) it shows underneath the other layer. This is almost never what you would want.

It would be ideal if we could select where the PointAnnotation renders using something similar to aboveLayerID and belowLayerID, but as a default case I think it should render on top of all the other layers (I can’t think of many cases where you wouldn’t want this anyway).

Repro

<MapboxGL.MapView style={{ flex: 1 }}>
  <MapboxGL.Camera
    bounds={{
      ne: [2, 2],
      sw: [-2, -2],
    }}
  />
  <MapboxGL.ShapeSource
    id="line-source"
    shape={
      {
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: [[1, 1], [-1, -0.7]],
        },
      }
    }
  />

  <MapboxGL.LineLayer
    id="line-layer"
    sourceID="line-source"
  />
  <MapboxGL.PointAnnotation
    id="point"
    coordinate={[0, 0]}
  />
</MapboxGL.MapView>

Changing the order of the elements in code appears to have no effect.

Interestingly if you put content in the PointAnnotation it renders on top with iOS and under in android.

        <MapboxGL.PointAnnotation
          id="point"
          coordinate={[-0.1, 0]}
        >
          <Text>test</Text>
        </MapboxGL.PointAnnotation>

By pushing it under one of the builtin layers on android this behaviour can be changed eg:

        <MapboxGL.LineLayer
          id="line-layer"
          sourceID="line-source"
          style={{ lineWidth: 8, lineColor: 'white' }}
          belowLayerID={Platform.OS === 'android' ? 'mapbox-android-symbol-layer-1' : undefined}
        />

Versions:

• Platform: Both
• Device: iPhone 11 13.4, Pixel 2 8.1
• Emulator/ Simulator: have tried on both emulator and physical
• react-native-mapbox-gl Version 8.0.0-rc1
• React Native Version 0.62

[ydhnwb]

any update of this?

[roncodes]

+1 will try and use SymbolLayer for now, but would be nice if PointAnnotation could be rendered above LineLayer on android