react-native-maps-draw's Introduction

React Native Maps Draw (Polygon)

Interactive drawing of polygons on the map. Beta version

Made with ❤️ by developer for developers

Thanks

Please, click on ⭐ button.

Installation

yarn add @dev-event/react-native-maps-draw
# or
npm install @dev-event/react-native-maps-draw

Also, you need to install react-native-gesture-handler & react-native-svg, and follow theirs installation instructions.

🦥 Motivation

💚 I love React Native

Big love and gratitude to all people who are working on React Native, Expo and React Native Navigation!

Usage

For more complete example open App.tsx

import MapViewGestures from 'react-native-maps-draw';
import type { TTouchPoint } from 'react-native-maps-draw';
import MapView, { Polygon, Marker } from 'react-native-maps';

const AnimatedPolygon = Animated.createAnimatedComponent(Polygon);

export default function App() {
  const mapRef = useRef<MapView>(null);

  const convertByPoint = async (item: any) =>
    await mapRef.current?.coordinateForPoint(item);

  const handlePolygon = useCallback(
    (_: any, index: number) => (
      <AnimatedPolygon
        key={index}
        coordinates={polygon.polygons}
        fillColor="rgba(255, 171, 171, 0.01)"
        strokeColor="rgba(255, 171, 171, 0.88)"
        strokeWidth={1}
      />
    ),
    [polygon.polygons]
  );


  return (
    <SafeAreaView style={styles.container}>
      <MapView ref={mapRef} style={styles.map} onMapReady={handleMapReady}>
        {...rest}
      </MapView>

      {... && (
        <MapViewGestures
          points={points}
          widthLine={3}
          colorLine={'green'}
          onEndDraw={handleCanvasEndDraw}
          onChangePoints={setPoints}
          backgroundCanvas={'rgba(0, 0, 0, 0.0)'}
          convertByPoint={convertByPoint}
        />
      )}
    </SafeAreaView>
  );
}