React Native Naver Map

Overview

NaverMapView is the main component that enables the use of Naver Map SDK in React Native. It provides core map functionality including map display, camera control, gesture handling, and overlay management.

Basic Usage

import { NaverMapView } from '@mj-studio/react-native-naver-map'; 

function MyMap() {
  return (
    <NaverMapView
      style={{ flex: 1 }} 
      initialCamera={{ 
        latitude: 37.50497126, 
        longitude: 127.04905021, 
        zoom: 14, 
      }} 
      mapType="Basic"
      layerGroups={{ 
        BUILDING: true, 
        TRAFFIC: false, 
      }} 
    />
  );
}

With Camera Control

import { useRef, useState } from 'react';
import { NaverMapView, type NaverMapViewRef } from '@mj-studio/react-native-naver-map';
import { Button } from 'react-native';

function MapWithControls() {
  const mapRef = useRef<NaverMapViewRef>(null); 
  const [camera, setCamera] = useState({
    latitude: 37.498040483,
    longitude: 127.02758183,
    zoom: 14,
  });

  const moveToGangnam = () => {
    mapRef.current?.animateCameraTo({ 
      latitude: 37.498040483, 
      longitude: 127.02758183, 
      zoom: 16, 
      duration: 1000, 
      easing: 'EaseIn', 
    }); 
  };

  return (
    <>
      <NaverMapView
        ref={mapRef} 
        style={{ flex: 1 }}
        camera={camera} 
        onCameraChanged={(event) => { 
          console.log('Camera changed:', event); 
          setCamera({ 
            latitude: event.latitude, 
            longitude: event.longitude, 
            zoom: event.zoom, 
          }); 
        }} 
      />
      <Button onPress={moveToGangnam} title="Move to Gangnam" />
    </>
  );
}

With Markers

import { NaverMapView, NaverMapMarkerOverlay } from '@mj-studio/react-native-naver-map';
import { View, Text } from 'react-native';

function MapWithAllMarkerTypes() {
  return (
    <NaverMapView
      style={{ flex: 1 }}
      initialCamera={{
        latitude: 33.39530773,
        longitude: 126.54656715029,
        zoom: 8,
      }}
    >
      {/* 1. Symbol Marker */}
      <NaverMapMarkerOverlay
        latitude={33.39530773}
        longitude={126.54656715029}
        image={{ symbol: 'green' }} 
        anchor={{ x: 0.5, y: 1 }}
        caption={{ text: 'Symbol Marker' }}
      />

      {/* 2. Local Asset Marker */}
      <NaverMapMarkerOverlay
        latitude={33.41}
        longitude={126.55}
        image={require('./logo.png')} 
        width={50}
        height={50}
        caption={{ text: 'Local Asset' }}
      />

      {/* 3. Native Asset Marker */}
      <NaverMapMarkerOverlay
        latitude={33.35}
        longitude={126.53}
        image={{ assetName: 'thumbnail' }} 
        width={40}
        height={40}
        caption={{ text: 'Native Asset' }}
      />

      {/* 4. HTTP Image Marker */}
      <NaverMapMarkerOverlay
        latitude={33.32}
        longitude={126.58}
        image={{ httpUri: 'https://picsum.photos/100/100' }} 
        width={50}
        height={50}
        caption={{ text: 'HTTP Image' }}
      />

      {/* 5. Custom View Marker */}
      <NaverMapMarkerOverlay
        latitude={33.38}
        longitude={126.51}
        width={80}
        height={80}
      >
        <View
          collapsable={false} 
          style={{
            backgroundColor: 'white',
            padding: 10,
            borderRadius: 8,
            shadowColor: '#000',
            shadowOpacity: 0.2,
          }}
        >
          <Text>Custom View</Text>
        </View>
      </NaverMapMarkerOverlay>
    </NaverMapView>
  );
}

With All Overlay Types

import {
  NaverMapView,
  NaverMapMarkerOverlay,
  NaverMapCircleOverlay,
  NaverMapPolygonOverlay,
  NaverMapPolylineOverlay,
  NaverMapPathOverlay,
  NaverMapMultiPathOverlay,
  NaverMapArrowheadPathOverlay,
  NaverMapGroundOverlay,
} from '@mj-studio/react-native-naver-map';

function MapWithAllOverlays() {
  return (
    <NaverMapView
      style={{ flex: 1 }}
      initialCamera={{
        latitude: 33.39530773,
        longitude: 126.54656715029,
        zoom: 9,
      }}
    >
      {/* Marker Overlay */}
      <NaverMapMarkerOverlay
        latitude={33.39530773}
        longitude={126.54656715029}
        anchor={{ x: 0.5, y: 1 }}
        caption={{ text: 'Jeju Center' }}
        onTap={() => console.log('Marker tapped')}
      />

      {/* Circle Overlay */}
      <NaverMapCircleOverlay
        latitude={33.17827398} 
        longitude={126.349895729} 
        radius={10000} 
        color={'#ff00ff33'} 
        outlineColor={'#ff00ff'} 
        outlineWidth={2} 
        onTap={() => console.log('Circle tapped')} 
      /> // [!code highlight]

      {/* Polygon Overlay */}
      <NaverMapPolygonOverlay
        coords={[ 
          { latitude: 33.5, longitude: 126.4 }, 
          { latitude: 33.55, longitude: 126.45 }, 
          { latitude: 33.52, longitude: 126.5 }, 
          { latitude: 33.48, longitude: 126.48 }, 
        ]} 
        color={'#00ff0033'} 
        outlineColor={'#00ff00'} 
        outlineWidth={2} 
      /> // [!code highlight]

      {/* Polyline Overlay */}
      <NaverMapPolylineOverlay
        coords={[ 
          { latitude: 33.3, longitude: 126.3 }, 
          { latitude: 33.35, longitude: 126.35 }, 
          { latitude: 33.32, longitude: 126.4 }, 
        ]} 
        width={5} 
        color={'#ff0000'} 
      /> // [!code highlight]

      {/* Path Overlay */}
      <NaverMapPathOverlay
        coords={[ 
          { latitude: 32.345332063, longitude: 126.24180047 }, 
          { latitude: 32.70066, longitude: 126.2719053 }, 
          { latitude: 32.360030018, longitude: 126.37221049 }, 
        ]} 
        width={8} 
        color={'white'} 
        progress={0.5} 
        passedColor={'black'} 
        outlineWidth={1} 
      /> // [!code highlight]

      {/* Multi Path Overlay */}
      <NaverMapMultiPathOverlay
        width={40} 
        patternInterval={120} 
        progress={0.5} 
        outlineWidth={10} 
        patternImage={{ symbol: 'blue' }} 
        pathParts={[ 
          {
            coords: [
              { latitude: 33.5744287, longitude: 126.982625 },
              { latitude: 33.57152, longitude: 126.97714 },
              { latitude: 33.56607, longitude: 126.98268 },
            ],
            color: '#ff0000',
          },
          {
            coords: [
              { latitude: 33.56607, longitude: 126.98268 },
              { latitude: 33.56317, longitude: 126.98729 },
              { latitude: 33.56038, longitude: 126.99108 },
            ],
            color: '#00ff00',
          },
        ]} 
      /> // [!code highlight]

      {/* Arrowhead Path Overlay */}
      <NaverMapArrowheadPathOverlay
        coords={[ 
          { longitude: 126.93240597362552, latitude: 32.433509943138404 }, 
          { longitude: 126.93474226289788, latitude: 32.6383463419792 }, 
          { longitude: 127.07281803100506, latitude: 32.57085962943823 }, 
        ]} 
        headSizeRatio={2.5} 
        width={8} 
        color={'red'} 
        outlineColor={'blue'} 
        outlineWidth={2} 
      /> // [!code highlight]

      {/* Ground Overlay */}
      <NaverMapGroundOverlay
        image={{ assetName: 'thumbnail' }} 
        region={{ 
          latitude: 33.2, 
          longitude: 126.6, 
          latitudeDelta: 0.1, 
          longitudeDelta: 0.1, 
        }} 
        onTap={() => console.log('Ground overlay tapped')} 
      /> // [!code highlight]
    </NaverMapView>
  );
}

Props

NaverMapViewProps

Prop

Type

Ref Methods

NaverMapViewRef