[Bug]: marker views not propagating press events from their children

[boovius]

trafficstars

Mapbox Implementation

Mapbox

Mapbox Version

10.16.4

React Native Version

0.73.1

Platform

iOS

@rnmapbox/maps version

10.1.19

Standalone component to reproduce

import Mapbox from '@rnmapbox/maps'
import React, {
  createRef
} from 'react'
import {
  Image,
  Pressable,
  ViewStyle,
} from 'react-native'

import Images from '@/constants/images'

type Props = {
  style?: ViewStyle,
}

export const mapRef = createRef<Mapbox.MapView>()
export const cameraRef = createRef<Mapbox.Camera>()

const POIMap = ({
  style = {},
}: Props) => {

  return (
    <Mapbox.MapView
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
      }}
      onPress={() => console.log('pressing the map')}
    >
      <Mapbox.Camera
        ref={cameraRef}
        defaultSettings={{
          centerCoordinate: [0,0],
          zoomLevel: 9,
        }}
        minZoomLevel={1}
        maxZoomLevel={18}
      />
      <Mapbox.MarkerView
        key={'MarkerView'}
        id={'foobar'}
        coordinate={[2.1901266872462024, 41.378911532404516]}
        isSelected={false}
      >
        <Pressable
          style={{
            width: 44,
            height: 44,
            alignItems: 'center',
            justifyContent: 'space-around',
          }}
          onPress={() => console.log('pressing the marker view')}>
          <Image
            style={{
              width: 44,
              height: 44,
              marginVertical: 8,
            }}
            resizeMode="contain"
            source={Images.poiKinds.mapPin.inactive.eat}
          />
        </Pressable>
      </Mapbox.MarkerView>
    </Mapbox.MapView>
  )
}

export default POIMap

Observed behavior and steps to reproduce

Map shows the child of the MarkerView rendered nicely. However when clicking upon the marker, no event seems to be propagated. No logs come out for the onPress event of the Pressable component used as a child of the MarkerView.

Expected behavior

The console log of 'pressing the marker view' should be seen in the logs. It is not.

Notes / preliminary analysis

I've tried using a PointAnnotation but cannot get an <Image /> component from ReactNative to render at all when using that as a child of the PointAnnotation.

Have tried all sorts of things. This is very frustrating. Any help would be greatly, greatly appreciated!

Additional links and references

No response

[LovroKCoreLine]

I have a similar issue on iOS, on android it seems to be working normally

Also the onPress on MapView, onTouchMove and onTouchEnd don't work, while onTouchStart does

On MarkerView, the onPressIn and onPressOut work, but onPress doesn't

Seems to be a general event propagation issue on iOS.

Also using rnmapbox/maps, version 10.1.11 with default mapbox version, react native version 0.72.6

[connorpmullins]

This is only happening on iPhone XS for us. Same for you all?

[connorpmullins]

A potential solution is to temporarily use onPressOut.

[ellora-virtue]

I am also having this issue on rnmapbox/maps version 10.1.27, react native version 0.71.0 and it's only happening on iOS, not Android. I'm currently using onPressIn as a workaround but hoping this'll get fixed soon! 🤞

Simple code example:

 <Mapbox.MarkerView
    id={id}
    coordinate={coordinate}
    anchor={{ x: 0.5, y: 1 }}
    allowOverlap
  >
    <Pressable onPress={onPress}> // this `onPress` never gets triggered
      {...other content}
    </Pressable>
  </Mapbox.MarkerView>

[Roshdy]

I'm using 10.1.33 with rn 0.76.6 and it's not working for iOS AND Android, even the suggested workaround is not propagating onPressIn or onPressOut

[Roshdy]

After checking MarkerView code, it has

onTouchEnd={(e) => {
  e.stopPropagation();
}}

So I managed to use onTouchStart, and now it's working for me

[rohit9625]

After checking MarkerView code, it has

onTouchEnd={(e) => {
  e.stopPropagation();
}}

Why don't we remove that e.stopPropagation ()?