[Bug]: Onpress only works if layers are nested like jsx components

[ronickg]

Mapbox Implementation

Mapbox

Mapbox Version

10.7.10

Platform

Android

@rnmapbox/maps version

10.0.13

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
  VectorSource,
  FillLayer,
} from '@rnmapbox/maps';

//The part which is commeted out works, triggers the on press. The other one doesnt though.

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource
          id="polygonSource"
          onPress={() => {
            console.log('pressed');
          }}
          shape={{
            type: 'Feature',
            properties: {},
            geometry: {
              coordinates: [
                [
                  [4.029480413140874, 49.4026975280301],
                  [4.029480413140874, 46.99045121353802],
                  [11.44274825303006, 46.99045121353802],
                  [11.44274825303006, 49.4026975280301],
                  [4.029480413140874, 49.4026975280301],
                ],
              ],
              type: 'Polygon',
            },
          }}>
          {/* <FillLayer
            id="polygonFill"
            style={{fillOpacity: 0.6, fillColor: 'blue'}}
          /> */}
        </ShapeSource>
        <FillLayer
          id="polygonFill"
          sourceLayerID="polygonSource"
          sourceID="polygonSource"
          style={{fillOpacity: 0.6, fillColor: 'blue'}}
        />
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

No response

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[mfazekas]

@BubbleTrouble14 pls do not use tileUrlTemplates={["..."]} as I won't be able to run this component as is.

[ronickg]

Okay, ill edit it to use a geoJson

[ronickg]

Also I am experiencing some bug after v10.0.13 no fill layers are showing anymore. Even the code above doesn't render anything. It works on ios but not on my androids. Not on the emulator or real device. Also tried the latest rc build no luck. So currenlty sticking with v10.0.13.

[ronickg]

RNMapboxMapsImpl = "mapbox"

[mfazekas]

@BubbleTrouble14 pls correct coordinate in your example as right now the camera is different place than the polygons

[mfazekas]

@BubbleTrouble14 I've released 10.0.15-rc.0 that should fix the layer not rendering issue on android. Pls confirm that.

For the onPress only working for nested layers that's the way it works. We should document it, but I don't see it a huge deal for apps otherwise.

maps/ios/RCTMGL-v10/RCTMGLMapView.swift

Lines 736 to 748 in d793693

	func highestZIndex(sources: [RCTMGLInteractiveElement]) -> RCTMGLInteractiveElement? {
	var layersToSource : [String:RCTMGLInteractiveElement] = [:]
	sources.forEach { source in
	source.getLayerIDs().forEach { layerId in
	if layersToSource[layerId] == nil {
	layersToSource[layerId] = source
	}
	}
	}
	let orderedLayers = mapboxMap.style.allLayerIdentifiers
	return orderedLayers.lazy.reversed().compactMap { layersToSource[$0.id] }.first ?? sources.first
	}

maps/ios/RCTMGL-v10/RCTMGLMapView.swift

Line 758 in d793693

if let source = self.highestZIndex(sources: touchedSources),

maps/ios/RCTMGL-v10/RCTMGLSource.swift

Lines 14 to 22 in d793693

	override func getLayerIDs() -> [String] {
	layers.compactMap {
	if let layer = $0 as? RCTMGLLayer {
	return layer.id
	} else {
	return nil
	}
	}
	}

[ronickg]

@mfazekas Ah makes sense, wasn't sure if it was intentional or not. Using queryRenderedFeaturesAtPoint allows me to do what I need. Thanks