React native map draw a polygon on map press

React native map draw a polygon on map press

React native map draw a polygon on map press.

To draw a polygon on a map in React Native when the user presses on the map, you can use the react-native-maps library along with the PanResponder to capture the touch events and draw the polygon accordingly. Here’s an example of how you can achieve this:

Firstly, make sure you have installed react-native-maps and linked it to your project:

npm install react-native-maps

Here’s an example code snippet:


import React, { useState } from 'react';
import MapView, { Polygon } from 'react-native-maps';
import { View, StyleSheet } from 'react-native';

const MapWithPolygon = () => {
  const [coordinates, setCoordinates] = useState([]);
  const [polygonCoordinates, setPolygonCoordinates] = useState([]);

  const handleMapPress = (event) => {
    const newCoordinates = [...coordinates, event.nativeEvent.coordinate];

    if (newCoordinates.length >= 3) {

  return (
    <View style={styles.container}>
          latitude: /* Initial latitude */,
          longitude: /* Initial longitude */,
          latitudeDelta: /* Some value */,
          longitudeDelta: /* Some value */,
        {polygonCoordinates.length > 0 && (
            fillColor="rgba(0, 0, 255, 0.5)" // Set the fill color for the polygon
            strokeColor="rgba(0, 0, 255, 1)" // Set the stroke color for the polygon

const styles = StyleSheet.create({
  container: {
    flex: 1,
  map: {
    flex: 1,

export default MapWithPolygon;

This code sets up a MapView component and listens for onPress events. When the user presses the map, it captures the coordinates and adds them to the coordinates state. If there are at least three coordinates collected, it updates the polygonCoordinates state, which draws the polygon on the map using the Polygon component from react-native-maps.

You can modify the initial region and styling properties according to your requirements.

Remember to handle the actual initial region, latitude, and longitude values appropriately for your use case.

Post Created 130

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top