feat: animateCameraTo - add zoom option

mym0404 · Apr 14, 2024 · 323d6dc · 323d6dc
1 parent eb94326
commit 323d6dc
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 25 deletions.
diff --git a/android/src/main/java/com/mjstudio/reactnativenavermap/mapview/RNCNaverMapViewManager.kt b/android/src/main/java/com/mjstudio/reactnativenavermap/mapview/RNCNaverMapViewManager.kt
@@ -395,9 +395,18 @@ class RNCNaverMapViewManager : RNCNaverMapViewManagerSpec<RNCNaverMapViewWrapper
         duration: Int,
         easing: Int,
         pivotX: Double,
-        pivotY: Double
+        pivotY: Double,
+        zoom: Double,
     ) = view.withMap {
-        CameraUpdate.scrollTo(LatLng(latitude, longitude))
+        val update = if (isValidNumber(zoom)) CameraUpdate.scrollAndZoomTo(
+            LatLng(
+                latitude,
+                longitude
+            ),
+            zoom,
+        ) else CameraUpdate.scrollTo(LatLng(latitude, longitude))
+
+        update
             .animate(CameraAnimationUtil.numberToCameraAnimationEasing(easing), duration.toLong())
             .pivot(
                 PointF(pivotX.toFloat(), pivotY.toFloat())

diff --git a/android/src/oldarch/RNCNaverMapViewManagerSpec.kt b/android/src/oldarch/RNCNaverMapViewManagerSpec.kt
@@ -48,7 +48,8 @@ internal interface RNCNaverMapViewManagerInterface<T : ViewGroup?> {
         duration: Int,
         easing: Int,
         pivotX: Double,
-        pivotY: Double
+        pivotY: Double,
+        zoom: Double,
     )
 
     fun animateCameraBy(
@@ -106,7 +107,8 @@ abstract class RNCNaverMapViewManagerSpec<T : ViewGroup> : ViewGroupManager<T>()
                 args.getInt(2),
                 args.getInt(3),
                 args.getDouble(4),
-                args.getDouble(5)
+                args.getDouble(5),
+                args.getDouble(6),
             )
 
             "animateCameraBy" -> animateCameraBy(

diff --git a/example/android/gradle.properties b/example/android/gradle.properties
@@ -27,7 +27,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -10,6 +10,7 @@ import {
   NaverMapPolygonOverlay,
   NaverMapCircleOverlay,
   NaverMapMarkerOverlay,
+  type Camera,
 } from '@mj-studio/react-native-naver-map';
 import Slider from '@react-native-community/slider';
 import { request, PERMISSIONS } from 'react-native-permissions';
@@ -22,11 +23,11 @@ const jejuRegion: Region = {
   latitudeDelta: 0.38,
   longitudeDelta: 0.8,
 };
-// const jejuCamera: Partial<Camera> = {
-//   latitude: jejuRegion.latitude + jejuRegion.latitudeDelta / 2,
-//   longitude: jejuRegion.longitude + jejuRegion.longitudeDelta / 2,
-//   zoom: 8.5,
-// };
+const jejuCamera: Camera = {
+  latitude: jejuRegion.latitude + jejuRegion.latitudeDelta / 2,
+  longitude: jejuRegion.longitude + jejuRegion.longitudeDelta / 2,
+  zoom: 16,
+};
 
 /**
  * @private
@@ -220,10 +221,7 @@ export default function App() {
         <Button
           title={'Move to'}
           onPress={() => {
-            ref.current?.animateCameraTo({
-              latitude: 33.3932536781,
-              longitude: 126.55746544,
-            });
+            ref.current?.animateCameraTo(jejuCamera);
           }}
         />
         <Button

diff --git a/ios/RNCNaverMapView.mm b/ios/RNCNaverMapView.mm
@@ -185,13 +185,15 @@ - (void)animateCameraTo:(double)latitude
                duration:(NSInteger)duration
                  easing:(NSInteger)easing
                  pivotX:(double)pivotX
-                 pivotY:(double)pivotY {
+                 pivotY:(double)pivotY
+                   zoom:(double)zoom {
   [_view animateCameraTo:latitude
                longitude:longitude
                 duration:duration
                   easing:easing
                   pivotX:pivotX
-                  pivotY:pivotY];
+                  pivotY:pivotY
+                    zoom:zoom];
 }
 
 - (void)animateCameraBy:(double)x

diff --git a/ios/RNCNaverMapViewImpl.h b/ios/RNCNaverMapViewImpl.h
@@ -94,7 +94,8 @@ using namespace facebook::react;
                duration:(NSInteger)duration
                  easing:(NSInteger)easing
                  pivotX:(double)pivotX
-                 pivotY:(double)pivotY;
+                 pivotY:(double)pivotY
+                   zoom:(double)zoom;
 - (void)animateCameraBy:(double)x
                       y:(double)y
                duration:(NSInteger)duration

diff --git a/ios/RNCNaverMapViewImpl.mm b/ios/RNCNaverMapViewImpl.mm
@@ -295,9 +295,13 @@ - (void)animateCameraTo:(double)latitude
                duration:(NSInteger)duration
                  easing:(NSInteger)easing
                  pivotX:(double)pivotX
-                 pivotY:(double)pivotY {
+                 pivotY:(double)pivotY
+                   zoom:(double)zoom {
   NMFCameraUpdate* update =
-      [NMFCameraUpdate cameraUpdateWithScrollTo:NMGLatLngMake(latitude, longitude)];
+      isValidNumber(zoom)
+          ? [NMFCameraUpdate cameraUpdateWithScrollTo:NMGLatLngMake(latitude, longitude)
+                                               zoomTo:zoom]
+          : [NMFCameraUpdate cameraUpdateWithScrollTo:NMGLatLngMake(latitude, longitude)];
 
   update.animation = getEasingAnimation(easing);
   update.animationDuration = (NSTimeInterval)((double)duration) / 1000;

diff --git a/ios/RNCNaverMapViewManager.mm b/ios/RNCNaverMapViewManager.mm
@@ -106,12 +106,14 @@ - (UIView*)view {
                                        : (NSInteger)duration easing
                                        : (NSInteger)easing pivotX
                                        : (double)pivotX pivotY
-                                       : (double)pivotY, latitude longitude
+                                       : (double)pivotY zoom
+                                       : (double)zoom, latitude longitude
                                        : longitude duration
                                        : duration easing
                                        : easing pivotX
                                        : pivotX pivotY
-                                       : pivotY)
+                                       : pivotY zoom
+                                       : zoom)
 QUICK_RCT_EXPORT_COMMAND_METHOD_PARAMS(animateCameraBy, x
                                        : (double)x y
                                        : (double)y duration

diff --git a/src/component/NaverMapView.tsx b/src/component/NaverMapView.tsx
@@ -364,7 +364,9 @@ export interface NaverMapViewRef {
   /**
    * 카메라를 애니메이션과 함께 이동시킵니다.
    */
-  animateCameraTo: (params: Coord & CameraMoveBaseParams) => void;
+  animateCameraTo: (
+    params: Coord & CameraMoveBaseParams & { zoom?: number }
+  ) => void;
   /**
    * 카메라를 특정 위치만큼 델타값으로 애니메이션과 함께 이동시킵니다.
    */
@@ -494,7 +496,14 @@ export const NaverMapView = forwardRef(
     useImperativeHandle(
       ref,
       () => ({
-        animateCameraTo: ({ duration, easing, latitude, longitude, pivot }) => {
+        animateCameraTo: ({
+          duration,
+          easing,
+          latitude,
+          longitude,
+          pivot,
+          zoom = Const.NULL_NUMBER,
+        }) => {
           if (innerRef.current) {
             Commands.animateCameraTo(
               innerRef.current,
@@ -503,7 +512,8 @@ export const NaverMapView = forwardRef(
               duration ?? Const.DEFAULT_ANIM_DURATION,
               cameraEasingToNumber(easing ?? Const.DEFAULT_EASING),
               pivot?.x ?? 0.5,
-              pivot?.y ?? 0.5
+              pivot?.y ?? 0.5,
+              zoom
             );
           }
         },

diff --git a/src/spec/RNCNaverMapViewNativeComponent.ts b/src/spec/RNCNaverMapViewNativeComponent.ts
@@ -145,7 +145,8 @@ interface NaverMapNativeCommands {
     duration?: Int32,
     easing?: Int32 /*'EaseIn' | 'None' | 'Linear' | 'Fly' | 'EaseOut'*/,
     pivotX?: Double,
-    pivotY?: Double
+    pivotY?: Double,
+    zoom?: Double
   ) => void;
   animateCameraBy: (
     ref: React.ElementRef<ComponentType>,