https://github.com/dev-chief/react-native-maps-draw
Interactive drawing of polygons on the map.
https://github.com/dev-chief/react-native-maps-draw
canvas draw expo polygon-overlay react-native react-native-maps react-native-maps-draw
Last synced: 3 months ago
JSON representation
Interactive drawing of polygons on the map.
- Host: GitHub
- URL: https://github.com/dev-chief/react-native-maps-draw
- Owner: dev-chief
- License: mit
- Created: 2021-06-05T18:36:11.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-06T15:05:05.000Z (over 1 year ago)
- Last Synced: 2025-03-01T20:35:44.336Z (3 months ago)
- Topics: canvas, draw, expo, polygon-overlay, react-native, react-native-maps, react-native-maps-draw
- Language: TypeScript
- Homepage:
- Size: 9.56 MB
- Stars: 51
- Watchers: 2
- Forks: 18
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
```bash
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](https://github.com/software-mansion/react-native-gesture-handler) & [react-native-svg](https://github.com/react-native-community/react-native-svg), and follow theirs installation instructions.
## 🦥 Motivation
- 💚 I love [React Native](https://reactnative.dev/)
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](https://github.com/dev-event/react-native-maps-draw/blob/main/example/src/App.tsx)
```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(null);
const convertByPoint = async (item: any) =>
await mapRef.current?.coordinateForPoint(item);
const handlePolygon = useCallback(
(_: any, index: number) => (
),
[polygon.polygons]
);
return (
{...rest}
{... && (
)}
);
}
```
## 🎉 Example
Checkout the example [here](https://github.com/dev-event/react-native-accordion).
## ✌️ Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
## Author
Reach out to me at one of the following places!
- E-mail [email protected]
## License
[](http://badges.mit-license.org)
- **[MIT license](http://opensource.org/licenses/mit-license.php)**