Merge pull request #15 from mj-studio-library/marker-cluster

Marker Clustering

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+lib/
+expo-config-plugin/
+docs/

.eslintrc

@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "extends": [
+    "@react-native",
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "quoteProps": "consistent",
+        "singleQuote": true,
+        "tabWidth": 2,
+        "trailingComma": "es5",
+        "useTabs": false
+      }
+    ],
+    "react-native/no-inline-styles": "off"
+  }
+}

.github/workflows/ci.yml

@@ -25,9 +25,6 @@ jobs:
       - name: Lint files
         run: yarn lint
 
-      - name: Typecheck files
-        run: yarn typecheck
-
       - name: Codegen
         run: yarn codegen
 

.gitignore

@@ -82,4 +82,6 @@ example/android/app/src/main/res/values/secret.xml
 example/ios/Secret.xcconfig
 .env
 
-docs/
+docs/
+
+example/.watchman-*

.husky/pre-commit

@@ -1,6 +1,2 @@
 echo '🔥 pre-commit hook running...'
-yarn lint
-yarn typecheck
-yarn lint:clang
-yarn build:expo-config-plugin
-git add expo-config-plugin
+yarn lint

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "quoteProps": "consistent",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

CONTRIBUTING.md

@@ -4,6 +4,50 @@ Contributions are always welcome, no matter how large or small!
 
 We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. Before contributing, please read the [code of conduct](./CODE_OF_CONDUCT.md).
 
+### Scripts
+
+The `package.json` file contains various scripts for common tasks:
+
+**Installiation, Build**
+
+- `yarn`: setup project by installing dependencies.
+- `yarn prepack`: build package (including docs, expo config plugin)
+- `yarn build:docs`: build documentation at `./docs`.
+- `yarn build:expo-config-plugin`: build expo config plugin.
+
+**Validation**
+
+- `yarn lint`: lint files with ESLint, ClangFormat, Ktlint, TypeScript
+- `yarn t`: alias for lint
+- `yarn test`: run unit tests with Jest
+- `yarn format:ios`: run formatter with ClangFormat, SwiftFormat for iOS codes
+- `yarn format:android`: run formatter with Ktlint for Android codes
+
+**Example App Build, Manipluations**
+
+- `yarn example start`: start the Metro server for the example app.
+- `yarn example android`: run the example app on Android.
+- `yarn example ios`: run the example app on iOS.
+- `yarn codegen:{android,ios}`: generate codegen output for development typing (this should be clean for running example app, prevetning redelcaration compile error)
+
+**Architecture Convert**
+
+- `new`: convert example project to new architecture
+- `old`: convert example project to old architecture
+- `new:pod`: convert example project to new architecture with pod install
+- `old:pod`: convert example project to old architecture with pod install
+
+**Util**
+
+- `yarn studio`: open android studio for example project
+- `yarn xcode`: open xcode for example project
+
+**Codegen**
+
+- `yarn codegen`: generate codegen spec for all platform
+- `yarn codegen:android`: generate android codegen spec
+- `yarn codegen:ios`: generate ios codegen spec
+
 ## Development workflow
 
 This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
@@ -163,25 +207,6 @@ You can check generated docs with `yarn build:docs` command.
 
 The documentation is published on push main branch automatically.
 
-### Scripts
-
-The `package.json` file contains various scripts for common tasks:
-
-- `yarn`: setup project by installing dependencies.
-- `yarn typecheck`: type-check files with TypeScript.
-- `yarn lint`: lint files with ESLint.
-- `yarn format:clang`: format files with clang-format.
-- `yarn lint:clang`: lint files with clang-format.
-- `yarn test`: run unit tests with Jest.
-- `yarn example start`: start the Metro server for the example app.
-- `yarn example android`: run the example app on Android.
-- `yarn example ios`: run the example app on iOS.
-- `yarn codegen:{android,ios}`: generate codegen output for development typing (this should be clean for running example app, prevetning redelcaration compile error)
-- `yarn studio`: open android studio
-- `yarn studio:example`: open android studio for example project
-- `yarn xcode`: open xcode for example project
-- `yarn build:docs`: build documentation at `./docs`.
-
 ### Sending a pull request
 
 > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).

README.md

@@ -23,7 +23,7 @@
 
 리액트 네이티브 [Naver Map](https://www.ncloud.com/product/applicationService/maps) 컴포넌트입니다.
 
-<img src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404152351235.webp" width="500" alt="preview">
+<img src="https://raw.githubusercontent.com/mym0404/image-archive/master/202404240329848.gif" width="400" alt="preview">
 
 >[!NOTE]
 >마커 클러스터링을 개발중입니다.
@@ -388,7 +388,7 @@ yarn add react-native-permissions
 ```
 
 `react-native-permission`의 각 플랫폼별 설정 방법은 [사용법](https://github.com/zoontek/react-native-permissions#setup)을 직접 참고해
-`Podfile(iOS)`, `AndroidManifest.xml(Android)` 를 적절히 변경해주시길 바랍니다. 
+`Podfile(iOS)`, `AndroidManifest.xml(Android)` 를 적절히 변경해주시길 바랍니다.
 
 #### iOS
 
@@ -490,7 +490,7 @@ useEffect(() => {
       /**
        * Note: Foreground permissions should be granted before asking for the background permissions
        * (your app can't obtain background permission without foreground permission).
-       */ 
+       */
       if(granted) {
         await Location.requestBackgroundPermissionsAsync();
       }
@@ -537,7 +537,7 @@ useEffect(() => {
 
 > [!TIP]
 > `reuseIdentifier`는 전달하지 않아도 모두 자동으로 캐싱이 됩니다.
-> 
+>
 > 되도록이면 마커는 모두 `width`, `height` prop을 사용해야합니다. 2번 타입의 경우 현재 debug/release 빌드의 크기가 `width`, `height`없이 다르게 나오는 현상이 있습니다.
 > release에서는 제대로 나옵니다.
 
@@ -576,7 +576,7 @@ image={{httpUri: 'https://example.com/image.png'}}
 iOS(new arch)에선 현재 View들에 `collapsable=false`를 설정해야 동작합니다.
 
 > [!TIP]
-> 마커의 생김새를 바꿔야 한다면 그것에 대한 의존성들을 제일 상위 자식의 `key`로 전달해야합니다. 
+> 마커의 생김새를 바꿔야 한다면 그것에 대한 의존성들을 제일 상위 자식의 `key`로 전달해야합니다.
 
 ```tsx
 <NaverMapMarkerOverlay width={width} height={height} ...>
@@ -612,8 +612,6 @@ iOS에선 단순히 `UIView`를 `UIImage`로 캔버스에 그려 표시해줍니
 | Prop                     | iOS | Android |
 |--------------------------|-----|---------|
 | isLogoInteractionEnabled | ❌   | ❌       |
-| isUseTextureViewAndroid  | ❌   | ✅       |
-| markerClustering         | 📦  | 📦      |
 | fpsLimit                 | 📦  | 📦      |
 | gestureFrictions         | 📦  | 📦      |
 
@@ -631,7 +629,6 @@ iOS에선 단순히 `UIView`를 `UIImage`로 캔버스에 그려 표시해줍니
 |----------------------------|-----|---------|
 | screenToCoordinate         | 📦  | 📦      |
 | coordinateToScreen         | 📦  | 📦      |
-| clusterMarkers             | 📦  | 📦      |
 
 ### Marker Common
 
@@ -677,8 +674,8 @@ iOS에선 단순히 `UIView`를 `UIImage`로 캔버스에 그려 표시해줍니
 - [x] Release (23.04.11)
 - [x] Support Expo with config plugin (23.04.12)
 - [x] Docs
-- [ ] Implement Clustering <- 🔥
-- [ ] Implement MutlPath, Arrow, Geometry Overlays 
+- [x] Implement Clustering (23.04.24)
+- [ ] Implement MutlPath, Arrow, Geometry Overlays <- 🔥
 
 ## Contributing
 

android/build.gradle

@@ -110,7 +110,7 @@ dependencies {
     implementation "com.facebook.react:react-native:+"
     implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
     implementation "com.naver.maps:map-sdk:${getExtOrDefault("sdkVersion")}"
-    implementation "com.google.android.gms:play-services-location:${getExtOrDefault("locationServviceVersion")}"
+    implementation "com.google.android.gms:play-services-location:${getExtOrDefault("locationServiceVersion")}"
 }
 
 if (isNewArchitectureEnabled()) {

android/gradle.properties

@@ -4,4 +4,4 @@ NaverMap_targetSdkVersion=31
 NaverMap_compileSdkVersion=31
 NaverMap_ndkversion=21.4.7075529
 NaverMap_sdkVersion=3.18.0
-NaverMap_locationServviceVersion=21.2.0
+NaverMap_locationServiceVersion=21.2.0

android/src/main/java/com/mjstudio/reactnativenavermap/RNCNaverMapPackage.kt

@@ -11,20 +11,19 @@ import com.mjstudio.reactnativenavermap.overlay.path.RNCNaverMapPathManager
 import com.mjstudio.reactnativenavermap.overlay.polygon.RNCNaverMapPolygonManager
 import com.mjstudio.reactnativenavermap.overlay.polyline.RNCNaverMapPolylineManager
 
-class NaverMapViewPackage : ReactPackage {
-    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return mutableListOf<ViewManager<*, *>>().apply {
-            add(RNCNaverMapViewManager())
-            add(RNCNaverMapMarkerManager())
-            add(RNCNaverMapCircleManager())
-            add(RNCNaverMapPolygonManager())
-            add(RNCNaverMapPolylineManager())
-            add(RNCNaverMapPathManager())
-        }
-    }
-
-    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-        return emptyList()
+class RNCNaverMapPackage : ReactPackage {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return mutableListOf<ViewManager<*, *>>().apply {
+      add(RNCNaverMapViewManager())
+      add(RNCNaverMapMarkerManager())
+      add(RNCNaverMapCircleManager())
+      add(RNCNaverMapPolygonManager())
+      add(RNCNaverMapPolylineManager())
+      add(RNCNaverMapPathManager())
     }
+  }
 
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return emptyList()
+  }
 }

android/src/main/java/com/mjstudio/reactnativenavermap/event/NaverMapCameraChangeEvent.kt

@@ -5,29 +5,32 @@ import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 
 class NaverMapCameraChangeEvent(
-    surfaceId: Int,
-    viewId: Int,
-    private val latitude: Double,
-    private val longitude: Double,
-    private val zoom: Double,
-    private val tilt: Double,
-    private val bearing: Double,
-    private val reason: Int,
+  surfaceId: Int,
+  viewId: Int,
+  private val latitude: Double,
+  private val longitude: Double,
+  private val zoom: Double,
+  private val tilt: Double,
+  private val bearing: Double,
+  private val reason: Int,
 ) : Event<NaverMapCameraChangeEvent>(surfaceId, viewId) {
-    override fun getEventName(): String = EVENT_NAME
-    override fun canCoalesce(): Boolean = false
-    override fun getCoalescingKey(): Short = 0
-    override fun getEventData(): WritableMap = Arguments.createMap().apply {
-        putDouble("latitude", latitude)
-        putDouble("longitude", longitude)
-        putDouble("zoom", zoom)
-        putDouble("tilt", tilt)
-        putDouble("bearing", bearing)
-        putInt("reason", reason)
-    }
+  override fun getEventName(): String = EVENT_NAME
+
+  override fun canCoalesce(): Boolean = false
+
+  override fun getCoalescingKey(): Short = 0
 
-    companion object {
-        const val EVENT_NAME = "onCameraChanged"
+  override fun getEventData(): WritableMap =
+    Arguments.createMap().apply {
+      putDouble("latitude", latitude)
+      putDouble("longitude", longitude)
+      putDouble("zoom", zoom)
+      putDouble("tilt", tilt)
+      putDouble("bearing", bearing)
+      putInt("reason", reason)
     }
-}
 
+  companion object {
+    const val EVENT_NAME = "onCameraChanged"
+  }
+}

android/src/main/java/com/mjstudio/reactnativenavermap/event/NaverMapInitializeEvent.kt

@@ -5,13 +5,15 @@ import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 
 class NaverMapInitializeEvent(surfaceId: Int, viewId: Int) : Event<NaverMapInitializeEvent>(surfaceId, viewId) {
-    override fun getEventName(): String = EVENT_NAME
-    override fun canCoalesce(): Boolean = false
-    override fun getCoalescingKey(): Short = 0
-    override fun getEventData(): WritableMap = Arguments.createMap()
+  override fun getEventName(): String = EVENT_NAME
 
-    companion object {
-        const val EVENT_NAME = "onInitialized"
-    }
-}
+  override fun canCoalesce(): Boolean = false
+
+  override fun getCoalescingKey(): Short = 0
 
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "onInitialized"
+  }
+}

android/src/main/java/com/mjstudio/reactnativenavermap/event/NaverMapOptionChangeEvent.kt

@@ -5,13 +5,15 @@ import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 
 class NaverMapOptionChangeEvent(surfaceId: Int, viewId: Int) : Event<NaverMapOptionChangeEvent>(surfaceId, viewId) {
-    override fun getEventName(): String = EVENT_NAME
-    override fun canCoalesce(): Boolean = false
-    override fun getCoalescingKey(): Short = 0
-    override fun getEventData(): WritableMap = Arguments.createMap()
+  override fun getEventName(): String = EVENT_NAME
 
-    companion object {
-        const val EVENT_NAME = "onOptionChanged"
-    }
-}
+  override fun canCoalesce(): Boolean = false
+
+  override fun getCoalescingKey(): Short = 0
 
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "onOptionChanged"
+  }
+}

android/src/main/java/com/mjstudio/reactnativenavermap/event/NaverMapOverlayTapEvent.kt

@@ -5,16 +5,18 @@ import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 
 class NaverMapOverlayTapEvent(
-    surfaceId: Int,
-    viewId: Int,
+  surfaceId: Int,
+  viewId: Int,
 ) : Event<NaverMapOverlayTapEvent>(surfaceId, viewId) {
-    override fun getEventName(): String = EVENT_NAME
-    override fun canCoalesce(): Boolean = false
-    override fun getCoalescingKey(): Short = 0
-    override fun getEventData(): WritableMap = Arguments.createMap()
+  override fun getEventName(): String = EVENT_NAME
 
-    companion object {
-        const val EVENT_NAME = "onTapOverlay"
-    }
-}
+  override fun canCoalesce(): Boolean = false
+
+  override fun getCoalescingKey(): Short = 0
 
+  override fun getEventData(): WritableMap = Arguments.createMap()
+
+  companion object {
+    const val EVENT_NAME = "onTapOverlay"
+  }
+}