설치 가이드

패키지 설치

npm install @boostbrothers/react-native-naver-map

iOS 설정

CocoaPods 설치

패키지 설치 후 iOS 디렉토리에서 pod install을 실행합니다.

cd ios && pod install

네이버 지도 저장소 추가

ios/Podfile에 네이버 지도 SDK 저장소를 추가합니다.

# ios/Podfile 상단에 추가
source 'https://github.com/CocoaPods/Specs.git'
source 'https://navermaps.github.io/ios-map-sdk/SpecsB3.git'

Info.plist 클라이언트 ID 설정

ios/<프로젝트명>/Info.plist에 네이버 지도 클라이언트 ID를 추가합니다.

<key>NMFClientId</key>
<string>YOUR_CLIENT_ID_HERE</string>

클라이언트 ID는 네이버 클라우드 플랫폼에서 발급받을 수 있습니다.

위치 권한 추가 (위치 추적 사용 시)

위치 추적 기능을 사용한다면 Info.plist에 위치 권한 설명을 추가합니다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>현재 위치를 지도에 표시하기 위해 위치 권한이 필요합니다.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>백그라운드에서도 위치를 추적하기 위해 권한이 필요합니다.</string>

Android 설정

네이버 지도 저장소 추가

android/build.gradle의 allprojects.repositories 블록에 네이버 지도 Maven 저장소를 추가합니다.

allprojects {
    repositories {
        google()
        mavenCentral()
        // 네이버 지도 저장소 추가
        maven {
            url 'https://repository.map.naver.com/archive/maven'
        }
    }
}

AndroidManifest.xml 클라이언트 ID 설정

android/app/src/main/AndroidManifest.xml의 <application> 태그 안에 클라이언트 ID 메타데이터를 추가합니다.

<application
    android:name=".MainApplication"
    ...>

    <!-- 네이버 지도 클라이언트 ID -->
    <meta-data
        android:name="com.naver.maps.map.CLIENT_ID"
        android:value="YOUR_CLIENT_ID_HERE" />

    ...
</application>

위치 권한 추가 (위치 추적 사용 시)

AndroidManifest.xml에 위치 권한을 추가합니다.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Expo 설정

Expo 프로젝트에서는 Config Plugin을 통해 설정을 자동화할 수 있습니다.

app.json / app.config.js 설정

{
  "expo": {
    "plugins": [
      [
        "@boostbrothers/react-native-naver-map",
        {
          "client_id": "YOUR_CLIENT_ID_HERE"
        }
      ]
    ]
  }
}

Prebuild 실행

npx expo prebuild

Expo Go에서는 네이티브 모듈이 포함되어 있지 않으므로 동작하지 않습니다. Expo Development Build를 사용해야 합니다.

설치 확인

설치가 완료되었다면 다음 코드로 동작을 확인합니다.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NaverMapView } from '@boostbrothers/react-native-naver-map';

export default function App() {
  return (
    <View style={styles.container}>
      <NaverMapView
        style={styles.map}
        initialCamera={{
          latitude: 37.5666102,
          longitude: 126.9783881,
          zoom: 14,
        }}
        onInitialized={() => console.log('지도 초기화 완료')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

지도가 표시되지 않는다면 문제 해결 페이지를 참고하세요.

설치 가이드

패키지 설치

npm install @boostbrothers/react-native-naver-map

iOS 설정

CocoaPods 설치

패키지 설치 후 iOS 디렉토리에서 pod install을 실행합니다.

cd ios && pod install

네이버 지도 저장소 추가

ios/Podfile에 네이버 지도 SDK 저장소를 추가합니다.

# ios/Podfile 상단에 추가
source 'https://github.com/CocoaPods/Specs.git'
source 'https://navermaps.github.io/ios-map-sdk/SpecsB3.git'

Info.plist 클라이언트 ID 설정

ios/<프로젝트명>/Info.plist에 네이버 지도 클라이언트 ID를 추가합니다.

<key>NMFClientId</key>
<string>YOUR_CLIENT_ID_HERE</string>

클라이언트 ID는 네이버 클라우드 플랫폼에서 발급받을 수 있습니다.

위치 권한 추가 (위치 추적 사용 시)

위치 추적 기능을 사용한다면 Info.plist에 위치 권한 설명을 추가합니다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>현재 위치를 지도에 표시하기 위해 위치 권한이 필요합니다.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>백그라운드에서도 위치를 추적하기 위해 권한이 필요합니다.</string>

Android 설정

네이버 지도 저장소 추가

android/build.gradle의 allprojects.repositories 블록에 네이버 지도 Maven 저장소를 추가합니다.

allprojects {
    repositories {
        google()
        mavenCentral()
        // 네이버 지도 저장소 추가
        maven {
            url 'https://repository.map.naver.com/archive/maven'
        }
    }
}

AndroidManifest.xml 클라이언트 ID 설정

android/app/src/main/AndroidManifest.xml의 <application> 태그 안에 클라이언트 ID 메타데이터를 추가합니다.

<application
    android:name=".MainApplication"
    ...>

    <!-- 네이버 지도 클라이언트 ID -->
    <meta-data
        android:name="com.naver.maps.map.CLIENT_ID"
        android:value="YOUR_CLIENT_ID_HERE" />

    ...
</application>

위치 권한 추가 (위치 추적 사용 시)

AndroidManifest.xml에 위치 권한을 추가합니다.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Expo 설정

Expo 프로젝트에서는 Config Plugin을 통해 설정을 자동화할 수 있습니다.

app.json / app.config.js 설정

{
  "expo": {
    "plugins": [
      [
        "@boostbrothers/react-native-naver-map",
        {
          "client_id": "YOUR_CLIENT_ID_HERE"
        }
      ]
    ]
  }
}

Prebuild 실행

npx expo prebuild

Expo Go에서는 네이티브 모듈이 포함되어 있지 않으므로 동작하지 않습니다. Expo Development Build를 사용해야 합니다.

설치 확인

설치가 완료되었다면 다음 코드로 동작을 확인합니다.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NaverMapView } from '@boostbrothers/react-native-naver-map';

export default function App() {
  return (
    <View style={styles.container}>
      <NaverMapView
        style={styles.map}
        initialCamera={{
          latitude: 37.5666102,
          longitude: 126.9783881,
          zoom: 14,
        }}
        onInitialized={() => console.log('지도 초기화 완료')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

지도가 표시되지 않는다면 문제 해결 페이지를 참고하세요.

설치 가이드

설치 가이드

패키지 설치

iOS 설정

CocoaPods 설치

네이버 지도 저장소 추가

Info.plist 클라이언트 ID 설정

위치 권한 추가 (위치 추적 사용 시)

Android 설정

네이버 지도 저장소 추가

AndroidManifest.xml 클라이언트 ID 설정

위치 권한 추가 (위치 추적 사용 시)

Expo 설정

app.json / app.config.js 설정

Prebuild 실행

설치 확인

목차

설치 가이드

설치 가이드

패키지 설치

iOS 설정

CocoaPods 설치

네이버 지도 저장소 추가

Info.plist 클라이언트 ID 설정

위치 권한 추가 (위치 추적 사용 시)

Android 설정

네이버 지도 저장소 추가

AndroidManifest.xml 클라이언트 ID 설정

위치 권한 추가 (위치 추적 사용 시)

Expo 설정

app.json / app.config.js 설정

Prebuild 실행

설치 확인

목차