How do I drop a pin at location on React Native MapView press?

Question

https://facebook.github.io/react-native/docs/mapview.html

I am looking for an example on how to press on the map to create an annotation that location.

I know how to add the annotation, but do not know how to get the coordinates of where I just pressed.

Answer 1

I can't see anything about an onPress event in the react-native MapView docs or code - But found this on github: https://github.com/lelandrichardson/react-native-maps - looks pretty good and has an onPress event which returns the coordinates (https://github.com/lelandrichardson/react-native-maps#mapview-events)

Hope this helps!

Answer 2

I use the onPress method on the MapView like this:

class DefaultMarkers extends React.Component {

     constructor(props) {
         super(props);
         this.state = {
            markers: [],
         };
     }

     onMapPress(e) {
         this.setState({
            markers: [
                ...this.state.markers,
                {
                   coordinate: e.nativeEvent.coordinate,
                   key: id++,
                },
             ],
          }
       );
     }

     render() {
         return (
            <View style={styles.container}>
                <MapView
                   style={styles.map}
                   onPress={e => this.onMapPress(e)}
                >
                   {this.state.markers.map(marker => (
                       <Marker
                          key={marker.key}
                          coordinate={marker.coordinate}
                       />
                   ))}
                </MapView>
            </View>
        );
    }
}

Check out the full example full example on the react-native-maps github