maps: [Bug]: `onPress` not working on Touchable Child component of MarkerView [iOS]

Mapbox Implementation

Mapbox

Mapbox Version

v10

Platform

iOS

`@rnmapbox/maps` version

10.0.0-rc.5

Standalone component to reproduce

import React from 'react';
import { View } from 'react-native';
import Mapbox from '@rnmapbox/maps';


const App = () => {

const markers = [
  { coordinate: [12.338, 45.4385] },
  { coordinate: [10.338, 47.4385] },
  { coordinate: [8.338, 43.4385] },
];

return (
<Mapbox.MapView style={styles.map}>
    <Mapbox.Camera zoomLevel={5} centerCoordinate={[12.338, 45.4385]} />
    {/* Rendering Markers */}
    {markers.map(marker => (
    <Mapbox.MarkerView coordinate={marker.coordinate} allowOverlap>
        <TouchableOpacity onPress={()=>console.log("pressed", marker.coordinate)}>
           <View style={{width: 10, height: 10, backgroundColor: 'red'}} />
        </TouchableOpacity>
    </Mapbox.MarkerView>
    ))}
</Mapbox.MapView>
)}

Observed behavior and steps to reproduce

Touchable Child component inside MarkerView, onPress is not working on iOS. But works on Android. Seems like Map layer is disabling the Markers onPress events

Expected behavior

Touchable Child component inside MarkerView, onPress to work on iOS

Notes / preliminary analysis

No response

Additional links and references

No response

About this issue

Original URL
State: closed
Created a year ago
Comments: 31 (11 by maintainers)

Most upvoted comments

Solution:

  const doubleTapRef = useRef();



    <MarkerView ...>
      <TapGestureHandler
        waitFor={doubleTapRef}
        onActivated={() => {
          console.log("SINGLE TAP");
        }}
      >
        <TapGestureHandler
          maxDelayMs={250}
          ref={doubleTapRef}
          numberOfTaps={2}
          onActivated={() => {
            console.log("DOUBLE TAP");
          }}
        >
          <Animated.View
            style={{ width: 100, height: 100, backgroundColor: "red" }}
          />
        </TapGestureHandler>
      </TapGestureHandler>
    </MarkerView>

Ajmal0197 on Jun 20, 2023

As others mentioned, making use of TapGestureHandlerfixed the situation. Thanks @sascha-kaleidoscode

here is how I used it.

 <Mapbox.MarkerView {...{id, coordinate, allowOverlap}}>
      <TapGestureHandler onBegan={onPress}>
        <View>
          <Icon
            name="MarkerFilled"
            size={size}
          />
        </View>
      </TapGestureHandler>
    </Mapbox.MarkerView>

santhosh-umapathi-appymango on Apr 12, 2023

Yeah can we reactivate this, it doesn’t work for me either.

If I take the sample @mfazekas provided above and pop it into the example app it does work. However if I make my app just that same snippet press events don’t work.

@mfazekas I’m using 10.0.0-rc.10 and react native 0.70.6. Are there any other deps that might be important for getting this functionality to work?

trevorarmstrong on Apr 4, 2023

The same issue for me

anfinil on Apr 3, 2023