{"id":15562718,"url":"https://github.com/mym0404/react-native-naver-map","last_synced_at":"2025-04-12T18:48:32.988Z","repository":{"id":230930289,"uuid":"780420345","full_name":"mym0404/react-native-naver-map","owner":"mym0404","description":"Naver Map for React Native - Bring Naver Map to Your React Fingertips","archived":false,"fork":false,"pushed_at":"2025-03-25T06:52:06.000Z","size":10311,"stargazers_count":115,"open_issues_count":1,"forks_count":19,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-12T12:03:02.836Z","etag":null,"topics":["clustering","marker","naver-map","react-native","react-native-naver-map","sdk"],"latest_commit_sha":null,"homepage":"https://mym0404.github.io/react-native-naver-map/","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/mym0404.png","metadata":{"files":{"readme":"README-en.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["mym0404"]}},"created_at":"2024-04-01T12:53:06.000Z","updated_at":"2025-04-11T15:37:26.000Z","dependencies_parsed_at":"2024-04-15T13:00:02.554Z","dependency_job_id":"45eebfed-6e46-4d52-a1ad-5f5636a1373d","html_url":"https://github.com/mym0404/react-native-naver-map","commit_stats":{"total_commits":444,"total_committers":3,"mean_commits":148.0,"dds":"0.011261261261261257","last_synced_commit":"f2c49fd40659fe475a1a41a11f71d8fe470329c1"},"previous_names":["mj-studio-library/react-native-naver-map","mym0404/react-native-naver-map"],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-naver-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-naver-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-naver-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mym0404%2Freact-native-naver-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mym0404","download_url":"https://codeload.github.com/mym0404/react-native-naver-map/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618018,"owners_count":21134197,"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":["clustering","marker","naver-map","react-native","react-native-naver-map","sdk"],"created_at":"2024-10-02T16:16:03.602Z","updated_at":"2025-04-12T18:48:32.958Z","avatar_url":"https://github.com/mym0404.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mym0404"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://mym0404.github.io/react-native-naver-map/\"\u003e\n    \u003cimg width=\"160px\" src=\"https://raw.githubusercontent.com/mym0404/image-archive/master/202404241422605.webp\"\u003e\u003cbr/\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eReact Native Naver Map\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@mj-studio/react-native-naver-map\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@mj-studio/react-native-naver-map.svg?style=flat-square\" alt=\"NPM downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@mj-studio/react-native-naver-map\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@mj-studio/react-native-naver-map.svg?style=flat-square\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Android_SDK-3.18.0-2ea44f?style=flat-square\" alt=\"Android SDK version\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/iOS_SDK-3.18.0-3522ff?style=flat-square\" alt=\"iOS SDK version\"\u003e\n  \u003ca href=\"/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@mj-studio/react-native-naver-map.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ch3 align=\"center\"\u003eBring Naver Map to Your React Fingertips\u003c/h3\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\n- [Documentation(ko)](https://mym0404.github.io/react-native-naver-map/interfaces/NaverMapViewProps.html)\n- [Tutorial(ko) 1 - Installation, Register Console API](https://medium.com/mj-studio/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8A%B8%EB%B8%8C%EB%A1%9C-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-1-%EC%84%A4%EC%B9%98%EC%99%80-%ED%82%A4-%EB%B0%9C%EA%B8%89-%EB%B0%9B%EA%B8%B0-f826d8c0644d)\n- [Tutorial(ko) 2 - Camrae, Position of Map](https://medium.com/mj-studio/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8A%B8%EB%B8%8C%EB%A1%9C-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-2-%EC%B9%B4%EB%A9%94%EB%9D%BC-%EC%9C%84%EC%B9%98-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0-ea39843b31d2)\n\n\u003e [!NOTE]\n\u003e The code comments and Documentation are unfortunately all written in Korean.\n\u003e However, you can use a translator or infer the meaning of the props' names and default values to easily understand and use them, even without knowing Korean.\n\u003e\n\u003e Always remember that you can refer to the Naver Map SDK's [English Official Documentation](https://navermaps.github.io/ios-map-sdk/guide-en/1.html) to get a general idea of how to use it.\n\n\n\u003cimg src=\"https://raw.githubusercontent.com/mym0404/image-archive/master/202404240329848.gif\" width=\"400\" alt=\"preview\"\u003e\n\n## Highlights\n\n### 1. New Architecture Fabric\n\nSupport Table\n\n| React Native Naver Map | React Native                        | Note                                                                                                                                                                          |\n|------------------------|-------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| \u0026ge;`2.1.0`            | \u0026ge; `0.74`                         | Drop Bridge Support \u0026 `0.74` required                                                                                                                                         |\n| \u0026ge;`2.x`              | New Architecture Only               | Drop Old Architecture Support, [**You should turn off bridgeless if want to render http web image marker**](https://github.com/mym0404/react-native-naver-map/discussions/72) |\n| \u0026lt;`2.x`              | Old Architecture + New Architecture |                                                                                                                                                                               |\n\n\n\u003e [!IMPORTANT]\n\u003e The `1.x` version supports the Old Architecture (Bridge), but starting from the `2.x` version, support for it will be discontinued. If your project has not transitioned to the New Architecture, please use the [`1.x` version](https://github.com/mym0404/react-native-naver-map/tree/v1.5.6).\n\n### 2. Detailed API Documentation\n\nWe have structured the [API Docs](https://mym0404.github.io/react-native-naver-map/interfaces/NaverMapViewProps.html) which describe almost all types.\n\nWe have maximized readability and you can check the usage of the desired component types, `Prop`, and `Ref` on the `component` side.\n\n### 3. Expo Support\n\nUsing the [expo config plugin](https://docs.expo.dev/modules/config-plugin-and-native-module-tutorial/), you can easily build in the Expo environment regardless of the architecture.\n\nWhile it cannot be used in Expo Go or Snack, it can easily be used in the [development build](https://docs.expo.dev/develop/development-builds/introduction/) and production environments.\n\n### 4. Marker Performance + Variants\n\n\u003e [!IMPORTANT]\n\u003e `[iOS, Android] x [new arch, old arch] x [debug, release]`\n\u003e **We have tested that it renders correctly under all 8 conditions.**\n\n-  Basic symbols provided by Naver Map (`symbol`)\n-  Local image resources of the React Native project\n-  Local image resources of the native project optimized for performance - Android (Drawable), iOS (Bundle Asset)\n-  HTTP network web images\n-  React Native Custom View passed as `children`\n\n### 5. Seamless API Porting from Native Naver Map SDK\n\nWe support the latest version of the SDK, and you can manipulate the latest features of Naver Map using Props and Commands.\n\n\n## Install\n\n```shell\n# npm\nnpm install --save @mj-studio/react-native-naver-map\n\n# yarn\nyarn add @mj-studio/react-native-naver-map\n\n# expo\nnpx expo install @mj-studio/react-native-naver-map\n```\n\nFor iOS, you should install pods\n\n### Android\n\nFor more detailed settings, please refer to the [Official Documentation](https://navermaps.github.io/android-map-sdk/guide-ko/1.html).\n\n#### 1. Maven repository import\n\nImport Naver SDK Maven Repository to `android/build.gradle`.\n\n```groovy\nallprojects {\n    repositories {\n        maven {\n            url \"https://repository.map.naver.com/archive/maven\"\n        }\n    }\n}\n```\n\n#### 2. Add Naver SDK key to `AndroidManifest.xml`\n\n```xml\n\u003cmanifest\u003e\n    \u003capplication\u003e\n        \u003cmeta-data\n            android:name=\"com.naver.maps.map.CLIENT_ID\"\n            android:value=\"YOUR_CLIENT_ID_HERE\" /\u003e\n    \u003c/application\u003e\n\u003c/manifest\u003e\n```\n\n#### 3. (Optional) Request location permission to `AndroidManifest.xml`\n\nCurrently, this package will request location permission for showing user's current location.\n\n```xml\n\u003cmanifest\u003e\n  \u003cuses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\" /\u003e\n  \u003cuses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\" /\u003e\n  # optional for background location\n  \u003cuses-permission android:name=\"android.permission.ACCESS_BACKGROUND_LOCATION\" /\u003e\n\u003c/manifest\u003e\n```\n\nDetailed information related to permissions is listed [below](#permission).\n\n### iOS\n\nFor more detailed settings, please refer to the [Official Documentation](https://navermaps.github.io/ios-map-sdk/guide-ko/1.html).\n\n#### 1. Set Naver SDK key to `info.plist`\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003c!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\"\u003e\n\u003cplist version=\"1.0\"\u003e\n\u003cdict\u003e\n  \u003ckey\u003eNMFClientId\u003c/key\u003e\n  \u003cstring\u003eYOUR_CLIENT_ID_HERE\u003c/string\u003e\n\u003cdict\u003e\n\u003cplist\u003e\n```\n\n#### 2. (Optional) Set location permission usage description to `info.plist`\n\nCurrently, this package will request location permission for showing user's current location.\n\n```xml\n\u003cplist version=\"1.0\"\u003e\n\u003cdict\u003e\n  \u003ckey\u003eNSLocationAlwaysAndWhenInUseUsageDescription\u003c/key\u003e\n  \u003cstring\u003e{{usage description}}\u003c/string\u003e\n  \u003ckey\u003eNSLocationTemporaryUsageDescriptionDictionary\u003c/key\u003e\n  \u003cdict\u003e\n    \u003ckey\u003e{{your purpose key}}\u003c/key\u003e\n    \u003cstring\u003e{{usage description}}\u003c/string\u003e\n  \u003c/dict\u003e\n  \u003ckey\u003eNSLocationWhenInUseUsageDescription\u003c/key\u003e\n  \u003cstring\u003e{{usage description}}\u003c/string\u003e\n\u003c/dict\u003e\n\u003c/plist\u003e\n```\n\nDetailed information related to permissions is listed [below](#permission).\n\n### Expo\n\n#### 1. Add `expo-build-properties` package\n\nThis is for inject naver maven repository.\n\n```shell\nnpx expo install expo-build-properties\n```\n\n#### 2. Add Config Plugin into `app.json`\n\n```json\n{\n  ...\n  \"plugins\": [\n    [\n      \"@mj-studio/react-native-naver-map\",\n      {\n        \"client_id\": \"{{Naver Map Client Key}}\",\n        // (optional, you can set with expo-location instead of this package)\n        \"android\": {\n          \"ACCESS_FINE_LOCATION\": true,\n          \"ACCESS_COARSE_LOCATION\": true,\n          \"ACCESS_BACKGROUND_LOCATION\": true\n        },\n        // (optional, you can set with expo-location instead of this package)\n        \"ios\": {\n          \"NSLocationAlwaysAndWhenInUseUsageDescription\": \"{{ your location usage description }}\",\n          \"NSLocationWhenInUseUsageDescription\": \"{{ your location usage description }}\",\n          \"NSLocationTemporaryUsageDescriptionDictionary\": {\n            \"purposeKey\": \"{{ your purpose key }}\",\n            \"usageDescription\": \"{{ your location usage description }}\"\n          }\n        }\n      }\n    ],\n    [\n      \"expo-build-properties\",\n      {\n        \"android\": {\n          \"extraMavenRepos\": [\"https://repository.map.naver.com/archive/maven\"]\n        }\n      }\n    ],\n    ...\n  ]\n}\n```\n\nExpo does not require the setup methods for Android and iOS described above.\n\nDetailed information related to permissions is listed [below](#permission).\n\n## Example\n\n```tsx\nconst jejuRegion: Region = {\n  latitude: 33.20530773,\n  longitude: 126.14656715029,\n  latitudeDelta: 0.38,\n  longitudeDelta: 0.8,\n};\n...\n\n\u003cNaverMapView\n  ref={ref}\n  style={{ flex: 1 }}\n  mapType={mapType}\n  layerGroups={{\n    BUILDING: true,\n    BICYCLE: false,\n    CADASTRAL: false,\n    MOUNTAIN: false,\n    TRAFFIC: false,\n    TRANSIT: false,\n  }}\n  initialRegion={jejuRegion}\n  isIndoorEnabled={indoor}\n  symbolScale={symbolScale}\n  lightness={lightness}\n  isNightModeEnabled={nightMode}\n  isShowCompass={compass}\n  isShowIndoorLevelPicker={indoorLevelPicker}\n  isShowScaleBar={scaleBar}\n  isShowZoomControls={zoomControls}\n  isShowLocationButton={myLocation}\n  isExtentBoundedInKorea\n  logoAlign={'TopRight'}\n  locale={'ja'}\n  onInitialized={() =\u003e console.log('initialized!')}\n  onOptionChanged={() =\u003e console.log('Option Changed!')}\n  onCameraChanged={(args) =\u003e console.log(`Camera Changed: ${formatJson(args)}`)}\n  onTapMap={(args) =\u003e console.log(`Map Tapped: ${formatJson(args)}`)}\n\u003e\n  \u003cNaverMapMarkerOverlay\n    latitude={33.3565607356}\n    longitude={126.48599018}\n    onTap={() =\u003e console.log(1)}\n    anchor={{ x: 0.5, y: 1 }}\n    caption={{\n      key: '1',\n      text: 'hello',\n    }}\n    subCaption={{\n      key: '1234',\n      text: '123',\n    }}\n    width={100}\n    height={100}\n  /\u003e\n  {/* Not Working in iOS Old Architecture Yet */}\n  \u003cNaverMapMarkerOverlay*\n    latitude={33.4165607356}\n    longitude={126.48599018}\n    onTap={() =\u003e console.log(1)}\n    anchor={{ x: 0.5, y: 1 }}\n    caption={{\n      key: '1',\n      text: 'hello',\n    }}\n    subCaption={{\n      key: '1234',\n      text: '123',\n    }}\n    width={100}\n    height={100}\n  \u003e\n    \u003cView style={{ width: 100, height: 100, backgroundColor: 'red' }} /\u003e\n  \u003c/NaverMapMarkerOverlay\u003e\n  \u003cNaverMapMarkerOverlay\n    latitude={33.2565607356}\n    longitude={127.8599018}\n    onTap={() =\u003e console.log(1)}\n    anchor={{ x: 0.5, y: 1 }}\n    caption={{\n      key: '1',\n      text: 'hello',\n    }}\n    subCaption={{\n      key: '1234',\n      text: '123',\n    }}\n    width={100}\n    height={100}\n    image={{ uri: 'https://picsum.photos/100/100' }}\n  /\u003e\n  \u003cNaverMapCircleOverlay\n    latitude={33.17827398}\n    longitude={126.349895729}\n    radius={50000}\n    color={'#f2f1'}\n    outlineColor={'#aaa'}\n    outlineWidth={2}\n    onTap={() =\u003e console.log('hi')}\n  /\u003e\n  \u003cNaverMapPolygonOverlay\n    outlineWidth={5}\n    outlineColor={'#f2f2'}\n    color={'#0068'}\n    coords={[\n      { latitude: 33.2249594, longitude: 126.54180047 },\n      { latitude: 33.25683311547, longitude: 126.18193 },\n      { latitude: 33.3332807, longitude: 126.838389399 },\n    ]}\n  /\u003e\n  \u003cNaverMapPathOverlay\n    coords={[\n      { latitude: 33.5249594, longitude: 126.24180047 },\n      { latitude: 33.25683311547, longitude: 126.18193 },\n      { latitude: 33.3332807, longitude: 126.838389399 },\n    ]}\n    width={8}\n    color={'red'}\n    progress={-0.6}\n    passedColor={'green'}\n  /\u003e\n\u003c/NaverMapView\u003e\n```\n\n## Usage\n\n### API Documentation\n\n[Documentation](https://mym0404.github.io/react-native-naver-map/interfaces/NaverMapViewProps.html)\n\nAll codes have JSDoc comments inserted, so you can start developing without Documentation.\n\nHowever, if you want to check exactly what types exist and what properties they mean, please refer to the [Documentation](https://mym0404.github.io/react-native-naver-map/interfaces/NaverMapViewProps.html).\n\n### Permission\n\nPermissions should be managed directly within the app by default.\n\nWe will look at an example of using the [react-native-permissions](https://github.com/zoontek/react-native-permissions) library to manage this.\n\n\u003e[!TIP]\n\u003eIf you are an Expo user, you can indicate that you will be using permissions by referring to [expo-location](https://docs.expo.dev/versions/latest/sdk/location/).\n\u003eTherefore, most of the content below is not necessary, and after examining what permissions are needed and how to specify them, you should follow the usage at [expo-location](https://docs.expo.dev/versions/latest/sdk/location/).\n\nFirst, install and set up the package:\n\n```shell\nyarn add react-native-permissions\n```\n\nPlease refer to the [Usage](https://github.com/zoontek/react-native-permissions#setup) directly for the platform-specific setup method for `react-native-permission` and properly modify `Podfile(iOS)`, `AndroidManifest.xml(Android)`.\n\n#### iOS\n\niOS is involved with three types of permissions:\n\n-  `NSLocationAlwaysAndWhenInUseUsageDescription(\u003e= iOS 11)`\n   - Allows the app to access location information both in the foreground and the background.\n   - From iOS 11, this key should be used instead of NSLocationAlwaysUsageDescription.\n-  `NSLocationWhenInUseUsageDescription`\n   - Allows the app to access location information when it is in the foreground (i.e., when the user is actively using the app).\n-  `NSLocationTemporaryUsageDescriptionDictionary(\u003e= iOS 14)`\n   - Allows the app temporarily access to precise location data. This is used when the app only needs precise location for certain tasks.\n\n\u003e[!TIP]\n\u003eIf your app does not support devices below iOS 11, you do not need to list `NSLocationAlwaysUsageDescription`.\n\u003eIf it does support, then you should set it as well.\n\nThen, in the `Podfile`, you allow the following three permissions:\n\n```ruby\nsetup_permissions([\n  'LocationAccuracy',\n  'LocationAlways',\n  'LocationWhenInUse',\n  ...\n])\n```\n\nActivate the `Background Modes` tab in the app target in Xcode and select the `Location updates` option.\n\nThis is necessary for receiving location in the background, so it does not need to be set if it is not required.\n\n![Xcode config result](https://raw.githubusercontent.com/mym0404/image-archive/master/202404161737676.webp)\n\n#### Android\n\nThe `FusedLocationSource` used internally by the Naver Map SDK automatically makes a permission request the moment the user sets the [isShowLocationButton prop](https://mym0404.github.io/react-native-naver-map/interfaces/NaverMapViewProps.html#isShowLocationButton) to `true`.\n\nAndroid can implement permissions relatively simply.\n\nJust specify the following permissions in `AndroidManifest.xml`:\n\n-  `android.permission.ACCESS_FINE_LOCATION`\n   - Permission for precise location information\n-  `android.permission.ACCESS_COARSE_LOCATION`\n   - Permission for approximate location information\n-  `android.permission.ACCESS_BACKGROUND_LOCATION`\n   - Permission for location information in the background\n\n#### Code-based Permission Requests\n\nIf you have completed the configuration up to this point, you can request permissions in screens that require a map as follows:\n\nFor Bare RN Project or ejected Expo (`react-native-permissions`)\n```tsx\n// useEffect is simply used to be called when the component mounts..\nuseEffect(() =\u003e {\n  if (Platform.OS === 'ios') {\n    request(PERMISSIONS.IOS.LOCATION_ALWAYS).then((status) =\u003e {\n      console.log(`Location request status: ${status}`);\n      if (status === 'granted') {\n        requestLocationAccuracy({\n          purposeKey: 'common-purpose', // replace your purposeKey of Info.plist\n        })\n          .then((accuracy) =\u003e {\n            console.log(`Location accuracy is: ${accuracy}`);\n          })\n          .catch((e) =\u003e {\n            console.error(`Location accuracy request has been failed: ${e}`);\n          });\n      }\n    });\n  }\n  if (Platform.OS === 'android') {\n    requestMultiple([\n      PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,\n      PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,\n    ])\n      .then((status) =\u003e {\n        console.log(`Location request status: ${status}`);\n      })\n      .catch((e) =\u003e {\n        console.error(`Location request has been failed: ${e}`);\n      });\n  }\n}, []);\n```\n\nFor Expo (`expo-location`)\n```tsx\nimport * as Location from 'expo-location'\n\n...\nuseEffect(() =\u003e {\n  (async () =\u003e {\n    try {\n      const {granted} = await Location.requestForegroundPermissionsAsync();\n      /**\n       * Note: Foreground permissions should be granted before asking for the background permissions\n       * (your app can't obtain background permission without foreground permission).\n       */\n      if(granted) {\n        await Location.requestBackgroundPermissionsAsync();\n      }\n    } catch(e) {\n      console.error(`Location request has been failed: ${e}`);\n    }\n  })();\n}, []);\n```\n\n![permission-result-1](https://raw.githubusercontent.com/mym0404/image-archive/master/202404161733072.webp)\n![permission-result-2](https://raw.githubusercontent.com/mym0404/image-archive/master/202404161737907.webp)\n\n## Components\n\n\u003e [!NOTE]\n\u003e Descriptions for most types and props are also written in the code comments, and this project supports TypeScript, so checking only in the code will suffice for use.\n\n-  ✅ Fully Supported\n-  ⚠️ Developing, lack of features yet\n-  📦 Planned\n\n| Component                                                                                     | iOS | Android | Description       |\n|-----------------------------------------------------------------------------------------------|-----|---------|-------------------|\n| [NaverMapView](https://navermaps.github.io/android-map-sdk/guide-ko/2-3.html)                 | ✅   | ✅       | Map               |\n| [NaverMapMarkerOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-2.html)        | ✅   | ✅       | Marker Overlay    |\n| [Info Window](https://navermaps.github.io/android-map-sdk/guide-ko/5-3.html)                  | 📦  | 📦      | Callout Overlay, Tooltip |\n| [NaverMapCircleOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-4.html)        | ✅   | ✅       | Circle Overlay    |\n| [NaverMapPolylineOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-4.html)      | ✅   | ✅       | Polyline Overlay  |\n| [NaverMapPolygonOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-4.html)       | ✅   | ✅       | Polygon           |\n| [NaverMapLocationOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-5.html)      | 📦  | 📦      | Custom Location Overlay |\n| [NaverMapGroundOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-6.html)        | ✅   | ✅       | Ground Overlay    |\n| [NaverMapPathOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-7.html)          | ✅   | ✅       | Path Overlay      |\n| [NaverMapMultipartPathOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-7.html) | 📦  | 📦      | Multipath Overlay |\n| [NaverMapArrowPathOverlay](https://navermaps.github.io/android-map-sdk/guide-ko/5-7.html)     | ✅   | ✅       | Arrow Path Overlay |\n\n## Marker Image Types and Performance\n\nThere are a total of 5 types of markers.\n\n\u003e [!IMPORTANT]\n\u003e `[iOS, Android] x [new arch, old arch] x [debug, release]`\n\u003e **Tested to render correctly under all 8 conditions.**\n\n\u003e [!TIP]\n\u003e `reuseIdentifier` is automatically cached even if not provided.\n\u003e\n\u003e Ideally, all markers should use the `width`, `height` prop. Currently, for type 2, the size appears differently in debug/release builds without `width`, `height`.\n\u003e It appears correctly in release.\n\n1. Naver Map Basic Symbol (green, red, gray, ...) (caching ✅)\n\n```js\nimage={{symbol: 'green'}}\n```\n\n2. Local Resource (`require` react native image file) (caching ✅)\n\n```js\nimage={require('./marker.png')}\n```\n\n3. Local Native Resource\n\n```js\nimage={{assetName: 'asset_image'}}\n```\n\n-  iOS: image asset name in the main bundle\n-  Android: name in the resources' drawable\n\n4. Network Image (caching ✅)\n\n```js\nimage={{httpUri: 'https://example.com/image.png'}}\n```\n\n\u003e [!WARNING]\n\u003e Attributes like header are currently not supported.\n\n5. Custom React View (caching ❌)\n\nOn iOS(new arch), `collapsable=false` must be set for Views to function.\n\n\u003e [!TIP]\n\u003e To change the appearance of a marker, dependencies must be passed as the `key` of the topmost child.\n\n```tsx\n\u003cNaverMapMarkerOverlay width={width} height={height} ...\u003e\n  \u003cView key={`${text}/${width}/${height}`} collapsable={false} style={{width, height}}\u003e\n    \u003cText\u003e{text}\u003c/Text\u003e\n  \u003c/View\u003e\n\u003c/NaverMapMarkerOverlay\u003e\n```\n\n\u003e [!IMPORTANT]\n\u003e This type can significantly impact performance when created in large quantities.\n\u003e It is recommended to use images whenever possible or keep usage simple.\n\nCurrently, this type tracks the position of children by slightly customizing React Native’s Shadow Node on Android and inserting the actual Android `View`.\n\nOn iOS, simply draw `UIView` to canvas as `UIImage`.\n\nBoth methods do not yet support image caching (possible in the future with attributes like `reuseableIdentifier`), and each marker consumes a significant amount of resources.\n\n\n## TODO - Props \u0026 Commands\n\n-  ✅ Done\n-  📦 Planned\n-  ❓ Maybe Planned\n-  ❌ Not Planned\n\n### `NaverMapView`\n\n#### Props\n\n| Prop                     | iOS | Android |\n|--------------------------|-----|---------|\n| isLogoInteractionEnabled | ❌   | ❌       |\n| gestureFrictions         | 📦  | 📦      |\n\n#### Events\n\n| Event            | iOS | Android |\n|------------------|-----|---------|\n| onTapSymbol      | 📦  | 📦      |\n| onAuthFailed     | ❌   | ❌       |\n| onLocationChange | 📦  | 📦      |\n\n\n### Marker Common\n\n#### Events\n\n|           | iOS | Android |\n|-----------|-----|---------|\n| onLongTap | ❌   | 📦      |\n\n### `NaverMapMarkerOverlay`\n\n#### Props\n\n| Prop                      | iOS                                                | Android |\n|---------------------------|----------------------------------------------------|---------|\n| caption-fontFamily        | ❓                                                 | ❓       |\n| subcaption-fontFamily     | ❓                                                 | ❓       |\n\n## Supporting Table - Architecture\n\n|        | iOS | Android |\n|--------|-----|---------|\n| Bridge | ✅   | ✅       |\n| Fabric | ✅️  | ✅️      |\n\n## Milestone\n\n-  [x] Project Started (23.04.01)\n-  [x] Project Setup \u0026 Component Structure (23.04.03)\n-  [x] General Props \u0026 Commands (23.04.05)\n-  [x] Camera, Region, Commands, Events (23.04.07)\n-  [x] Implement Basic Overlays (23.04.10)\n-  [x] Location Service (23.04.10)\n-  [x] Support Paper(Old Arch) (23.04.11)\n-  [x] Release (23.04.11)\n-  [x] Support Expo with config plugin (23.04.12)\n-  [x] Docs\n-  [x] Implement Clustering (23.04.24)\n-  [x] Implement ArrowheadPath Overlay (23.05.01)\n-  [x] Implement Ground Overlay (23.05.01)\n-  [ ] Implement Location Overlay Commands \u003c- 🔥\n-  [ ] Implement MutlPath Overlay \u003c- 🔥\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the\ndevelopment workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmym0404%2Freact-native-naver-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmym0404%2Freact-native-naver-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmym0404%2Freact-native-naver-map/lists"}