React-native-maps: get marker properties onMarkerPress

[allthetime]

Hey, so I started by creating a custom marker with a TouchableOpacity inside which offered a high degree of control, but then realized that it didn't work on Android and switched to onMarkerPress on the MapView. From what I've seen so far it looks like you can only get the position of the touch, and the coordinate of the marker from the event that is passed to the callback.

I attempted to modify MapMarker.js to include the key prop but I haven't been able to actually expose the prop at all and am confused as to where it actually exists.

Anyway, I'm guessing I'm missing something, how am I supposed to identify the marker that has been pressed so that I can use it programatically?

[allthetime]

I'll put a pull request in if someone can point me in the right direction... I just don't know (a) how to get access to arbitrary props in MapMarker.js, (b) how to add them to the onMarkerPress callback.

Right now my solution is very ugly: For android, I keep an object mapping LatLng -> markerIndex, and then use event.nativeEvent.coordinate as the key to find the proper index and pass it to the function that onMarkerPress calls. This doesn't work on iOS because nativeEvent doesn't have coordinate attached to it, so I just use the code from my initial attempt with TouchableOpacity.

[aranda-adapptor]

Any progress on this issue? I've also had to implement it by searching on the event.nativeEvent.coordinate. Not ideal, but it does work I guess.

[mattvot]

Here's an example of searching the markers for the pressed marker:

  constructor(props) {
    super(props);
    this._onMarkerPress = e => {
      const coordinate = e.nativeEvent.coordinate;
      const marker = this.props.markers.find(
        m => m.coordinate.latitude === coordinate.latitude && m.coordinate.longitude === coordinate.longitude
      );
      if (marker) {
        this.props.onMarkerPress(marker);
      }
    };
  }

  render() {
    return (
      <MapView
        onMarkerPress={this._onMarkerPress}
      >
        {this.props.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
          />
        ))}
      </MapView>
    );
  }