yarn add react-native-nmap

안드로이드 설정

/android/build.gradle 파일에 아래와 같이 레포지터리를 추가한다.

allprojects {
    repositories {
				(...)

        // 네이버 지도 저장소
        maven {
            url 'https://naver.jfrog.io/artifactory/maven/'
        }

				(...)
    }
}

/android/app/src/main/AndroidManifest.xml 파일에 아래와 같이 레포지터리를 추가한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.navermaptest">
    <uses-permission android:name="android.permission.INTERNET" />
    (...)
      <meta-data
          android:name="com.naver.maps.map.CLIENT_ID"
          android:value="클라이언트 아이디 입력" /> // <-- 클라이언트 아이디 입력
		(...)
    </application>
</manifest>

IOS 설정

info.plist 에 아래와 같이 발급받은 클라이언트 아이디를 추가해줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
(...)
    <key>NMFClientId</key>
    <string>YOUR_CLIENT_ID_HERE</string> //예시) <string>12dvdq98t7</string>
(...)
<dict>
<plist>

내프로젝트/ios/Podfile파일에"pod 'NMapsMap','3.14.1" NMapsMap 버전 추가

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'naverMapTest' do
  config = use_native_modules!
	(...)
  pod 'NMapsMap','3.15.0' /// 이 부분! 버젼은 때에 따라 최신화 됨
  (...)
  
end

git-lfs 설치후 pod install

( 참고 )

$ brew install git-lfs
$ cd 프로젝트
$ git-lfs install

$ cd ios/
$ rm -rf Pods/
$ rm Podfile.lock
$ pod install

네이버지도 등록

클라이언트 ID 발급

네이버 지도 모바일 SDK를 사용하려면 다음과 같이 애플리케이션을 등록하고 클라이언트 ID를 발급받아야 합니다.

• 네이버 클라우드 플랫폼에 로그인한 후 콘솔에 들어갑니다.
• Products & Services에서 AI-Application Service 하위의 AI·NAVER API를 선택합니다.

• Application 등록을 선택하고 Maps 하위의 Mobile Dynamic Map을 체크합니다.
• 선택하지 않으면 인증 실패 오류(429)가 발생합니다.
• iOS Bundle ID에 네이버 지도 SDK를 사용하고자 하는 앱의 번들 ID를 추가하고 등록합니다.
• 올바르게 입력하지 않으면 인증 실패 오류(401)가 발생합니다.
• 등록한 애플리케이션의 인증 정보를 선택해 Client ID를 확인합니다.

App.tsx 예시

import NaverMapView, {
  Circle,
  Marker,
  Path,
  Polygon,
  Polyline,
} from 'react-native-nmap';

const App = () => {
  const P0 = {latitude: 37.564362, longitude: 126.977011};
  const P1 = {latitude: 37.565051, longitude: 126.978567};
  const P2 = {latitude: 37.565383, longitude: 126.976292};

  return (
    <NaverMapView
      style={{width: '100%', height: '100%'}}
      showsMyLocationButton={true}
      center={{...P0, zoom: 16}}
      onTouch={e => console.warn('onTouch', JSON.stringify(e.nativeEvent))}
      onCameraChange={e => console.warn('onCameraChange', JSON.stringify(e))}
      onMapClick={e => console.warn('onMapClick', JSON.stringify(e))}>
      <Marker coordinate={P0} onClick={() => console.warn('onClick! p0')} />
      <Marker
        coordinate={P1}
        pinColor="blue"
        onClick={() => console.warn('onClick! p1')}
      />
      <Marker
        coordinate={P2}
        pinColor="red"
        onClick={() => console.warn('onClick! p2')}
      />
      <Path
        coordinates={[P0, P1]}
        onClick={() => console.warn('onClick! path')}
        width={10}
      />
      <Polyline
        coordinates={[P1, P2]}
        onClick={() => console.warn('onClick! polyline')}
      />
      <Circle
        coordinate={P0}
        color={'rgba(255,0,0,0.3)'}
        radius={200}
        onClick={() => console.warn('onClick! circle')}
      />
      <Polygon
        coordinates={[P0, P1, P2]}
        color={`rgba(0, 0, 0, 0.5)`}
        onClick={() => console.warn('onClick! polygon')}
      />
    </NaverMapView>
  );
};