{"id":20709665,"url":"https://github.com/quadflask/react-native-naver-map","last_synced_at":"2025-04-04T08:06:35.938Z","repository":{"id":35021049,"uuid":"184519626","full_name":"QuadFlask/react-native-naver-map","owner":"QuadFlask","description":"🗺️naver map for react-native","archived":false,"fork":false,"pushed_at":"2024-07-08T07:58:22.000Z","size":4298,"stargazers_count":168,"open_issues_count":93,"forks_count":149,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-28T07:08:44.210Z","etag":null,"topics":["naver-map","react-native"],"latest_commit_sha":null,"homepage":"","language":"Java","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/QuadFlask.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":"2019-05-02T04:15:29.000Z","updated_at":"2025-02-10T08:22:55.000Z","dependencies_parsed_at":"2024-12-08T05:01:03.871Z","dependency_job_id":"41ecbfdf-aca3-4941-b9cd-c34ef86d8016","html_url":"https://github.com/QuadFlask/react-native-naver-map","commit_stats":{"total_commits":142,"total_committers":12,"mean_commits":"11.833333333333334","dds":"0.19718309859154926","last_synced_commit":"5ec38d7e2050fb541a4748b633788ca0be1c1ae3"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadFlask%2Freact-native-naver-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadFlask%2Freact-native-naver-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadFlask%2Freact-native-naver-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuadFlask%2Freact-native-naver-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QuadFlask","download_url":"https://codeload.github.com/QuadFlask/react-native-naver-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142063,"owners_count":20890652,"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":["naver-map","react-native"],"created_at":"2024-11-17T02:07:37.454Z","updated_at":"2025-04-04T08:06:35.916Z","avatar_url":"https://github.com/QuadFlask.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-native-naver-map [![npm version](https://badge.fury.io/js/react-native-nmap.svg)](https://badge.fury.io/js/react-native-nmap)\n-----\n\n네이버맵의 리액트 네이티브 브릿지입니다.\n\n![](https://raw.githubusercontent.com/QuadFlask/react-native-naver-map/master/example/screenshot/screenshot.png)\n\n\n## 설치\n\n```\nnpm install react-native-nmap --save;\n```\n\n- **React Native 0.60+**\n\n```bash\n$ cd ios/ \u0026\u0026 pod install\n```\n\n- **React Native \u003c= 0.59**\n\n```bash\n$ react-native link react-native-nmap\n$ cd ios/ \u0026\u0026 pod install\n```\n\n\u003e ios의 경우 `git-lfs` 설치가 필요합니다. [참고](https://github.com/navermaps/ios-map-sdk#%EB%8C%80%EC%9A%A9%EB%9F%89-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%B0%9B%EA%B8%B0-%EC%9C%84%ED%95%B4-git-lfs-%EC%84%A4%EC%B9%98%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%A9%EB%8B%88%EB%8B%A4)\n\n\n### 안드로이드 추가 설정\n\n[네이버 맵 안드로이드 SDK 문서](https://navermaps.github.io/android-map-sdk/guide-ko/1.html)를 따라 API키와 레포지터리 경로를 추가합니다\n\n`/android/build.gradle` 파일에 아래와 같이 레포지터리를 추가합니다\n\n\u003e ⚠️ Bintray 지원 중단에 의해 jfrog로 수정되었습니다\n\n```\nallprojects {\n    repositories {\n        google()\n        jcenter()\n        // 네이버 지도 저장소\n        maven {\n            url 'https://naver.jfrog.io/artifactory/maven/'\n        }\n    }\n}\n```\n\n`/android/app/src/AndroidManifest.xml`에 아래와 같이 추가하고 발급받은 클라이언트 아이디로 바꿔줍니다.\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### IOS 추가 설정\n\n[네이버 맵 IOS SDK 문서](https://navermaps.github.io/ios-map-sdk/guide-ko/1.html)를 따라 API키와 레포지터리 경로를 추가합니다.\n\n`info.plist`에 아래와 같이 발급받은 클라이언트 아이디를 추가해줍니다.\n\n![image](https://user-images.githubusercontent.com/49827449/66392740-b2fd5f00-ea0b-11e9-8c38-23e604b1009d.png)\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...\n    \u003ckey\u003eNMFClientId\u003c/key\u003e\n    \u003cstring\u003eYOUR_CLIENT_ID_HERE\u003c/string\u003e\n...\n\u003cdict\u003e\n\u003cplist\u003e\n```\n\n## 예제\n\n\u003e [example/App.js](https://github.com/QuadFlask/react-native-naver-map/blob/master/example/App.js) \n\n```tsx\nimport NaverMapView, {Circle, Marker, Path, Polyline, Polygon} from \"react-native-nmap\";\n\nfunction MyMap() {\n    const P0 = {latitude: 37.564362, longitude: 126.977011};\n    const P1 = {latitude: 37.565051, longitude: 126.978567};\n    const P2 = {latitude: 37.565383, longitude: 126.976292};\n\n    return \u003cNaverMapView style={{width: '100%', height: '100%'}}\n                         showsMyLocationButton={true}\n                         center={{...P0, zoom: 16}}\n                         onTouch={e =\u003e console.warn('onTouch', JSON.stringify(e.nativeEvent))}\n                         onCameraChange={e =\u003e console.warn('onCameraChange', JSON.stringify(e))}\n                         onMapClick={e =\u003e console.warn('onMapClick', JSON.stringify(e))}\u003e\n        \u003cMarker coordinate={P0} onClick={() =\u003e console.warn('onClick! p0')}/\u003e\n        \u003cMarker coordinate={P1} pinColor=\"blue\" onClick={() =\u003e console.warn('onClick! p1')}/\u003e\n        \u003cMarker coordinate={P2} pinColor=\"red\" onClick={() =\u003e console.warn('onClick! p2')}/\u003e\n        \u003cPath coordinates={[P0, P1]} onClick={() =\u003e console.warn('onClick! path')} width={10}/\u003e\n        \u003cPolyline coordinates={[P1, P2]} onClick={() =\u003e console.warn('onClick! polyline')}/\u003e\n        \u003cCircle coordinate={P0} color={\"rgba(255,0,0,0.3)\"} radius={200} onClick={() =\u003e console.warn('onClick! circle')}/\u003e\n        \u003cPolygon coordinates={[P0, P1, P2]} color={`rgba(0, 0, 0, 0.5)`} onClick={() =\u003e console.warn('onClick! polygon')}/\u003e\n    \u003c/NaverMapView\u003e\n}\n```\n\n\n## 컴포넌트\n\n타입스크립트 타입 정의가 포함되어 있어 타입스크립트 사용을 추천합니다.\n\n### 기본 타입\n\n```ts\nexport interface Coord {\n    latitude: number;\n    longitude: number;\n}\nexport interface Region extends Coord {\n    latitudeDelta: number;\n    longitudeDelta: number;\n}\nexport interface Rect {\n    left?: number;\n    top?: number;\n    right?: number;\n    bottom?: number;\n}\n```\n\n### `NaverMapView`\n```ts\ninterface NaverMapViewProps {\n    center?: Coord \u0026 {\n        zoom?: number;\n        tilt?: number;\n        bearing?: number;\n    };\n    tilt?: number;\n    bearing?: number;\n    mapPadding?: Rect;\n    logoMargin?: Rect;\n    logoGravity?: Gravity;\n    onInitialized?: Function;\n    onCameraChange?: (event: {\n        latitude: number;\n        longitude: number;\n        zoom: number;\n        contentsRegion: [Coord, Coord, Coord, Coord, Coord]; // https://navermaps.github.io/android-map-sdk/reference/com/naver/maps/map/NaverMap.html#getContentRegion()\n        coveringRegion: [Coord, Coord, Coord, Coord, Coord];\n    }) =\u003e void;\n    onMapClick?: (event: {\n        x: number;\n        y: number;\n        latitude: number;\n        longitude: number;\n    }) =\u003e void;\n    onTouch?: () =\u003e void;\n    showsMyLocationButton?: boolean;\n    compass?: boolean;\n    scaleBar?: boolean;\n    zoomControl?: boolean;\n    mapType?: MapType;\n    minZoomLevel?: number;\n    maxZoomLevel?: number;\n    buildingHeight?: number;\n    nightMode?: boolean;\n    scrollGesturesEnabled?: boolean;\n    zoomGesturesEnabled?: boolean;\n    tiltGesturesEnabled?: boolean;\n    rotateGesturesEnabled?: boolean;\n    stopGesturesEnabled?: boolean;\n    useTextureView?: boolean; // android only\n}\n/// component method\nanimateToCoordinate: (coord: Coord) =\u003e void;\nanimateToTwoCoordinates: (c1: Coord, c2: Coord) =\u003e void;\nanimateToCoordinates: (coords: Coord[], bounds?: {\n    top: number;\n    bottom: number;\n    left: number;\n    right: number;\n}) =\u003e void;\nanimateToRegion: (region: Region) =\u003e void;\nsetLocationTrackingMode: (mode: number) =\u003e void;\nsetLayerGroupEnabled: (group: LayerGroup, enabled: boolean) =\u003e void;\nshowsMyLocationButton: (show: boolean) =\u003e void;\nhandleOnCameraChange: (event: React.SyntheticEvent\u003c{}, {\n    latitude: number;\n    longitude: number;\n    zoom: number;\n}\u003e) =\u003e void;\nhandleOnMapClick: (event: React.SyntheticEvent\u003c{}, {\n    x: number;\n    y: number;\n    latitude: number;\n    longitude: number;\n}\u003e) =\u003e void;\n```\n\n### `Marker`\n```ts\ninterface MarkerProps {\n    coordinate: Coord\n    anchor?: { x: number, y: number }\n    pinColor?: string\n    alpha?: number\n    rotation?: number\n    flat?: boolean\n    image?: ImageSourcePropType\n    onClick?: () =\u003e void\n    width?: number\n    height?: number\n    angle?: number\n    hidden?: boolean\n    zIndex?: number\n    iconPerspectiveEnabled?: boolean\n    isHideCollidedSymbols?: boolean\n    isHideCollidedMarkers?: boolean\n    isHideCollidedCaptions?: boolean;\n    isForceShowIcon?: boolean;\n    caption?: {\n        text?: string;\n        align?: Align;\n        textSize?: number;\n        color?: string;\n        haloColor?: string;\n        offset?: number;\n        requestedWidth?: number;\n        minZoom?: number;\n        maxZoom?: number;\n    };\n    subCaption?: {\n        text?: string;\n        textSize?: number;\n        color?: number;\n        haloColor?: number;\n        requestedWidth?: number;\n        minZoom?: number;\n        maxZoom?: number;\n    };\n}\n```\n\u003e 안드로이드 플랫폼에서 마커내 커스텀 뷰를 지원합니다. `0.0.57`\n\u003e ```js\n\u003e \u003cMarker coordinate={P5} width={96} height={96}\u003e\n\u003e     \u003cView style={{backgroundColor: 'rgba(255,0,0,0.2)', borderRadius: 80}}\u003e\n\u003e         \u003cView style={{backgroundColor: 'rgba(0,0,255,0.3)', borderWidth: 2, borderColor: 'black', flexDirection: 'row'}}\u003e\n\u003e             \u003cImage source={require(\"./marker.png\")} style={{\n\u003e                 width: 32, height: 32,\n\u003e                 backgroundColor: 'rgba(0,0,0,0.2)', resizeMode: 'stretch',\n\u003e                 borderWidth: 2, borderColor: 'black'}} fadeDuration={0}/\u003e\n\u003e             \u003cText\u003eImage\u003c/Text\u003e\n\u003e         \u003c/View\u003e\n\u003e         \u003cImageBackground source={require(\"./marker.png\")} style={{width: 64, height: 64}}\u003e\n\u003e             \u003cText\u003eimage background\u003c/Text\u003e\n\u003e         \u003c/ImageBackground\u003e\n\u003e     \u003c/View\u003e\n\u003e \u003c/Marker\u003e \n\u003e ```\n\n### `Polyline`\n```ts\ninterface PolylineProps {\n    coordinates: Coord[]\n    strokeWidth?: number\n    strokeColor?: string\n    onClick?: () =\u003e void\n}\n```\n\n### `Path`\n```ts\ninterface PathProps {\n    coordinates: Coord[]\n    width?: number\n    color?: string\n    outlineWidth?: number\n    passedColor?: string\n    outlineColor?: string\n    passedOutlineColor?: string\n    pattern?: ImageSourcePropType\n    patternInterval?: number\n    onClick?: () =\u003e void\n}\n```\n\n### `Circle`\n```ts\nexport interface CircleProps {\n    coordinate: Coord[]\n    radius?: number;\n    color?: string;\n    outlineWidth?: number;\n    outlineColor?: string;\n    zIndex?: number;\n    onClick?: () =\u003e void\n}\n```\n\n### `Polygon`\n```ts\nexport interface PolygonProps {\n    coordinate: Coord[]\n    outlineWidth?: number;\n    outlineColor?: string\n    color?: string;\n    holes?: Coord[][];\n    onClick?: () =\u003e void\n}\n```\n\n### `LayerGroup`\n```ts\nexport declare enum LayerGroup {\n    LAYER_GROUP_BUILDING = \"building\",\n    LAYER_GROUP_TRANSIT = \"transit\",\n    LAYER_GROUP_BICYCLE = \"bike\",\n    LAYER_GROUP_TRAFFIC = \"ctt\",\n    LAYER_GROUP_CADASTRAL = \"landparcel\",\n    LAYER_GROUP_MOUNTAIN = \"mountain\"\n}\n```\n\n## 참고\n\n- *react-navigation*의 스택 스크린 사용시 안드로이드에서 맵뷰가 겹쳐 보이는 현상이 있을 경우 `useTextureView` 옵션을 추가해 주세요. [#27](https://github.com/QuadFlask/react-native-naver-map/issues/27)\n\n- 안드로이드에서 `ScrollView` 내부에 추가할 경우 `scrollGesturesEnabled`를 이용해 맵 스크롤을 제어할 수 있습니다. [#62](https://github.com/QuadFlask/react-native-naver-map/issues/62)\n\n- 마커 클러스터링에 필요한 지도 컨텐츠 영역은 `onCameraChange` 이벤트를 통해 얻을 수 있습니다. [#64](https://github.com/QuadFlask/react-native-naver-map/issues/64)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquadflask%2Freact-native-naver-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquadflask%2Freact-native-naver-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquadflask%2Freact-native-naver-map/lists"}