Mapbox.UserLocation blocks Shapesource -> Symbol Layer onPress

[vasilring]

Hi guys, I'm unable to resolve the issue, where UserLocation blocks clicking symbol layer under it. Can anyone suggest what can I do?

I have tried with hotbox, aboveLayerID, belowLayerId props to make it work, but nothing happened. This is small improvised part of my code.

      <Mapbox.UserLocation
        visible={!state.isLoading ? true : false}
      />

    <Mapbox.ShapeSource
      ref={shapeSource}
      id="places"
      shape={state.data}
      onPress={handleShapeSourcePress}
      <Mapbox.Images
        images={{
          'test-marker': require('../../../../assets/map/test.png'),
          'testTwo-marker': require('../../../../assets/map/testtwo.png'),
        }}
      />
      <Mapbox.SymbolLayer
        id="clusterCount"
        sourceID="places"
        style={styles.clusterCountSymbolLayerStyle}
        filter={['has', 'point_count']}
      />
      <Mapbox.SymbolLayer
        id="unclusturedCircle"
        sourceID="places"
        style={styles.unclusteredSymbolLayerStyle}
        filter={['!', ['has', 'point_count']]}
      />
    </Mapbox.ShapeSource>