@react-native-kakao/map 2.2.7 → 3.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-native-kakao/map",
-  "description": "React Native Kakao Map SDK",
-  "version": "2.2.7",
+  "version": "3.2.0",
+  "description": "Kakao Maps for Android and iOS using Expo Modules",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/src/index.d.ts",
@@ -12,81 +12,40 @@
     "lib",
     "android",
     "ios",
-    "cpp",
     "*.podspec",
-    "!ios/build",
+    "expo-module.config.json",
     "!android/build",
-    "!android/gradle",
-    "!android/gradlew",
-    "!android/gradlew.bat",
-    "!android/local.properties",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!**/.*"
+    "!ios/build"
   ],
   "author": "MJ Studio <mym0404@gmail.com> (https://github.com/mym0404)",
-  "homepage": "https://rnkakao.dev",
-  "scripts": {
-    "test": "jest",
-    "prepare": "husky",
-    "release": "./script/release.sh",
-    "codegen:android": "cd ../../example/android && ./gradlew generateCodegenArtifactsFromSchema",
-    "codegen:ios": "node ../../example/node_modules/react-native/scripts/generate-codegen-artifacts.js --path example/ --outputPath ../../example/ios",
-    "codegen": "yarn codegen:android && yarn codegen:ios",
-    "prepack": "bob build",
-    "clean": "del-cli android/ lib"
-  },
-  "keywords": [
-    "react-native",
-    "kakao",
-    "kakao-sdk",
-    "typescript",
-    "javascript",
-    "react",
-    "expo",
-    "kakao-navi",
-    "kakao-navigation",
-    "kakao-api",
-    "login",
-    "auth"
-  ],
+  "homepage": "https://rnkakao.mjstudio.net",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/mym0404/react-native-kakao.git",
-    "directory": "packages/navi"
+    "directory": "packages/map"
   },
-  "license": "MIT",
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
-  "devDependencies": {
-    "@react-native-kakao/core": "2.2.7",
-    "@types/invariant": "^2",
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.44",
-    "del-cli": "^5.1.0",
-    "jest": "^29.7.0",
-    "react": "18.2.0",
-    "react-native": "0.74.0",
-    "react-native-builder-bob": "^0.20.0",
-    "typescript": "5.1.6"
+  "scripts": {
+    "prepack": "bob build && node ../../script/remove-web-declaration-files.ts .",
+    "clean": "del-cli lib android/build ios/build"
   },
   "peerDependencies": {
-    "@react-native-kakao/core": "2.2.7",
+    "expo": ">=52.0.0",
     "react": "*",
-    "react-native": "*"
+    "react-native": ">=0.76.0"
   },
-  "workspaces": [
-    "example",
-    "packages/*"
-  ],
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/lib/"
-    ]
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "del-cli": "^5.1.0",
+    "expo": "^58.0.19",
+    "react": "19.3.0",
+    "react-native": "0.88.0",
+    "react-native-builder-bob": "0.40.7",
+    "typescript": "~6.0.3"
   },
   "react-native-builder-bob": {
     "source": "src",
@@ -101,17 +60,5 @@
         }
       ]
     ]
-  },
-  "codegenConfig": {
-    "name": "RNCKakaoMapSpec",
-    "type": "all",
-    "jsSrcsDir": "src",
-    "android": {
-      "javaPackageName": "net.mjstudio.rnkakao.map"
-    }
-  },
-  "dependencies": {
-    "@mj-studio/js-util": "1.1.3"
-  },
-  "gitHead": "5a64db286916be9c5f33ce13695790afcb963483"
-}
+  }
+}

package/src/index.tsx

@@ -0,0 +1,322 @@
+import { forwardRef, type Ref, useImperativeHandle, useRef } from 'react';
+import type { NativeSyntheticEvent } from 'react-native';
+import { requireNativeModule, requireNativeView } from 'expo';
+
+import type {
+  CameraMoveEvent,
+  CameraPosition,
+  CameraUpdate,
+  Coordinate,
+  KakaoMapError,
+  KakaoMapViewProps,
+  KakaoMapViewRef,
+  MapClickEvent,
+  MapInfo,
+  MapPadding,
+  MapViewport,
+  PoiClickEvent,
+  ScreenPoint,
+} from './types';
+import type { AdvancedCameraOperationEvent } from './types-camera';
+import type { DimScreenEvent } from './types-dim';
+import type { MapGuiEvent } from './types-gui';
+import type { LabelAnimationEvent, LabelClickEvent, LabelRuntimeState } from './types-labels';
+import type { RouteAnimationStopEvent, RouteCounts, RouteProgressEvent } from './types-routes';
+import type { ShapeAnimationStopEvent, ShapeCounts } from './types-shapes';
+
+export type { MapImageSource } from './types-assets';
+export type * from './types-labels';
+export type * from './types-shapes';
+export type * from './types-routes';
+export type * from './types-gui';
+export type * from './types-dim';
+export type * from './types-utilities';
+export type * from './types-camera';
+
+export type {
+  CameraOptions,
+  CameraUpdate,
+  CameraPosition,
+  CameraMoveEvent,
+  Coordinate,
+  KakaoMapError,
+  KakaoMapViewProps,
+  KakaoMapViewRef,
+  MapClickEvent,
+  MapGesture,
+  MapInfo,
+  MapOptions,
+  MapOverlay,
+  MapPadding,
+  MapType,
+  MapWidgetPosition,
+  MapViewport,
+  PoiClickEvent,
+  ScreenPoint,
+} from './types';
+
+const moduleName = 'RNCKakaoMap';
+const NativeView = requireNativeView<
+  Omit<
+    KakaoMapViewProps,
+    | 'onError'
+    | 'onCameraMoveStart'
+    | 'onCameraIdle'
+    | 'onMapClick'
+    | 'onMapLongClick'
+    | 'onTerrainClick'
+    | 'onViewportClick'
+    | 'onVisibilityChanged'
+    | 'onFocusChanged'
+    | 'onPoiClick'
+    | 'onMapTypeChanged'
+    | 'onPaddingChanged'
+    | 'onViewportChanged'
+    | 'onLabelClick'
+    | 'onLabelAnimationStopped'
+    | 'onLabelsChanged'
+    | 'onShapeAnimationStop'
+    | 'onShapesChanged'
+    | 'onRoutesChanged'
+    | 'onRouteProgress'
+    | 'onRouteAnimationStop'
+    | 'onGuiEvent'
+    | 'onDimScreenEvent'
+    | 'onCameraOperation'
+  > & {
+    ref: Ref<NativeMapRef>;
+    onError?: (event: NativeSyntheticEvent<KakaoMapError>) => void;
+    onCameraMoveStart?: (event: NativeSyntheticEvent<CameraMoveEvent>) => void;
+    onCameraIdle?: (
+      event: NativeSyntheticEvent<CameraMoveEvent & { camera: CameraPosition }>,
+    ) => void;
+    onMapClick?: (event: NativeSyntheticEvent<MapClickEvent>) => void;
+    onMapLongClick?: (event: NativeSyntheticEvent<Coordinate>) => void;
+    onTerrainClick?: (event: NativeSyntheticEvent<Coordinate>) => void;
+    onViewportClick?: (event: NativeSyntheticEvent<MapClickEvent>) => void;
+    onVisibilityChanged?: (event: NativeSyntheticEvent<{ visible: boolean }>) => void;
+    onFocusChanged?: (event: NativeSyntheticEvent<{ focused: boolean }>) => void;
+    onPoiClick?: (event: NativeSyntheticEvent<PoiClickEvent>) => void;
+    onMapTypeChanged?: (event: NativeSyntheticEvent<{ viewInfoName: string }>) => void;
+    onPaddingChanged?: (event: NativeSyntheticEvent<MapPadding>) => void;
+    onViewportChanged?: (event: NativeSyntheticEvent<MapViewport>) => void;
+    onLabelClick?: (event: NativeSyntheticEvent<LabelClickEvent>) => void;
+    onLabelAnimationStopped?: (event: NativeSyntheticEvent<LabelAnimationEvent>) => void;
+    onLabelsChanged?: (event: NativeSyntheticEvent<LabelRuntimeState>) => void;
+    onShapeAnimationStop?: (event: NativeSyntheticEvent<ShapeAnimationStopEvent>) => void;
+    onShapesChanged?: (event: NativeSyntheticEvent<ShapeCounts>) => void;
+    onRoutesChanged?: (event: NativeSyntheticEvent<RouteCounts>) => void;
+    onRouteProgress?: (event: NativeSyntheticEvent<RouteProgressEvent>) => void;
+    onRouteAnimationStop?: (event: NativeSyntheticEvent<RouteAnimationStopEvent>) => void;
+    onGuiEvent?: (event: NativeSyntheticEvent<MapGuiEvent>) => void;
+    onDimScreenEvent?: (event: NativeSyntheticEvent<DimScreenEvent>) => void;
+    onCameraOperation?: (event: NativeSyntheticEvent<AdvancedCameraOperationEvent>) => void;
+  }
+>(moduleName);
+
+type NativeMapRef = Omit<
+  KakaoMapViewRef,
+  'moveCamera' | 'updateCamera' | 'showInfoWindow' | 'moveInfoWindow'
+> & {
+  moveCamera: (camera: NonNullable<KakaoMapViewProps['camera']>, duration: number) => Promise<void>;
+  getCamera: () => Promise<CameraPosition>;
+  updateCamera: (update: CameraUpdate, duration: number) => Promise<void>;
+  getMapInfo: () => Promise<MapInfo>;
+  screenToCoordinate: (point: ScreenPoint) => Promise<Coordinate>;
+  coordinateToScreen: (coordinate: Coordinate) => Promise<ScreenPoint>;
+  clearCache: () => Promise<void>;
+  showInfoWindow: (id: string, autoMove: boolean, duration: number | null) => Promise<void>;
+  moveInfoWindow: (id: string, position: Coordinate, duration: number) => Promise<void>;
+};
+
+export function initializeKakaoMapSDK(nativeAppKey: string): Promise<void> {
+  return requireNativeModule<{ initialize: (key: string) => Promise<void> }>(moduleName).initialize(
+    nativeAppKey,
+  );
+}
+
+export const KakaoMapView = forwardRef<KakaoMapViewRef, KakaoMapViewProps>(function KakaoMapView(
+  {
+    onMapReady,
+    onError,
+    onCameraMoveStart,
+    onCameraIdle,
+    onMapClick,
+    onMapLongClick,
+    onTerrainClick,
+    onViewportClick,
+    onVisibilityChanged,
+    onFocusChanged,
+    onPoiClick,
+    onCompassClick,
+    onMapTypeChanged,
+    onPaddingChanged,
+    onViewportChanged,
+    onLabelClick,
+    onLabelAnimationStopped,
+    onLabelsChanged,
+    onShapeAnimationStop,
+    onShapesChanged,
+    onRoutesChanged,
+    onRouteProgress,
+    onRouteAnimationStop,
+    onGuiEvent,
+    onDimScreenEvent,
+    onCameraOperation,
+    ...props
+  },
+  ref,
+) {
+  const nativeRef = useRef<NativeMapRef>(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      async moveCamera(camera, options) {
+        await getView().moveCamera(camera, options?.duration ?? 0);
+      },
+      async getCamera() {
+        return getView().getCamera();
+      },
+      async updateCamera(update, options) {
+        await getView().updateCamera(update, options?.duration ?? 0);
+      },
+      async getMapInfo() {
+        return getView().getMapInfo();
+      },
+      async screenToCoordinate(point) {
+        return getView().screenToCoordinate(point);
+      },
+      async coordinateToScreen(coordinate) {
+        return getView().coordinateToScreen(coordinate);
+      },
+      async clearCache() {
+        await getView().clearCache();
+      },
+      async runLabelCommand(command) {
+        await getView().runLabelCommand(command);
+      },
+      async getLabelCapabilities() {
+        return getView().getLabelCapabilities();
+      },
+      async getLabelState() {
+        return getView().getLabelState();
+      },
+      async applyShapes(scene) {
+        return getView().applyShapes(scene);
+      },
+      async executeShapeCommand(command) {
+        return getView().executeShapeCommand(command);
+      },
+      async applyRoutes(scene) {
+        return getView().applyRoutes(scene);
+      },
+      async executeRouteCommand(command) {
+        return getView().executeRouteCommand(command);
+      },
+      async applyGui(scene) {
+        await getView().applyGui(scene);
+      },
+      async showInfoWindow(id, options) {
+        await getView().showInfoWindow(id, options?.autoMove ?? false, options?.duration ?? null);
+      },
+      async hideInfoWindow(id) {
+        await getView().hideInfoWindow(id);
+      },
+      async moveInfoWindow(id, position, options) {
+        await getView().moveInfoWindow(id, position, options?.duration ?? 0);
+      },
+      async showWidget(id) {
+        await getView().showWidget(id);
+      },
+      async hideWidget(id) {
+        await getView().hideWidget(id);
+      },
+      async positionWidget(id, position) {
+        await getView().positionWidget(id, position);
+      },
+      async rotateWidget(id, rotation) {
+        await getView().rotateWidget(id, rotation);
+      },
+      async startGuiAnimation(id) {
+        await getView().startGuiAnimation(id);
+      },
+      async stopGuiAnimation(id) {
+        await getView().stopGuiAnimation(id);
+      },
+      async controlAnimatedImage(ownerType, ownerId, componentId, action) {
+        await getView().controlAnimatedImage(ownerType, ownerId, componentId, action);
+      },
+      async getGuiStatus() {
+        return getView().getGuiStatus();
+      },
+      async applyDimScreen(options) {
+        await getView().applyDimScreen(options);
+      },
+      async setDimHighlightVisible(id, visible) {
+        await getView().setDimHighlightVisible(id, visible);
+      },
+      async startDimAnimation(id) {
+        await getView().startDimAnimation(id);
+      },
+      async stopDimAnimation(id) {
+        await getView().stopDimAnimation(id);
+      },
+      async getDimScreenStatus() {
+        return getView().getDimScreenStatus();
+      },
+      async executeUtilityCommand(command) {
+        return getView().executeUtilityCommand(command);
+      },
+      async requestPoiState() {
+        return getView().requestPoiState();
+      },
+      async executeCameraCommand(command) {
+        return getView().executeCameraCommand(command);
+      },
+    }),
+    [],
+  );
+
+  return (
+    <NativeView
+      {...props}
+      ref={nativeRef}
+      onMapReady={() => onMapReady?.()}
+      onError={(event) => onError?.(event.nativeEvent)}
+      onCameraMoveStart={(event) => onCameraMoveStart?.(event.nativeEvent)}
+      onCameraIdle={(event) => onCameraIdle?.(event.nativeEvent)}
+      onMapClick={(event) => onMapClick?.(event.nativeEvent)}
+      onMapLongClick={(event) => onMapLongClick?.(event.nativeEvent)}
+      onTerrainClick={(event) => onTerrainClick?.(event.nativeEvent)}
+      onViewportClick={(event) => onViewportClick?.(event.nativeEvent)}
+      onVisibilityChanged={(event) => onVisibilityChanged?.(event.nativeEvent)}
+      onFocusChanged={(event) => onFocusChanged?.(event.nativeEvent)}
+      onPoiClick={(event) => onPoiClick?.(event.nativeEvent)}
+      onCompassClick={() => onCompassClick?.()}
+      onMapTypeChanged={(event) => onMapTypeChanged?.(event.nativeEvent)}
+      onPaddingChanged={(event) => onPaddingChanged?.(event.nativeEvent)}
+      onViewportChanged={(event) => onViewportChanged?.(event.nativeEvent)}
+      onLabelClick={(event) => onLabelClick?.(event.nativeEvent)}
+      onLabelAnimationStopped={(event) => onLabelAnimationStopped?.(event.nativeEvent)}
+      onLabelsChanged={(event) => onLabelsChanged?.(event.nativeEvent)}
+      onShapeAnimationStop={(event) => onShapeAnimationStop?.(event.nativeEvent)}
+      onShapesChanged={(event) => onShapesChanged?.(event.nativeEvent)}
+      onRoutesChanged={(event) => onRoutesChanged?.(event.nativeEvent)}
+      onRouteProgress={(event) => onRouteProgress?.(event.nativeEvent)}
+      onRouteAnimationStop={(event) => onRouteAnimationStop?.(event.nativeEvent)}
+      onGuiEvent={(event) => onGuiEvent?.(event.nativeEvent)}
+      onDimScreenEvent={(event) => onDimScreenEvent?.(event.nativeEvent)}
+      onCameraOperation={(event) => onCameraOperation?.(event.nativeEvent)}
+    />
+  );
+
+  function getView() {
+    if (!nativeRef.current) {
+      throw Object.assign(new Error('The map view is not mounted.'), {
+        code: 'ERR_KAKAO_MAP_VIEW_DESTROYED',
+      });
+    }
+
+    return nativeRef.current;
+  }
+});

package/src/index.web.tsx

@@ -0,0 +1,46 @@
+import { forwardRef } from 'react';
+
+import type { KakaoMapViewProps, KakaoMapViewRef } from './types';
+
+export type { MapImageSource } from './types-assets';
+export type * from './types-labels';
+export type * from './types-shapes';
+export type * from './types-routes';
+export type * from './types-gui';
+export type * from './types-dim';
+export type * from './types-utilities';
+export type * from './types-camera';
+
+export type {
+  CameraOptions,
+  CameraUpdate,
+  CameraPosition,
+  CameraMoveEvent,
+  Coordinate,
+  KakaoMapError,
+  KakaoMapViewProps,
+  KakaoMapViewRef,
+  MapClickEvent,
+  MapGesture,
+  MapInfo,
+  MapOptions,
+  MapOverlay,
+  MapPadding,
+  MapType,
+  MapWidgetPosition,
+  MapViewport,
+  PoiClickEvent,
+  ScreenPoint,
+} from './types';
+
+const unsupported = () =>
+  Object.assign(new Error('KakaoMapView supports Android and iOS only.'), {
+    code: 'ERR_KAKAO_MAP_UNSUPPORTED_PLATFORM',
+  });
+
+export async function initializeKakaoMapSDK(_nativeAppKey: string): Promise<void> {
+  throw unsupported();
+}
+export const KakaoMapView = forwardRef<KakaoMapViewRef, KakaoMapViewProps>(function KakaoMapView() {
+  throw unsupported();
+});

package/src/types-assets.ts

@@ -0,0 +1,8 @@
+/** A URI returned by `Image.resolveAssetSource` or a file, HTTP, or HTTPS URI. */
+export type MapImageSource = {
+  uri: string;
+  /** Requested native display width in density-independent points. */
+  width?: number;
+  /** Requested native display height in density-independent points. */
+  height?: number;
+};

package/src/types-camera.ts

@@ -0,0 +1,97 @@
+import type { Coordinate, MapGesture, ScreenPoint } from './types';
+
+export type AdvancedCameraAnimation = {
+  /** Milliseconds. Zero dispatches without an animation. */
+  duration: number;
+  autoElevation?: boolean;
+  consecutive?: boolean;
+};
+
+export type HeightCameraPosition = Coordinate & {
+  /** Camera height in the native map coordinate system. */
+  height: number;
+  /** Degrees from the vertical. */
+  tilt: number;
+  /** Counterclockwise camera angle from north in degrees. */
+  rotation: number;
+};
+
+export type CameraReferenceGesture = Extract<
+  MapGesture,
+  'rotate' | 'zoom' | 'tilt' | 'rotateZoom' | 'oneFingerZoom'
+>;
+
+type AnimatedAdvancedCameraCommand = {
+  animation?: AdvancedCameraAnimation;
+  /**
+   * Requests an actual-completion event. Unsupported platforms reject this field rather than
+   * reporting dispatch as completion.
+   */
+  operationId?: string;
+};
+
+export type AdvancedCameraCommand =
+  | { type: 'getCapabilities' }
+  | { type: 'getState' }
+  | ({ type: 'moveToHeight'; camera: HeightCameraPosition } & AnimatedAdvancedCameraCommand)
+  | ({
+      type: 'transform';
+      delta: Partial<Coordinate> & {
+        height?: number;
+        rotation?: number;
+        tilt?: number;
+      };
+    } & AnimatedAdvancedCameraCommand)
+  | ({
+      type: 'fit';
+      coordinates: Coordinate[];
+      /** Logical React Native pixels. */
+      padding?: number;
+      levelLimit?: number;
+    } & AnimatedAdvancedCameraCommand)
+  | {
+      type: 'canShow';
+      coordinates: Coordinate[];
+      zoomLevel: number;
+      rotation?: number;
+      weight?: number;
+      /** Logical React Native pixels. */
+      rect?: ScreenPoint & { width: number; height: number };
+    }
+  | { type: 'heightAtLevel'; zoomLevel: number }
+  | ({ type: 'resetOrientation' } & AnimatedAdvancedCameraCommand)
+  | { type: 'setBackToNorthDuringAutoElevation'; enabled: boolean }
+  | { type: 'setReferencePointLock'; gesture: CameraReferenceGesture; locked: boolean };
+
+export type AdvancedCameraCapabilities = {
+  transform: boolean;
+  absoluteHeight: boolean;
+  heightAtLevel: boolean;
+  fit: { padding: boolean; levelLimit: boolean };
+  canShow: { basic: boolean; rotation: boolean; weight: boolean; rect: boolean };
+  resetOrientation: boolean;
+  backToNorthDuringAutoElevation: boolean;
+  animation: {
+    autoElevation: boolean;
+    consecutive: boolean;
+    operationCompletion: boolean;
+  };
+  referencePoint: { supported: boolean; gestures: CameraReferenceGesture[] };
+};
+
+export type AdvancedCameraState = HeightCameraPosition & { zoomLevel: number };
+
+export type AdvancedCameraCommandResult =
+  | { type: 'capabilities'; capabilities: AdvancedCameraCapabilities }
+  | { type: 'state'; camera: AdvancedCameraState }
+  | { type: 'dispatched'; operationId?: string }
+  | { type: 'canShow'; value: boolean }
+  | { type: 'heightAtLevel'; height: number }
+  | { type: 'applied' };
+
+export type AdvancedCameraOperationEvent = {
+  operationId: string;
+  status: 'completed' | 'superseded';
+  /** Actual SDK state at the time the event was emitted. */
+  camera?: AdvancedCameraState;
+};

package/src/types-dim.ts

@@ -0,0 +1,54 @@
+import type {
+  GeographicPolygonGeometry,
+  ModelPolygonGeometry,
+  PolygonStyleSet,
+  ShapeWaveAnimation,
+} from './types-shapes';
+
+export type DimScreenCover = 'map' | 'mapAndRoute' | 'mapAndLabel' | 'all';
+
+export type DimScreenHighlight = {
+  id: string;
+  styleSetId: string;
+  geometry: GeographicPolygonGeometry | ModelPolygonGeometry;
+  visible?: boolean;
+  zIndex?: number;
+};
+
+export type DimScreenOptions = {
+  enabled: boolean;
+  color: string;
+  /** iOS SDK 2.12.19 does not support `mapAndRoute`. */
+  cover: DimScreenCover;
+  /** Android only; the iOS dim screen has no z-order property. */
+  zIndex?: number;
+  styleSets?: PolygonStyleSet[];
+  highlights?: DimScreenHighlight[];
+  animations?: ShapeWaveAnimation[];
+};
+
+export type DimScreenStatus = {
+  /** Null when the platform SDK exposes no getter for the applied configuration. */
+  enabled: boolean | null;
+  color: string | null;
+  cover: DimScreenCover | null;
+  highlights: {
+    id: string;
+    visible: boolean;
+    geometryType: DimScreenHighlight['geometry']['type'];
+  }[];
+  /** `running` is null when the native SDK does not expose animator state. */
+  animations: { id: string; running: boolean | null }[];
+  counts: { highlights: number; animations: number };
+  capabilities: {
+    coversRoute: boolean;
+    modelHighlights: boolean;
+    modelOrientation: boolean;
+    animations: boolean;
+    animationDuration: boolean;
+    animationState: boolean;
+    nativeConfigurationState: boolean;
+  };
+};
+
+export type DimScreenEvent = { type: 'animationStopped'; id: string };