how to get marker click event?

[yadav-saurabh]

How can I get the on press event on the marker?

I tried one using TouchableOpacity but didn't work on the text click instead works when clicking far apart the text.

 cityPressed = marker => {
    console.log(marker.name);
  };

  renderMarker = (marker, i) => {
    return (
      <Marker key={marker.id || i} marker={marker} preserveMarkerAspect>
        <TouchableOpacity onPress={() => this.cityPressed(marker)}>
          <Text>{marker.name}</Text>
        </TouchableOpacity>
      </Marker>
    );
  };

[ahushh]

<Marker onPress={(geography, event) => console.log('onPress', geography, event) } /> There are also onPressIn, onPressOut and onLongPress props. Check for reference: https://github.com/ahushh/react-native-simple-maps/blob/3d48052b8993d22d1ab4c58cff90882f42b6167f/src/Marker.js#L19

[yadav-saurabh]

@ahushh Tried them on in the example linked below but none of them seems to be working.

https://github.com/ahushh/react-native-simple-maps/blob/3d48052b8993d22d1ab4c58cff90882f42b6167f/examples/react-native.jsx

[yadav-saurabh]

here is the code I am using and none of the onpress props is working.

<View style={styles.mapWrapper}>
  <ZoomableMap
    minScale={MIN_ZOOM}
    maxScale={MAX_ZOOM}
    projectionConfig={{ yOffset: -15, xOffset: -40 }}
    initialZoom={DEFAULT_ZOOM}
    canvasStyle={{ backgroundColor: 'transparent' }}
    viewStyle={{ backgroundColor: 'transparent' }}>
    <Geographies geography={geoFile} disableOptimization>
      {(geographies, projection) =>
        geographies.map((geo, i) => (
          <Geography
            key={i}
            geography={geo}
            projection={projection}
            style={{
              default: style,
              pressed: style,
            }}
          />
        ))
      }
    </Geographies>
    {markers.map(marker => (
      <Marker
        key={marker.name}
        marker={marker}
        onLongPress={() => console.log('marker press')}
        onPressOut={() => console.log('marker press')}
        onPressIn={() => console.log('marker press')}
        onPress={() => console.log('marker press')}>
        <Svg
          width={MARKER_ICON_SIZE}
          height={MARKER_ICON_SIZE}
          viewBox={`0 0 ${MARKER_ICON_SIZE} ${MARKER_ICON_SIZE}`}
          fill="green">
          <Circle
            cx={MARKER_ICON_SIZE / 2}
            cy={MARKER_ICON_SIZE / 2}
            r={MARKER_ICON_SIZE / 2}
            fill={$yellow}
          />
        </Svg>
      </Marker>
    ))}
  </ZoomableMap>
</View>

[dagrinchi]

The documentation and examples are wrong, because the <Marker> component already has the <Svg> wrapper, so this work for me:

<Markers>
  {
    markers.map(item => (
      <Marker
        key={item.id}
        name={item.id}
        marker={item.marker}
        onPressIn={() => {
          alert("OnPressIn!");
        }}
        style={{
          default: {
            opacity: 0.6
          },
          pressed: {
            opacity: 1
          }
        }}
        width={20}
        height={26.662}
      >
        <Path
          data-name="Trazado 533"
          d="M9.995 0a10.08 10.08 0 00-10 10.077 9.939 9.939 0 001.578 5.313l7.641 10.69a.959.959 0 00.78.582.946.946 0 00.782-.582l7.64-10.686a9.974 9.974 0 001.579-5.317A10.078 10.078 0 009.995 0z"
          fill="#000"
        />
        <Path
          data-name="Trazado 534"
          d="M14 10a4 4 0 11-4-4 4 4 0 014 4z"
          fill="#fff"
        />
      </Marker>
    ))
  }
</Markers>