feat(ios): local/network image marker

mym0404 · Apr 10, 2024 · 5ca7617 · 5ca7617
1 parent 9f1d7da
commit 5ca7617
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -224,8 +224,8 @@ allprojects {
 | isForceShowIcon          | ✅   | ✅       |     |
 | tintColor                | ✅   | ✅       |     |
 | image(default symbols)   | ✅   | ✅       |     |
-| image(local image)       | 📦  | ✅       |     |
-| image(network image)     | 📦  | ✅       |     |
+| image(local image)       | ✅   | ✅       |     |
+| image(network image)     | ✅   | ✅       |     |
 | image(custom view)       | 📦  | ✅       |     |
 | caption                  | 📦  | 📦      |     |
 | subcaption               | 📦  | 📦      |     |

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -8,14 +8,11 @@ import {
   NaverMapView,
   type NaverMapViewRef,
   type Region,
-  NaverMapCircleOverlay,
   NaverMapMarkerOverlay,
-  NaverMapPolygonOverlay,
 } from '@mj-studio/react-native-naver-map';
 import Slider from '@react-native-community/slider';
 import { request, PERMISSIONS } from 'react-native-permissions';
 import { formatJson } from '@mj-studio/js-util';
-import { NaverMapPathOverlay } from '../../src/component/NaverMapPathOverlay';
 
 const jejuRegion: Region = {
   latitude: 33.20530773,
@@ -84,49 +81,54 @@ export default function App() {
         onTapMap={(args) => console.log(`Map Tapped: ${formatJson(args)}`)}
       >
         <NaverMapMarkerOverlay
-          latitude={33.1165607356}
-          longitude={126.26599018}
+          latitude={33.3565607356}
+          longitude={126.48599018}
           onTap={() => console.log(1)}
-          image={'red'}
-        />
-        <NaverMapCircleOverlay
-          latitude={33.17827398}
-          longitude={126.349895729}
-          radius={50000}
-          color={'#f2f1'}
-          outlineColor={'#aaa'}
-          outlineWidth={2}
-          onTap={() => console.log('hi')}
-          isHidden
-        />
-        <NaverMapPolygonOverlay
-          outlineWidth={5}
-          outlineColor={'#f2f2'}
-          coords={[
-            { latitude: 33.5249594, longitude: 126.54180047 },
-            { latitude: 33.25683311547, longitude: 126.18193 },
-            { latitude: 33.3332807, longitude: 126.838389399 },
-          ]}
-          holes={[
-            [
-              { latitude: 33.5229594, longitude: 126.54180047 },
-              { latitude: 33.25683311547, longitude: 126.18193 },
-              { latitude: 33.3332807, longitude: 126.838389399 },
-            ],
-          ]}
-          isHidden
-        />
-        <NaverMapPathOverlay
-          coords={[
-            { latitude: 33.5249594, longitude: 126.54180047 },
-            { latitude: 33.25683311547, longitude: 126.18193 },
-            { latitude: 33.3332807, longitude: 126.838389399 },
-          ]}
-          width={8}
-          color={'red'}
-          progress={-0.6}
-          passedColor={'green'}
-        />
+          image={{ uri: 'https://picsum.photos/128/5' }}
+          width={24}
+          height={24}
+        >
+          <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
+        </NaverMapMarkerOverlay>
+        {/*<NaverMapCircleOverlay*/}
+        {/*  latitude={33.17827398}*/}
+        {/*  longitude={126.349895729}*/}
+        {/*  radius={50000}*/}
+        {/*  color={'#f2f1'}*/}
+        {/*  outlineColor={'#aaa'}*/}
+        {/*  outlineWidth={2}*/}
+        {/*  onTap={() => console.log('hi')}*/}
+        {/*  isHidden*/}
+        {/*/>*/}
+        {/*<NaverMapPolygonOverlay*/}
+        {/*  outlineWidth={5}*/}
+        {/*  outlineColor={'#f2f2'}*/}
+        {/*  coords={[*/}
+        {/*    { latitude: 33.5249594, longitude: 126.54180047 },*/}
+        {/*    { latitude: 33.25683311547, longitude: 126.18193 },*/}
+        {/*    { latitude: 33.3332807, longitude: 126.838389399 },*/}
+        {/*  ]}*/}
+        {/*  holes={[*/}
+        {/*    [*/}
+        {/*      { latitude: 33.5229594, longitude: 126.54180047 },*/}
+        {/*      { latitude: 33.25683311547, longitude: 126.18193 },*/}
+        {/*      { latitude: 33.3332807, longitude: 126.838389399 },*/}
+        {/*    ],*/}
+        {/*  ]}*/}
+        {/*  isHidden*/}
+        {/*/>*/}
+        {/*<NaverMapPathOverlay*/}
+        {/*  coords={[*/}
+        {/*    { latitude: 33.5249594, longitude: 126.54180047 },*/}
+        {/*    { latitude: 33.25683311547, longitude: 126.18193 },*/}
+        {/*    { latitude: 33.3332807, longitude: 126.838389399 },*/}
+        {/*  ]}*/}
+        {/*  width={8}*/}
+        {/*  color={'red'}*/}
+        {/*  progress={-0.6}*/}
+        {/*  passedColor={'green'}*/}
+        {/*  isHidden*/}
+        {/*/>*/}
       </NaverMapView>
 
       <View

diff --git a/ios/Overlay/Marker/RNCNaverMapMarker.h b/ios/Overlay/Marker/RNCNaverMapMarker.h
@@ -35,11 +35,7 @@
 @interface RNCNaverMapMarker : RCTView
 #endif
 
-#ifdef RCT_NEW_ARCH_ENABLED
-@property(nonatomic, weak) RCTBridgeProxy* bridge;
-#else
 @property(nonatomic, weak) RCTBridge* bridge;
-#endif
 
 @property(nonatomic, strong) NMFMarker* inner;
 

diff --git a/ios/Overlay/Marker/RNCNaverMapMarker.mm b/ios/Overlay/Marker/RNCNaverMapMarker.mm
@@ -11,6 +11,9 @@
 using namespace facebook::react;
 @interface RNCNaverMapMarker () <RCTRNCNaverMapMarkerViewProtocol>
 
+@end
+@interface RCTBridge (Private)
++ (RCTBridge*)currentBridge;
 @end
 #endif
 
@@ -21,6 +24,17 @@ @implementation RNCNaverMapMarker {
 }
 static NSMutableDictionary* _overlayImageHolder;
 
+/**
+ https://github.com/software-mansion/react-native-screens/blob/a8bb418a8428befbb264ef958a5d7f7ea743048a/ios/RNSScreenStackHeaderSubview.mm#L100
+ */
+- (RCTBridge*)bridge {
+#ifdef RCT_NEW_ARCH_ENABLED
+  return [RCTBridge currentBridge];
+#else
+  return _bridge;
+#endif
+}
+
 // static NSMutableDictionary* _overlayImageHolder;
 
 //+ (void)initialize {
@@ -185,7 +199,8 @@ - (void)setImage:(nonnull NSString*)image {
     return;
   }
 
-  _reloadImageCancellationBlock = [[_bridge moduleForClass:[RCTImageLoader class]]
+  RCTImageLoader* _Nonnull imageLoader = [self.bridge moduleForClass:[RCTImageLoader class]];
+  _reloadImageCancellationBlock = [imageLoader
       loadImageWithURLRequest:[RCTConvert NSURLRequest:image]
                          size:self.bounds.size
                         scale:RCTScreenScale()
@@ -195,10 +210,10 @@ - (void)setImage:(nonnull NSString*)image {
              partialLoadBlock:nil
               completionBlock:[self](NSError* error, UIImage* image) {
                 if (error) {
-                  NSLog(@"%@", error);
+                  NSLog(@"ERROR: %@", error);
                   return;
                 }
-                dispatch_async(dispatch_get_main_queue(), [self, &image]() {
+                dispatch_async(dispatch_get_main_queue(), [self, image]() {
                   if (_iconImageView) {
                     [_iconImageView removeFromSuperview];
                   }
@@ -273,61 +288,7 @@ - (void)setSubCaptionMinZoom:(double)subMinZoom {
 - (void)setSubCaptionMaxZoom:(double)subMaxZoom {
   _inner.subCaptionMaxZoom = subMaxZoom;
 }
-
-- (void)setImage:(NSString*)image {
-  _image = image;
-
-  if (_reloadImageCancellationBlock) {
-    _reloadImageCancellationBlock();
-    _reloadImageCancellationBlock = nil;
-  }
-
-  if (!_image) {
-    if (_iconImageView) {
-      [_iconImageView removeFromSuperview];
-    }
-
-    return;
-  }
-
-  NMFOverlayImage* overlayImage = [_overlayImageHolder valueForKey:image];
-
-  if (overlayImage != nil) {
-    if (self->_iconImageView) {
-      [self->_iconImageView removeFromSuperview];
-    }
-
-    self->_inner.iconImage = overlayImage;
-    return;
-  }
-
-  _reloadImageCancellationBlock = [[_bridge moduleForClass:[RCTImageLoader class]]
-      loadImageWithURLRequest:[RCTConvert NSURLRequest:_image]
-                         size:self.bounds.size
-                        scale:RCTScreenScale()
-                      clipped:YES
-                   resizeMode:RCTResizeModeCenter
-                progressBlock:nil
-             partialLoadBlock:nil
-              completionBlock:^(NSError* error, UIImage* image) {
-                if (error) {
-                  NSLog(@"%@", error);
-                  return;
-                }
-
-                dispatch_async(dispatch_get_main_queue(), ^{
-                  if (self->_iconImageView) {
-                    [self->_iconImageView removeFromSuperview];
-                  }
-
-                  NMFOverlayImage* overlayImage = [NMFOverlayImage overlayImageWithImage:image];
-                  self->_inner.iconImage = overlayImage;
-
-                  [_overlayImageHolder setObject:overlayImage forKey:self->_image];
-                });
-              }];
-}
- */
+*/
 
 #ifdef RCT_NEW_ARCH_ENABLED
 

diff --git a/ios/Overlay/Marker/RNCNaverMapMarkerManager.mm b/ios/Overlay/Marker/RNCNaverMapMarkerManager.mm
@@ -15,9 +15,13 @@ + (BOOL)requiresMainQueueSetup {
   return YES;
 }
 
+#ifndef RCT_NEW_ARCH_ENABLED
 - (UIView*)view {
-  return [RNCNaverMapMarker new];
+  auto marker = [RNCNaverMapMarker new];
+  marker.bridge = self.bridge;
+  return marker;
 }
+#endif
 
 // MARK: - COMMON PROPS
 RCT_EXPORT_VIEW_PROPERTY(position, NMGLatLng)

diff --git a/ios/RNCNaverMapViewManager.mm b/ios/RNCNaverMapViewManager.mm
@@ -16,7 +16,7 @@ + (BOOL)requiresMainQueueSetup {
   return YES;
 }
 
-RCT_EXPORT_MODULE(RNCNaverMapView)
+RCT_EXPORT_MODULE()
 
 #ifndef RCT_NEW_ARCH_ENABLED