title: How to place marker when click anywhere on the map view in react-native
body: <p>My requirement is, I need to show the marker on the <code>MaoView</code>, when user clicks anywhere on the map and also need to get coordinates (latitude &amp; longitude) of location where the marker is placed.</p>
  <p>Here's what I tried:</p>
  <pre class="lang-javascript prettyprint-override"><code>class Maps extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              region: {
                  latitude: LATITUDE,
                  longitude: LONGITUDE,
                  latitudeDelta: LATITUDE_DELTA,
                  longitudeDelta: LONGITUDE_DELTA
              },
              marker: {
                  latlng: {
                      latitude: 17.6868,
                      longitude: 83.2185,
                      latitudeDelta: LATITUDE_DELTA,
                      longitudeDelta: LONGITUDE_DELTA
                  }
              }
          };
      }
      
      onMapPress(e) {
          alert(&quot;coordinates:&quot; + JSON.stringify(e.nativeEvent.coordinate));
  
          this.setState({
              marker: [
                  {
                      coordinate: e.nativeEvent.coordinate
                  }
              ]
          });
      }
  
      handleMarkerPress(event) {
          const markerID = event.nativeEvent.identifier;
          alert(markerID);
      }
  
      render() {
          return (
              &lt;MapView
                  identifier={&quot;1&quot;}
                  ref={component =&gt; (this.map = component)}
                  provider={this.props.provider}
                  style={styles.map}
                  region={this.state.region}
                  onPress={this.onMapPress.bind(this)}
                  //onPress={(event) =&gt; this.onMapPress(event)}
                  provider={PROVIDER_DEFAULT}
                  mapType=&quot;standard&quot;
                  zoomEnabled={true}
                  pitchEnabled={true}
                  showsUserLocation={true}
                  followsUserLocation={true}
                  showsCompass={true}
                  showsBuildings={true}
                  showsTraffic={true}
                  showsIndoors={true}
              &gt;
                  &lt;MapView.Marker coordinate={this.state.marker.latlng} /&gt;
              &lt;/MapView&gt;
          );
      }
  }
  </code></pre>