@granite-js/naver-map 1.0.0

package/ios/builtinProvider/GraniteNaverMapMarkerData.swift

@@ -0,0 +1,66 @@
+//
+//  GraniteNaverMapMarkerData.swift
+//  granite-naver-map
+//
+
+import Foundation
+import NMapsMap
+import React
+
+struct GraniteNaverMapMarkerData {
+    let coordinate: NMGLatLng?
+    let width: CGFloat?
+    let height: CGFloat?
+    let zIndex: Int?
+    let image: String?
+    let rotation: CGFloat?
+    let flat: Bool?
+    let alpha: CGFloat?
+    let pinColor: UIColor?
+
+    init(
+        coordinate: NMGLatLng? = nil,
+        width: CGFloat? = nil,
+        height: CGFloat? = nil,
+        zIndex: Int? = nil,
+        image: String? = nil,
+        rotation: CGFloat? = nil,
+        flat: Bool? = nil,
+        alpha: CGFloat? = nil,
+        pinColor: UIColor? = nil
+    ) {
+        self.coordinate = coordinate
+        self.width = width
+        self.height = height
+        self.zIndex = zIndex
+        self.image = image
+        self.rotation = rotation
+        self.flat = flat
+        self.alpha = alpha
+        self.pinColor = pinColor
+    }
+
+    init(object: [String: Any]) {
+        if let coordinate = object["coordinate"] as? [String: Double],
+           let lat = coordinate["latitude"],
+           let lng = coordinate["longitude"] {
+            self.coordinate = NMGLatLng(lat: lat, lng: lng)
+        } else {
+            self.coordinate = nil
+        }
+
+        self.width = object["width"] as? CGFloat
+        self.height = object["height"] as? CGFloat
+        self.zIndex = object["zIndex"] as? Int
+        self.image = object["image"] as? String
+        self.rotation = object["rotation"] as? CGFloat
+        self.flat = object["flat"] as? Bool
+        self.alpha = object["alpha"] as? CGFloat
+
+        if let pinColor = object["pinColor"] as? Int {
+            self.pinColor = RCTConvert.uiColor(pinColor)
+        } else {
+            self.pinColor = nil
+        }
+    }
+}

package/ios/builtinProvider/NMFMarker+Extension.swift

@@ -0,0 +1,65 @@
+//
+//  NMFMarker+Extension.swift
+//  react-native-toss-naver-map
+//
+
+import Foundation
+import NMapsMap
+
+extension NMFMarker {
+
+    func loadImage(from urlString: String) {
+        guard let url = URL(string: urlString) else { return }
+
+        URLSession.shared.dataTask(with: url) { [weak self] data, _, error in
+            guard let data = data,
+                  error == nil,
+                  let image = UIImage(data: data) else {
+                return
+            }
+
+            DispatchQueue.main.async {
+                let overlayImage = NMFOverlayImage(image: image)
+                self?.iconImage = overlayImage
+            }
+        }.resume()
+    }
+
+    func applyMarkerData(_ markerData: GraniteNaverMapMarkerData) {
+        if let coordinate = markerData.coordinate {
+            self.position = coordinate
+        }
+
+        if let width = markerData.width {
+            self.width = width
+        }
+
+        if let height = markerData.height {
+            self.height = height
+        }
+
+        if let zIndex = markerData.zIndex {
+            self.zIndex = zIndex
+        }
+
+        if let imageURL = markerData.image {
+            loadImage(from: imageURL)
+        }
+
+        if let rotation = markerData.rotation {
+            self.angle = rotation
+        }
+
+        if let flat = markerData.flat {
+            self.isFlat = flat
+        }
+
+        if let alpha = markerData.alpha {
+            self.alpha = alpha
+        }
+
+        if let pinColor = markerData.pinColor {
+            self.iconTintColor = pinColor
+        }
+    }
+}

package/ios/builtinProvider/RCTConvert+NMFMapView.h

@@ -0,0 +1,17 @@
+//
+//  RCTConvert+NMFMapView.h
+//  react-native-toss-naver-map
+//
+
+#import <React/RCTConvert.h>
+#import <NMapsMap/NMapsMap.h>
+
+@interface RCTConvert (NMFMapView)
+
++ (NMFCameraUpdate *)NMFCameraUpdate:(id)json;
++ (NMFCameraUpdate *)NMFCameraUpdateWith:(id)json;
++ (NMGLatLng *)NMGLatLng:(id)json;
++ (NMGLatLngBounds *)NMGLatLngBounds:(id)json;
++ (NMFAlignType *)NMFAlignType:(id)json;
+
+@end

package/ios/builtinProvider/RCTConvert+NMFMapView.m

@@ -0,0 +1,67 @@
+//
+//  RCTConvert+NMFMapView.m
+//  react-native-toss-naver-map
+//
+
+#import <NMapsMap/NMFCameraUpdate.h>
+#import <NMapsMap/NMFCameraPosition.h>
+#import <NMapsMap/NMFOverlay.h>
+
+#import "RCTConvert+NMFMapView.h"
+
+@implementation RCTConvert (NMFMapView)
+
++ (NMFCameraUpdate *)NMFCameraUpdate:(id)json
+{
+    json = [self NSDictionary:json];
+    return [NMFCameraUpdate cameraUpdateWithScrollTo:NMGLatLngMake([self double:json[@"latitude"]], [self double:json[@"longitude"]])
+                                              zoomTo:[self double:json[@"zoom"]]];
+}
+
++ (NMFCameraUpdate *)NMFCameraUpdateWith:(id)json
+{
+    NMGLatLng *position = NMGLatLngMake([self double:json[@"latitude"]], [self double:json[@"longitude"]]);
+    double zoom = [self double:json[@"zoom"]];
+    double tilt = [self double:json[@"tilt"]];
+    double bearing = [self double:json[@"bearing"]];
+
+    NMFCameraPosition *cameraPosition = [NMFCameraPosition cameraPosition:position zoom:zoom tilt:tilt heading:bearing];
+    NMFCameraUpdate *cameraUpdate = [NMFCameraUpdate cameraUpdateWithPosition:cameraPosition];
+    cameraUpdate.animation = NMFCameraUpdateAnimationEaseIn;
+    return cameraUpdate;
+}
+
++ (NMGLatLng *)NMGLatLng:(id)json
+{
+    json = [self NSDictionary:json];
+    return NMGLatLngMake([self double:json[@"latitude"]], [self double:json[@"longitude"]]);
+}
+
++ (NMGLatLngBounds *)NMGLatLngBounds:(id)json
+{
+    json = [self NSDictionary:json];
+    double lat = [self double:json[@"latitude"]];
+    double latDelta = [self double:json[@"latitudeDelta"]];
+    double lng = [self double:json[@"longitude"]];
+    double lngDelta = [self double:json[@"longitudeDelta"]];
+    return NMGLatLngBoundsMake(lat - latDelta / 2, lng - lngDelta / 2,  // southwest
+                               lat + latDelta / 2, lng + lngDelta / 2); // northeast
+}
+
++ (NMFAlignType *)NMFAlignType:(id)json
+{
+    json = [self NSNumber:json];
+    if ([json isEqual:@(0)]) return NMFAlignType.center;
+    if ([json isEqual:@(1)]) return NMFAlignType.left;
+    if ([json isEqual:@(2)]) return NMFAlignType.right;
+    if ([json isEqual:@(3)]) return NMFAlignType.top;
+    if ([json isEqual:@(4)]) return NMFAlignType.bottom;
+    if ([json isEqual:@(5)]) return NMFAlignType.topLeft;
+    if ([json isEqual:@(6)]) return NMFAlignType.topRight;
+    if ([json isEqual:@(7)]) return NMFAlignType.bottomRight;
+    if ([json isEqual:@(8)]) return NMFAlignType.bottomLeft;
+
+    return NMFAlignType.bottom;
+}
+
+@end

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@granite-js/naver-map",
+  "version": "1.0.0",
+  "description": "Pluggable Naver Map component for React Native with provider selection",
+  "type": "module",
+  "main": "./dist/module/index.js",
+  "types": "./dist/typescript/index.d.ts",
+  "react-native": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./dist/typescript/index.d.ts",
+      "react-native": "./src/index.tsx",
+      "default": "./dist/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "dist",
+    "android",
+    "ios",
+    "*.podspec",
+    "react-native.config.js",
+    "!example/**",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "prepack": "yarn build",
+    "example": "yarn workspace @granite-js/naver-map-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "build": "bob build && tsc --project tsconfig.build.json"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "naver",
+    "map",
+    "navermap",
+    "korea",
+    "pluggable",
+    "provider",
+    "brownfield"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toss/granite.git",
+    "directory": "packages/naver-map"
+  },
+  "author": "Toss <platform@toss.im>",
+  "homepage": "https://github.com/toss/granite/tree/main/packages/naver-map#readme",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "19.2.0",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.7.0",
+    "react": "19.2.3",
+    "react-native": "0.84.0-rc.5",
+    "react-native-builder-bob": "0.40.17",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "codegenConfig": {
+    "name": "GraniteNaverMapViewSpec",
+    "type": "components",
+    "jsSrcsDir": "src/specs",
+    "android": {
+      "javaPackageName": "run.granite.navermap"
+    },
+    "ios": {
+      "componentProvider": {
+        "GraniteNaverMapView": "GraniteNaverMapView"
+      }
+    }
+  },
+  "sideEffects": false,
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  }
+}

package/src/NaverMapView.tsx

@@ -0,0 +1,168 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, View, type NativeSyntheticEvent, type StyleProp, type ViewStyle } from 'react-native';
+import { MapContext } from './internals/context';
+import type { MarkerEventListeners } from './overlays/Marker';
+import GraniteNaverMapViewNativeComponent, {
+  OnCameraChangeEvent,
+  OnTouchEvent,
+  OnMapClickEvent,
+  OnMarkerClickEvent,
+} from './specs/GraniteNaverMapViewNativeComponent';
+import type { Coord } from './types';
+
+export interface MapViewProps {
+  style?: StyleProp<ViewStyle>;
+  center?: Coord & {
+    zoom?: number;
+    tilt?: number;
+    bearing?: number;
+  };
+  showsMyLocationButton?: boolean;
+  compass?: boolean;
+  scaleBar?: boolean;
+  zoomControl?: boolean;
+  mapType?: number;
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+  buildingHeight?: number;
+  locationTrackingMode?: number;
+  tilt?: number;
+  bearing?: number;
+  nightMode?: boolean;
+  mapPadding?: {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+  };
+  scrollGesturesEnabled?: boolean;
+  zoomGesturesEnabled?: boolean;
+  tiltGesturesEnabled?: boolean;
+  rotateGesturesEnabled?: boolean;
+  stopGesturesEnabled?: boolean;
+  onCameraChange?: (event: NativeSyntheticEvent<OnCameraChangeEvent>) => void;
+  onTouch?: (event: NativeSyntheticEvent<OnTouchEvent>) => void;
+  onMapClick?: (event: NativeSyntheticEvent<OnMapClickEvent>) => void;
+  onInitialized?: () => void;
+  children?: React.ReactNode;
+}
+
+/**
+ * Avoid View Flattening issue on Android
+ */
+const AvoidViewFlatteningOnAndroid = ({
+  style,
+  children,
+}: {
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+}) => {
+  if (Platform.OS === 'android') {
+    return (
+      <View style={style} collapsable={false}>
+        {children}
+      </View>
+    );
+  }
+  return <>{children}</>;
+};
+
+export function NaverMapView({
+  style,
+  onTouch,
+  onMapClick,
+  onCameraChange,
+  onInitialized,
+  children,
+  center,
+  mapPadding,
+  ...props
+}: MapViewProps) {
+  const mapRef = useRef<React.ElementRef<typeof GraniteNaverMapViewNativeComponent>>(null);
+  const [isReady, setIsReady] = useState(false);
+  const markersRef = useRef<Map<string, MarkerEventListeners>>(new Map());
+
+  const onMarkerClick = useCallback((event: NativeSyntheticEvent<OnMarkerClickEvent>) => {
+    const marker = markersRef.current.get(event.nativeEvent.id);
+    marker?.onPress?.();
+  }, []);
+
+  const handleCameraChange = useCallback(
+    (event: NativeSyntheticEvent<OnCameraChangeEvent>) => {
+      onCameraChange?.(event);
+    },
+    [onCameraChange]
+  );
+
+  const handleTouch = useCallback(
+    (event: NativeSyntheticEvent<OnTouchEvent>) => {
+      onTouch?.(event);
+    },
+    [onTouch]
+  );
+
+  const handleMapClick = useCallback(
+    (event: NativeSyntheticEvent<OnMapClickEvent>) => {
+      onMapClick?.(event);
+    },
+    [onMapClick]
+  );
+
+  const handleInitialized = useCallback(() => {
+    console.log('[NaverMapView] handleInitialized called - setting isReady to true');
+    setIsReady(true);
+    onInitialized?.();
+  }, [onInitialized]);
+
+  const mapContext = useMemo(
+    () => (isReady && mapRef.current ? { mapView: mapRef.current, markers: markersRef.current } : null),
+    [isReady]
+  );
+
+  // Convert center prop to native format
+  const nativeCenter = useMemo(() => {
+    if (!center) {
+      return undefined;
+    }
+    return {
+      latitude: center.latitude,
+      longitude: center.longitude,
+      zoom: center.zoom,
+      tilt: center.tilt,
+      bearing: center.bearing,
+    };
+  }, [center]);
+
+  // Convert mapPadding prop to native format
+  const nativeMapPadding = useMemo(() => {
+    if (!mapPadding) {
+      return undefined;
+    }
+    return {
+      top: mapPadding.top,
+      left: mapPadding.left,
+      bottom: mapPadding.bottom,
+      right: mapPadding.right,
+    };
+  }, [mapPadding]);
+
+  return (
+    <AvoidViewFlatteningOnAndroid style={style}>
+      <MapContext.Provider value={mapContext}>
+        <GraniteNaverMapViewNativeComponent
+          ref={mapRef}
+          style={Platform.OS === 'ios' ? style : { flex: 1 }}
+          {...props}
+          center={nativeCenter}
+          mapPadding={nativeMapPadding}
+          onInitialized={handleInitialized}
+          onMarkerClick={onMarkerClick}
+          onCameraChange={handleCameraChange}
+          onTouch={handleTouch}
+          onMapClick={handleMapClick}
+        />
+        {children}
+      </MapContext.Provider>
+    </AvoidViewFlatteningOnAndroid>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './overlays';
+export * from './NaverMapView';
+export * from './types';