{"id":38048447,"url":"https://github.com/pavel-corsaghin/react-native-leaflet","last_synced_at":"2026-01-16T20:01:08.507Z","repository":{"id":40465776,"uuid":"402846455","full_name":"pavel-corsaghin/react-native-leaflet","owner":"pavel-corsaghin","description":"A LeafletView component using WebView and Leaflet map for React Native applications","archived":false,"fork":false,"pushed_at":"2025-11-27T15:27:00.000Z","size":4860,"stargazers_count":154,"open_issues_count":22,"forks_count":64,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-11-29T15:19:53.040Z","etag":null,"topics":["leaflet","leaflet-map","react-native"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/pavel-corsaghin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-09-03T17:18:21.000Z","updated_at":"2025-11-27T15:27:04.000Z","dependencies_parsed_at":"2024-06-19T11:25:44.697Z","dependency_job_id":"776e775c-1af0-4c1f-8664-dcc6b492986c","html_url":"https://github.com/pavel-corsaghin/react-native-leaflet","commit_stats":{"total_commits":15,"total_committers":5,"mean_commits":3.0,"dds":0.4666666666666667,"last_synced_commit":"5685e5e753c361c68b9a7ea6c2d553c4358fa4de"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/pavel-corsaghin/react-native-leaflet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavel-corsaghin%2Freact-native-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavel-corsaghin%2Freact-native-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavel-corsaghin%2Freact-native-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavel-corsaghin%2Freact-native-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pavel-corsaghin","download_url":"https://codeload.github.com/pavel-corsaghin/react-native-leaflet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavel-corsaghin%2Freact-native-leaflet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28482215,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["leaflet","leaflet-map","react-native"],"created_at":"2026-01-16T20:01:07.391Z","updated_at":"2026-01-16T20:01:08.463Z","avatar_url":"https://github.com/pavel-corsaghin.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-leaflet\n\nA LeafletView component using WebView and Leaflet map for React Native applications\n\nNotes: This project is replacement for https://github.com/reggie3/react-native-webview-leaflet, which no longer maintain by author and work only with expo.\n\n[![npm](https://img.shields.io/npm/v/react-native-leaflet-view.svg)](https://www.npmjs.com/package/react-native-leaflet-view)\n[![npm](https://img.shields.io/npm/dm/react-native-leaflet-view.svg)](https://www.npmjs.com/package/react-native-leaflet-view)\n[![npm](https://img.shields.io/npm/dt/react-native-leaflet-view.svg)](https://www.npmjs.com/package/react-native-leaflet-view)\n\n\u003cimg src=\"images/android.png\" height=\"600\"\u003e       \u003cimg src=\"images/ios.png\" height=\"600\"\u003e\n\n## Installation\n\nInstall using npm or yarn like this:\n\n```sh\nnpm install --save react-native-leaflet-view\n```\n\nor\n\n```sh\nyarn add react-native-leaflet-view\n```\n\n## react-native configuration \nThis package is required for proper file handling and WebView functionality in React Native:\n- [react-native-webview](https://github.com/react-native-webview/react-native-webview). You can install it using yarn or npm:\n\n```sh\nnpm install --save react-native-webview\n```\n\nor\n\n```sh\nyarn add react-native-webview\n```\n\n## Expo configuration\n\nFor Expo projects, you'll need to add additional dependencies:\n\n```sh\nnpx expo install react-native-webview expo-asset expo-file-system\n```\n\nThese packages are required for proper file handling and WebView functionality in Expo:\n- [react-native-webview docs](https://docs.expo.dev/versions/latest/sdk/webview/)\n- [expo-asset docs](https://docs.expo.dev/versions/latest/sdk/asset/)\n- [expo-file-system docs](https://docs.expo.dev/versions/latest/sdk/filesystem/)\n\nYou need to do this in the root of your project: Copy the required HTML file from the package with this one-liner\n\n```sh\ncp node_modules/react-native-leaflet-view/android/src/main/assets/leaflet.html assets\n```\n\n## Usage with react-native-cli\n\n```js\nimport React from 'react';\nimport { LeafletView } from 'react-native-leaflet-view';\n\nconst DEFAULT_LOCATION = {\n  latitude: -23.5489,\n  longitude: -46.6388\n}\nconst App: React.FC = () =\u003e {\n\n  return (\n    \u003cLeafletView\n      mapCenterPosition={{\n        lat: DEFAULT_LOCATION.latitude,\n        lng: DEFAULT_LOCATION.longitude,\n      }}\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\n## Usage with Expo\n\n```js\n\nimport React, { useEffect, useState } from 'react';\nimport { ActivityIndicator, Alert } from 'react-native';\nimport { Asset } from \"expo-asset\";\nimport { File } from 'expo-file-system';\nimport { LatLng, LeafletView } from 'react-native-leaflet-view';\n\nconst DEFAULT_LOCATION = {\n  latitude: -23.5489,\n  longitude: -46.6388\n}\nconst App: React.FC = () =\u003e {\n  const [webViewContent, setWebViewContent] = useState\u003cstring | null\u003e(null);\n  useEffect(() =\u003e {\n    let isMounted = true;\n\n    const loadHtml = async () =\u003e {\n      try {\n        const path = require(\"./assets/leaflet.html\");\n        const asset = Asset.fromModule(path);\n        await asset.downloadAsync();\n        const htmlContent = await new File(asset.localUri!).text();\n\n        if (isMounted) {\n          setWebViewContent(htmlContent);\n        }\n      } catch (error) {\n        Alert.alert('Error loading HTML', JSON.stringify(error));\n        console.error('Error loading HTML:', error);\n      }\n    };\n\n    loadHtml();\n\n    return () =\u003e {\n      isMounted = false;\n    };\n  }, []);\n\n  if (!webViewContent) {\n    return \u003cActivityIndicator size=\"large\" /\u003e\n  }\n  return (\n    \u003cLeafletView\n      source={{ html: webViewContent }}\n      mapCenterPosition={{\n        lat: DEFAULT_LOCATION.latitude,\n        lng: DEFAULT_LOCATION.longitude,\n      }}\n    /\u003e\n  );\n}\n\nexport default App;\n\n```\n\n## Props\n\n| property            | required | type                            | purpose                                                                                                                                    |\n| ------------------- | -------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| loadingIndicator    | optional | React.ReactElement              | custom component displayed while the map is loading                                                                                        |\n| onError             | optional | function                        | Will receive an error event                                                                                                                |\n| onLoadEnd           | optional | function                        | Called when map stops loading                                                                                                              |\n| onLoadStart         | optional | function                        | Called when the map starts to load                                                                                                         |\n| onMessageReceived   | required | function                        | This function receives messages in the form of a WebviewLeafletMessage object from the map                                                 |\n| mapLayers           | optional | MapLayer array                  | An array of map layers                                                                                                                     |\n| mapMarkers          | optional | MapMarker array                 | An array of map markers                                                                                                                    |\n| mapShapes           | optional | MapShape[]                      | An array of map shapes                                                                                                                     |\n| mapCenterPosition   | optional | {lat: [Lat], lng: [Lng]} object | The center position of the map. This coordinate will not be accurate if the map has been moved manually. However, calling the map's setMapCenterPosition function will cause the map to revert to this location |\n| ownPositionMarker   | optional | Marker                          | A special marker that has an ID of OWN_POSTION_MARKER_ID                                                                                   |\n| zoom                | optional | number                          | Desired zoom value of the map                                                                                                              |\n| doDebug             | optional | boolean                         | A flag for debug message logging                                                                                                           |\n| source              | optional | WebView[\"source\"]               | Loads static html or a uri (with optional headers) in the WebView.                                                                         |\n| zoomControl         | optional | boolean                         | Controls the visibility of the zoom controls on the map.                                                                                   |\n| attributionControl  | optional | boolean                         | Controls the visibility of the attribution control on the map.                                                                             |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavel-corsaghin%2Freact-native-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpavel-corsaghin%2Freact-native-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavel-corsaghin%2Freact-native-leaflet/lists"}