feat(map): ios base impl

example/package.json

@@ -30,7 +30,7 @@
     "expo-router": "3.5.4",
     "expo-status-bar": "1.12.1",
     "react": "18.2.0",
-    "react-native": "0.74.1-rc.0",
+    "react-native": "0.74.1",
     "react-native-flash-message": "^0.4.2",
     "react-native-safe-area-context": "^4.10.1",
     "react-native-screens": "^3.31.1",
@@ -40,9 +40,9 @@
     "@babel/core": "^7.20.4",
     "@babel/preset-env": "^7.20.4",
     "@babel/runtime": "^7.24.4",
-    "@react-native/babel-preset": "^0.74.81",
-    "@react-native/metro-config": "^0.74.81",
-    "@react-native/typescript-config": "^0.74.81",
+    "@react-native/babel-preset": "0.74.83",
+    "@react-native/metro-config": "0.74.83",
+    "@react-native/typescript-config": "0.74.83",
     "babel-plugin-module-resolver": "^5.0.0",
     "expo-build-properties": "~0.12.0"
   },

example/src/app/_layout.tsx

@@ -4,6 +4,7 @@ import FlashMessage from 'react-native-flash-message';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useMount } from '@mj-studio/react-util';
 import Core from '@react-native-kakao/core';
+import { KakaoMap } from '@react-native-kakao/map';
 import { issueAccessTokenWithCodeWeb, setAccessTokenWeb } from '@react-native-kakao/user';
 import { StyledSystemProvider } from '@react-native-styled-system/core';
 import { Link, Slot, useGlobalSearchParams } from 'expo-router';
@@ -42,6 +43,7 @@ export default function RootLayout() {
         restApiKey: '8b32d258f3f3fb553d86cfaa20964077',
       },
     });
+    KakaoMap.initializeKakaoMapSDK('fb975c77483d1edbe69467fca6bb2a6e').then(console.log);
   });
 
   return (

example/src/app/index.tsx

@@ -90,6 +90,11 @@ export default function Page() {
               );
           }}
         />
+        <Link href={'/map'}>
+          <Txt textDecorationLine={'underline'} align={'center'}>
+            {'@react-native-kakao/map'}
+          </Txt>
+        </Link>
         <Link href={'/user'}>
           <Txt textDecorationLine={'underline'} align={'center'}>
             {'@react-native-kakao/user'}

example/src/app/map.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import KakaoMapView from '@react-native-kakao/map';
+import type { Camera } from '@react-native-kakao/map/src/type/type';
+
+import { Box } from '../component/Box';
+import { Btn } from '../component/Btn';
+import { px } from '../util/px';
+
+const Cameras = {
+  Seolleung: {
+    lat: 37.50497126,
+    lng: 127.04905021,
+    zoomLevel: 14,
+  },
+  Gangnam: {
+    lat: 37.498040483,
+    lng: 127.02758183,
+    zoomLevel: 14,
+  },
+  Jeju: {
+    lat: 33.39530773,
+    lng: 126.54656715029,
+    zoomLevel: 8,
+  },
+} satisfies Record<string, Camera>;
+
+export default function Page() {
+  const [camera, setCamera] = useState<Camera>(Cameras.Gangnam);
+
+  return (
+    <Box flex={1} gap={8}>
+      <KakaoMapView
+        style={{ flex: 1 }}
+        buildingScale={0.5}
+        poiEnabled
+        poiScale={'regular'}
+        baseMapType={'map'}
+        camera={camera}
+        cameraAnimationDuration={1500}
+      />
+      <Box h={px(200)} bg={'white'}>
+        <Btn title={'Gangnam'} onPress={() => setCamera(Cameras.Gangnam)} />
+        <Btn title={'Seolleung'} onPress={() => setCamera(Cameras.Seolleung)} />
+      </Box>
+    </Box>
+  );
+}

example/tsconfig.json

@@ -7,6 +7,7 @@
     { "path": "../packages/navi" },
     { "path": "../packages/social" },
     { "path": "../packages/channel" },
+    { "path": "../packages/map" },
   ],
   "compilerOptions": {
     // Avoid expo-cli auto-generating a tsconfig

package.json

@@ -84,7 +84,7 @@
     "jest": "^29.7.0",
     "prettier": "3.2.5",
     "react": "18.2.0",
-    "react-native": "0.74.1-rc.0",
+    "react-native": "0.74.1",
     "react-native-builder-bob": "^0.20.0",
     "turbo": "1.13.3",
     "typescript": "5.3.3",

packages/core/package.json

@@ -122,7 +122,8 @@
       "user": "2.22.0",
       "navi": "2.22.0",
       "friend": "2.22.0",
-      "talk": "2.22.0"
+      "talk": "2.22.0",
+      "map": "2.10.4"
     },
     "android": {
       "minSdk": 21,
@@ -136,7 +137,8 @@
       "user": "2.20.1",
       "navi": "2.20.1",
       "friend": "2.20.1",
-      "talk": "2.20.1"
+      "talk": "2.20.1",
+      "map": "?"
     }
   },
   "gitHead": "57203ed1725b209e814da7cfbb71b36f52d24210",

packages/map/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 MJ Studio
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/map/README.md

@@ -0,0 +1,42 @@
+<p align="center">
+  <a href="https://rnkakao.dev">
+    <img width="160px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201234177.webp"><br/>
+  </a>
+  <h1 align="center">React Native Kakao Map</h1>
+  <p align="center">
+  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/dm/@react-native-kakao/core.svg?style=flat-square" alt="NPM downloads"></a>
+  <a href="https://www.npmjs.com/package/@react-native-kakao/core"><img src="https://img.shields.io/npm/v/@react-native-kakao/core.svg?style=flat-square" alt="NPM version"></a>
+  <a href="/LICENSE"><img src="https://img.shields.io/npm/l/@react-native-kakao/core.svg?style=flat-square" alt="License"></a>
+  <a href="https://github.com/lerna-lite/lerna-lite"><img src="https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff?style=flat-square" alt="License"></a>
+  <h3 align="center">Native Kakao SDK All In One Solution</h3>
+  </p>
+</p>
+<a href="https://rnkakao.dev">Documentation</a>
+
+
+## Documentation
+
+- [Quick Start](https://rnkakao.dev)
+
+## Contributing
+
+- [Contributing](https://github.com/mym0404/react-native-kakao/blob/main/CONTRIBUTING.md)
+- [Issues](https://github.com/mym0404/react-native-kakao/issues)
+- [PRs](https://github.com/mym0404/react-native-kakao/pulls)
+- [Documentation](https://rnkakao.dev)
+- [Code of Conduct](https://github.com/mym0404/react-native-kakao/blob/main/CODE_OF_CONDUCT.md)
+
+## License
+
+- See [LICENSE](/LICENSE)
+
+---
+
+<p align="center">
+  <a href="https://mjstudio.net/">
+    <img width="75px" src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404201239152.webp">
+  </a>
+  <p align="center">
+    Built and maintained by <a href="https://mjstudio.net/">MJ Studio</a>.
+  </p>
+</p>

packages/map/RNCKakaoMap.podspec

@@ -0,0 +1,56 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+corePackage = JSON.parse(File.read(File.join(__dir__, "..", "core", "package.json")))
+sdk_version = corePackage['sdkVersions']['ios']['map']
+
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "RNCKakaoMap"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/mym0404/react-native-kakao.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end
+
+  # Override Version by User
+  if defined?($KakaoMapSDKVersion)
+    Pod::UI.puts "#{s.name}: Using user specified Kakao SDK version '#{$KakaoMapSDKVersion}'"
+    sdk_version = $KakaoMapSDKVersion
+  end
+
+  s.dependency          'RNCKakaoCore'
+
+  # Kakao dependencies
+  s.dependency          'KakaoMapsSDK', sdk_version
+end

packages/map/Util/Util.h

@@ -0,0 +1,97 @@
+//
+//  Util.h
+//  RNCKakaoMap
+//
+//  Created by mj on 5/5/24.
+//
+
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+#import <KakaoMapsSdk/KakaoMapsSdk.h>
+#import <KakaoMapsSDK/KakaoMapsSDK-Swift.h>
+#import <react/renderer/components/RNCKakaoMapSpec/ComponentDescriptors.h>
+#import <react/renderer/components/RNCKakaoMapSpec/EventEmitters.h>
+#import <react/renderer/components/RNCKakaoMapSpec/Props.h>
+#import <react/renderer/components/RNCKakaoMapSpec/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+
+static inline BOOL isValidNumber(NSNumber* value) {
+  if (!value || [value isKindOfClass:[NSNull class]]) {
+    return false;
+  }
+
+  double INVALID = -123123123.0;
+
+  if ([value doubleValue]<INVALID + 1 && [value doubleValue]> INVALID - 1) {
+    return false;
+  }
+
+  return true;
+}
+
+static inline BOOL isValidNumber(double value) {
+  return isValidNumber([NSNumber numberWithDouble:value]);
+}
+
+static inline NSNumber* getNumberOrNil(NSNumber* value) {
+  if (!isValidNumber(value)) {
+    return nil;
+  }
+
+  return value;
+}
+
+static inline double getDoubleOrDefault(NSNumber* value, double def) {
+  if (!isValidNumber(value)) {
+    return def;
+  }
+
+  return [value doubleValue];
+}
+
+static inline double getDoubleOrDefault(double value, double def) {
+  if (!isValidNumber(value)) {
+    return def;
+  }
+
+  return value;
+}
+
+static inline NSString* getNsStr(std::string str) {
+  return [NSString stringWithUTF8String:str.c_str()];
+}
+
+static inline BOOL isNotEmptyString(NSString* str) {
+  return ![str isKindOfClass:[NSNull class]] && str && str.length > 0;
+}
+
+static inline double clamp(double a, double b, double c) {
+  return MIN(MAX(a, b), c);
+}
+
+static inline UIColor* intToColor(NSInteger intToConvert) {
+  float alpha = ((intToConvert & 0xFF000000) >> 24) / 255.0;
+  float red = ((intToConvert & 0xFF0000) >> 16) / 255.0;
+  float green = ((intToConvert & 0x00FF00) >> 8) / 255.0;
+  float blue = (intToConvert & 0x0000FF) / 255.0;
+  return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
+}
+
+static inline MapPoint* makePoint(double lat, double lng) {
+  return [[MapPoint alloc] initWithLongitude:lng latitude:lat];
+}
+
+static inline bool operator==(const RNCKakaoMapViewCameraStruct& c1,
+                              const RNCKakaoMapViewCameraStruct& c2) {
+  return c1.lat == c2.lat && c1.lng == c2.lng && c1.zoomLevel == c2.zoomLevel &&
+         c1.rotation == c2.rotation && c1.tilt == c2.tilt;
+}
+
+#define all(X) (X).begin(), (X).end()
+#define sz(X) (int)(X).size()
+#define cntt(X, x) count(all(X), x)
+#define has(X, x) (std::find(all((X)), x) != (X).end())
+#define hass(X, x) ((X).find(x) != (X).end())
+#define hasstr(X, x) (!!strstr(&(X)[0], &(x)[0]))
+#define uniq(X) std::sort(all(X)), (X).resize(std::unique(all((X))) - (X).begin())

packages/map/android/.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig
+root = true
+
+[*.{kt,kts}]
+ktlint_code_style = ktlint_official
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true