Feat/allow reanimated animation markerview (#3294)

* feat: allow reanimated animation for marker view

* feat: fix build error

* fix lint errors

Author: jleprinc

android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewManager.kt

@@ -16,6 +16,8 @@ import com.mapbox.maps.ScreenCoordinate
 import com.mapbox.maps.viewannotation.ViewAnnotationManager
 import com.rnmapbox.rnmbx.components.mapview.RNMBXMapView
 import com.rnmapbox.rnmbx.v11compat.annotation.*
+import com.rnmapbox.rnmbx.utils.LatLng
+import com.rnmapbox.rnmbx.utils.GeoJSONUtils.toGNPointGeometry
 
 class RNMBXMarkerViewManager(reactApplicationContext: ReactApplicationContext) :
     AbstractEventEmitter<RNMBXMarkerView>(reactApplicationContext),
@@ -35,8 +37,9 @@ class RNMBXMarkerViewManager(reactApplicationContext: ReactApplicationContext) :
     }
 
     @ReactProp(name = "coordinate")
-    override fun setCoordinate(markerView: RNMBXMarkerView, geoJSONStr: Dynamic) {
-        markerView.setCoordinate(toPointGeometry(geoJSONStr.asString()))
+    override fun setCoordinate(markerView: RNMBXMarkerView, value: Dynamic) {
+        val array = value.asArray()
+        markerView.setCoordinate(toGNPointGeometry(LatLng(array.getDouble(1), array.getDouble(0))))
     }
 
     @ReactProp(name = "anchor")

android/src/main/java/com/rnmapbox/rnmbx/utils/GeoJSONUtils.kt

@@ -109,6 +109,11 @@ object GeoJSONUtils {
         return map
     }
 
+    @JvmStatic
+    fun toGNPointGeometry(latLng: LatLng): Point? {
+        return Point.fromLngLat(latLng.getLongitude(), latLng.getLatitude())
+    }
+
     fun toPointGeometry(latLng: LatLng): WritableMap {
         val geometry: WritableMap = WritableNativeMap()
         geometry.putString("type", "Point")

ios/RNMBX/RNMBXMarkerView.swift

@@ -42,7 +42,7 @@ public class RNMBXMarkerView: UIView, RNMBXMapComponent {
 
   var didAddToMap = false
 
-  @objc public var coordinate: String? {
+  @objc public var coordinate: Array<NSNumber>? {
     didSet {
       update()
     }
@@ -79,32 +79,19 @@ public class RNMBXMarkerView: UIView, RNMBXMapComponent {
   }
 
   var point: Point? {
-    guard let _coordinate = coordinate else {
-      Logger.log(level: .error, message: "[getPoint] No coordinates were set")
-      return nil
+    guard let _lat = coordinate?[1] else {
+        Logger.log(level: .error, message: "[getPoint] No latitude were set")
+        return nil
     }
-     
-    guard let _data = _coordinate.data(using: .utf8) else {
-      Logger.log(level: .error, message: "[getPoint] Cannot serialize coordinate")
-      return nil
-    }
-     
-    guard let _feature = try? JSONDecoder().decode(Feature.self, from: _data) else {
-      Logger.log(level: .error, message: "[getPoint] Cannot parse serialized coordinate")
-      return nil
+    guard let _lon = coordinate?[0] else {
+        Logger.log(level: .error, message: "[getPoint] No Longitude were set")
+        return nil
     }
+    
+    let coord = CLLocationCoordinate2D(
+        latitude: Double(_lat) as CLLocationDegrees, longitude: Double(_lon) as CLLocationDegrees);
 
-    guard let _geometry = _feature.geometry else {
-      Logger.log(level: .error, message: "[getPoint] Invalid geometry")
-      return nil
-    }
-
-    guard case .point(let _point) = _geometry else {
-      Logger.log(level: .error, message: "[getPoint] Invalid point")
-      return nil
-    }
-
-    return _point
+    return Point(coord)
   }
 
   // MARK: - RNMBXMapComponent methods

ios/RNMBX/RNMBXMarkerViewManager.m

@@ -4,7 +4,7 @@
 
 @interface RCT_EXTERN_REMAP_MODULE(RNMBXMarkerView, RNMBXMarkerViewManager, RCTViewManager)
 
-RCT_EXPORT_VIEW_PROPERTY(coordinate, NSString)
+RCT_EXPORT_VIEW_PROPERTY(coordinate, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(anchor, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(allowOverlap, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(allowOverlapWithPuck, BOOL)

src/components/MarkerView.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Platform, NativeModules, type ViewProps } from 'react-native';
+import { NativeModules, Platform, type ViewProps } from 'react-native';
 
+import RNMBXMakerViewContentCoponent from '../specs/RNMBXMarkerViewContentNativeComponent';
+import NativeMarkerViewComponent from '../specs/RNMBXMarkerViewNativeComponent';
+import { type Position } from '../types/Position';
 import { toJSONString } from '../utils';
 import { makePoint } from '../utils/geoUtils';
-import { type Position } from '../types/Position';
-import NativeMarkerViewComponent from '../specs/RNMBXMarkerViewNativeComponent';
-import RNMBXMakerViewContentCoponent from '../specs/RNMBXMarkerViewContentNativeComponent';
 
 import PointAnnotation from './PointAnnotation';
 
@@ -116,7 +116,10 @@ class MarkerView extends React.PureComponent<Props> {
           },
           this.props.style,
         ]}
-        coordinate={this._getCoordinate(this.props.coordinate)}
+        coordinate={[
+          Number(this.props.coordinate[0]),
+          Number(this.props.coordinate[1]),
+        ]}
         anchor={anchor}
         allowOverlap={this.props.allowOverlap}
         allowOverlapWithPuck={this.props.allowOverlapWithPuck}

src/specs/RNMBXMarkerViewNativeComponent.ts

@@ -1,6 +1,8 @@
 import type { HostComponent, ViewProps } from 'react-native';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+import { Position } from '../types/Position';
 
 import { UnsafeMixed } from './codegenUtils';
 
@@ -10,7 +12,7 @@ type Point = {
 };
 
 export interface NativeProps extends ViewProps {
-  coordinate?: UnsafeMixed<string>;
+  coordinate?: UnsafeMixed<Position>;
   anchor: UnsafeMixed<Point>;
   allowOverlap: UnsafeMixed<boolean>;
   allowOverlapWithPuck: UnsafeMixed<boolean>;