{"id":26327386,"url":"https://github.com/dev-chief/react-native-maps-draw","last_synced_at":"2025-07-20T00:32:18.654Z","repository":{"id":57107789,"uuid":"374187376","full_name":"dev-chief/react-native-maps-draw","owner":"dev-chief","description":"Interactive drawing of polygons on the map. ","archived":false,"fork":false,"pushed_at":"2023-12-06T15:05:05.000Z","size":10025,"stargazers_count":53,"open_issues_count":9,"forks_count":18,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-03T08:07:54.075Z","etag":null,"topics":["canvas","draw","expo","polygon-overlay","react-native","react-native-maps","react-native-maps-draw"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-chief.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-05T18:36:11.000Z","updated_at":"2025-03-19T19:50:08.000Z","dependencies_parsed_at":"2024-10-27T19:25:10.381Z","dependency_job_id":"29fee685-5ccd-4207-9771-7627806e3672","html_url":"https://github.com/dev-chief/react-native-maps-draw","commit_stats":{"total_commits":19,"total_committers":4,"mean_commits":4.75,"dds":0.1578947368421053,"last_synced_commit":"4525f1aa28d22c33bc62409dd4cd0d1072d38b75"},"previous_names":["dev-chief/react-native-maps-draw","dev-event/react-native-maps-draw"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/dev-chief/react-native-maps-draw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-maps-draw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-maps-draw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-maps-draw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-maps-draw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-chief","download_url":"https://codeload.github.com/dev-chief/react-native-maps-draw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-chief%2Freact-native-maps-draw/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266048564,"owners_count":23868741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","draw","expo","polygon-overlay","react-native","react-native-maps","react-native-maps-draw"],"created_at":"2025-03-15T20:18:47.900Z","updated_at":"2025-07-20T00:32:18.621Z","avatar_url":"https://github.com/dev-chief.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./drawes.gif\" height=\"500\" title=\"React Native Maps Draw Polygon\"   alt=\"Accordion Animated\" style=\"box-shadow: 0 20px 30px 3px rgba(9, 9, 16, 0.2);\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 align=\"center\"\u003eReact Native Maps Draw (Polygon)\u003c/h1\u003e\n\u003cp align=\"center\"\u003eInteractive drawing of polygons on the map. Beta version\u003c/p\u003e\n\u003ch6 align=\"center\"\u003eMade with ❤️ by developer for developers\u003c/h6\u003e\n\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"http://img.shields.io/travis/badges/badgerbadgerbadger.svg?style=flat-square\" alt=\"build\"/\u003e\n\u003cimg src=\"https://img.shields.io/github/issues/dev-event/react-native-maps-draw\" alt=\"build\"/\u003e\n\u003cimg src=\"https://img.shields.io/bitbucket/pr-raw/dev-event/react-native-maps-draw\" alt=\"build\"/\u003e\n\u003cimg src=\"http://img.shields.io/:license-mit-blue.svg?style=flat-square\" alt=\"build\"/\u003e\n\u003c/p\u003e\n\n\n\n## Thanks\n\u003cp\u003ePlease, click on ⭐ button.\u003c/p\u003e\n\n\n## Installation\n\n```bash\nyarn add @dev-event/react-native-maps-draw\n# or\nnpm install @dev-event/react-native-maps-draw\n```\n\u003e Also, you need to install [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) \u0026 [react-native-svg](https://github.com/react-native-community/react-native-svg), and follow theirs installation instructions.\n\n##  🦥 Motivation\n- 💚 I love [React Native](https://reactnative.dev/)\n\n\nBig love and gratitude to all people who are working on React Native, Expo and React Native Navigation!\n\n## Usage\n\nFor more complete example open [App.tsx](https://github.com/dev-event/react-native-maps-draw/blob/main/example/src/App.tsx)\n\n```tsx\nimport MapViewGestures from 'react-native-maps-draw';\nimport type { TTouchPoint } from 'react-native-maps-draw';\nimport MapView, { Polygon, Marker } from 'react-native-maps';\n\nconst AnimatedPolygon = Animated.createAnimatedComponent(Polygon);\n\nexport default function App() {\n  const mapRef = useRef\u003cMapView\u003e(null);\n\n  const convertByPoint = async (item: any) =\u003e\n    await mapRef.current?.coordinateForPoint(item);\n\n  const handlePolygon = useCallback(\n    (_: any, index: number) =\u003e (\n      \u003cAnimatedPolygon\n        key={index}\n        coordinates={polygon.polygons}\n        fillColor=\"rgba(255, 171, 171, 0.01)\"\n        strokeColor=\"rgba(255, 171, 171, 0.88)\"\n        strokeWidth={1}\n      /\u003e\n    ),\n    [polygon.polygons]\n  );\n\n\n  return (\n    \u003cSafeAreaView style={styles.container}\u003e\n      \u003cMapView ref={mapRef} style={styles.map} onMapReady={handleMapReady}\u003e\n        {...rest}\n      \u003c/MapView\u003e\n\n      {... \u0026\u0026 (\n        \u003cMapViewGestures\n          points={points}\n          widthLine={3}\n          colorLine={'green'}\n          onEndDraw={handleCanvasEndDraw}\n          onChangePoints={setPoints}\n          backgroundCanvas={'rgba(0, 0, 0, 0.0)'}\n          convertByPoint={convertByPoint}\n        /\u003e\n      )}\n    \u003c/SafeAreaView\u003e\n  );\n}\n```\n\n\n## 🎉 Example\n\nCheckout the example [here](https://github.com/dev-event/react-native-accordion).\n\n\n\n## ✌️ Contributing\n\nPull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.\n\n## Author\n\nReach out to me at one of the following places!\n\n- E-mail \u003ca href=\"#\" target=\"_blank\"\u003eeffectwaater@gmail.com\u003c/a\u003e\n\n\n## License\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-chief%2Freact-native-maps-draw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-chief%2Freact-native-maps-draw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-chief%2Freact-native-maps-draw/lists"}