Getting Started
Naver Map library for React Native
Getting Started
This guide will walk you through installing and setting up React Native Naver Map in your project.
Prerequisites
- New Architecture(+0.74)
- Expo(Bare, CNG both supported, not Expo Go) or Bare React Native Project.
Installation
npm install @mj-studio/react-native-naver-mapNaver Cloud Project Setup and API Key Generation
- Please follow the guide to set up your Naver Cloud Naver Map project and generate an API key.
Platform-specific Configuration
Even when using Expo, there is a difference between Continuous Native Generation (CNG) mode, where android and ios exist in .gitignore and native projects are continuously created and used, and modes that don't follow this approach.
For permission configuration, the Documentation uses react-native-permission for Android and iOS, and expo-location for Expo CNG, but you can use any permission management method compatible with your project as preferred.
After installation is complete, additional platform-specific configuration is required. Please follow the guide for your corresponding platform.
Android Setup
If you're using Expo CNG, please follow the Expo CNG configuration.
iOS Setup
If you're using Expo CNG, please follow the Expo CNG configuration.
Expo CNG Environment Setup
In Expo CNG environment, separate Android and iOS configuration is not needed - just follow this guide.
Creating Your First Map
Once platform-specific configuration is complete, you can display the map:
import { NaverMapView } from '@mj-studio/react-native-naver-map';
export default function App() {
return (
<View style={styles.container}>
<NaverMapView
style={styles.map}
initialRegion={{
latitude: 37.5665,
longitude: 126.9780,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
/>
</View>
);
}