react-native-maps 1.21.0-alpha.20 → 1.21.0-alpha.22

package/ios/AirMaps/AIRMapMarker.h

@@ -55,6 +55,7 @@
 - (void)hideCalloutView;
 - (void)addTapGestureRecognizer;
 - (void)setUseLegacyPinView:(BOOL)value;
+- (void)animateToCoordinate:(CLLocationCoordinate2D)newCoordinate duration:(NSTimeInterval)duration;
 
 @end
 

package/ios/AirMaps/AIRMapMarker.m

@@ -30,6 +30,13 @@ NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
     BOOL _calloutIsOpen;
     NSInteger _zIndexBeforeOpen;
     BOOL _useLegacyPinView;
+    
+    CADisplayLink *_displayLink;
+    CLLocationCoordinate2D _startCoordinate;
+    CLLocationCoordinate2D _endCoordinate;
+    NSTimeInterval _animationStartTime;
+    NSTimeInterval _animationDuration;
+    BOOL _isAnimating;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame {
@@ -404,4 +411,47 @@ NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
     _useLegacyPinView = value;
 }
 
+- (void)animateToCoordinate:(CLLocationCoordinate2D)newCoordinate duration:(NSTimeInterval)duration {
+    if (_isAnimating) {
+        NSLog(@"Animation already in progress. Rejecting new animation request.");
+        return;
+    }
+    
+    // Mark as animating
+    _isAnimating = YES;
+
+    // Store animation parameters
+    _startCoordinate = self.coordinate;
+    _endCoordinate = newCoordinate;
+    _animationDuration = duration;
+    _animationStartTime = [NSDate timeIntervalSinceReferenceDate];
+
+    // Start a CADisplayLink
+    if (_displayLink) {
+        [_displayLink invalidate];
+    }
+    _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updatePosition)];
+    [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
+}
+
+- (void)updatePosition {
+    NSTimeInterval elapsed = [NSDate timeIntervalSinceReferenceDate] - _animationStartTime;
+    CGFloat progress = MIN(elapsed / _animationDuration, 1.0);
+
+    // Interpolate coordinates
+    CLLocationDegrees currentLatitude = _startCoordinate.latitude + progress * (_endCoordinate.latitude - _startCoordinate.latitude);
+    CLLocationDegrees currentLongitude = _startCoordinate.longitude + progress * (_endCoordinate.longitude - _startCoordinate.longitude);
+
+    // Update annotation's coordinate
+    CLLocationCoordinate2D currentCoordinate = CLLocationCoordinate2DMake(currentLatitude, currentLongitude);
+    [self setValue:[NSValue valueWithMKCoordinate:currentCoordinate] forKey:@"coordinate"];
+
+    // Stop the animation when complete
+    if (progress == 1.0) {
+        [_displayLink invalidate];
+        _displayLink = nil;
+        _isAnimating = NO; // Reset the animation state
+    }
+}
+
 @end

package/ios/AirMaps/RNMapsMapView.mm

@@ -153,7 +153,6 @@ using namespace facebook::react;
     };
     _view.onChange = [self](NSDictionary* dictionary) {
         if (_eventEmitter) {
-
             NSDictionary* regionDict = dictionary[@"region"];
             auto mapViewEventEmitter = std::static_pointer_cast<RNMapsMapViewEventEmitter const>(_eventEmitter);
             facebook::react::RNMapsMapViewEventEmitter::OnRegionChange data = {

package/lib/MapMarker.d.ts

@@ -295,8 +295,10 @@ export declare class MapMarker extends React.Component<MapMarkerProps> {
     getUIManagerCommand: (name: string) => UIManagerCommand;
     static Animated: Animated.AnimatedComponent<typeof MapMarker>;
     private marker;
+    private fabricMarker;
     constructor(props: MapMarkerProps);
     setNativeProps(props: Partial<NativeProps>): void;
+    componentDidMount(): void;
     showCallout(): void;
     hideCallout(): void;
     setCoordinates(coordinate: LatLng): void;

package/lib/MapMarker.js

@@ -28,6 +28,7 @@ const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
 const MapMarkerNativeComponent_1 = require("./MapMarkerNativeComponent");
+const NativeComponentMarker_1 = require("./specs/NativeComponentMarker");
 const ProviderConstants_1 = require("./ProviderConstants");
 class MapMarker extends React.Component {
     getNativeComponent;
@@ -35,6 +36,7 @@ class MapMarker extends React.Component {
     getUIManagerCommand;
     static Animated;
     marker;
+    fabricMarker = false;
     constructor(props) {
         super(props);
         this.marker = React.createRef();
@@ -48,29 +50,65 @@ class MapMarker extends React.Component {
         // @ts-ignore
         this.marker.current?.setNativeProps(props);
     }
+    componentDidMount() {
+        const provider = this.context;
+        this.fabricMarker = provider !== ProviderConstants_1.PROVIDER_GOOGLE && react_native_1.Platform.OS === 'ios';
+    }
     showCallout() {
         if (this.marker.current) {
-            MapMarkerNativeComponent_1.Commands.showCallout(this.marker.current);
+            if (this.fabricMarker) {
+                // @ts-ignore
+                NativeComponentMarker_1.Commands.showCallout(this.marker.current);
+            }
+            else {
+                MapMarkerNativeComponent_1.Commands.showCallout(this.marker.current);
+            }
         }
     }
     hideCallout() {
         if (this.marker.current) {
-            MapMarkerNativeComponent_1.Commands.hideCallout(this.marker.current);
+            if (this.fabricMarker) {
+                // @ts-ignore
+                NativeComponentMarker_1.Commands.hideCallout(this.marker.current);
+            }
+            else {
+                MapMarkerNativeComponent_1.Commands.hideCallout(this.marker.current);
+            }
         }
     }
     setCoordinates(coordinate) {
         if (this.marker.current) {
-            MapMarkerNativeComponent_1.Commands.setCoordinates(this.marker.current, coordinate);
+            if (this.fabricMarker) {
+                NativeComponentMarker_1.Commands.setCoordinates(
+                // @ts-ignore
+                this.marker.current, coordinate.latitude, coordinate.longitude);
+            }
+            else {
+                MapMarkerNativeComponent_1.Commands.setCoordinates(this.marker.current, coordinate);
+            }
         }
     }
     redrawCallout() {
         if (this.marker.current) {
-            MapMarkerNativeComponent_1.Commands.redrawCallout(this.marker.current);
+            if (this.fabricMarker) {
+                // @ts-ignore
+                NativeComponentMarker_1.Commands.redrawCallout(this.marker.current);
+            }
+            else {
+                MapMarkerNativeComponent_1.Commands.redrawCallout(this.marker.current);
+            }
         }
     }
     animateMarkerToCoordinate(coordinate, duration = 500) {
         if (this.marker.current) {
-            MapMarkerNativeComponent_1.Commands.animateMarkerToCoordinate(this.marker.current, coordinate, duration);
+            if (this.fabricMarker) {
+                NativeComponentMarker_1.Commands.animateToCoordinates(
+                // @ts-ignore
+                this.marker.current, coordinate.latitude, coordinate.longitude, duration);
+            }
+            else {
+                MapMarkerNativeComponent_1.Commands.animateMarkerToCoordinate(this.marker.current, coordinate, duration);
+            }
         }
     }
     redraw() {
@@ -86,10 +124,9 @@ class MapMarker extends React.Component {
             icon = icon.uri;
         }
         const AIRMapMarker = this.getNativeComponent();
-        const provider = this.context;
         let image;
         if (this.props.image) {
-            if (provider !== ProviderConstants_1.PROVIDER_GOOGLE && react_native_1.Platform.OS === 'ios') {
+            if (this.fabricMarker) {
                 image = this.props.image;
             }
             else {

package/lib/specs/NativeComponentMarker.d.ts

@@ -235,6 +235,7 @@ export interface MarkerFabricNativeProps extends ViewProps {
 }
 export interface NativeCommands {
     animateToCoordinates: (viewRef: React.ElementRef<React.ComponentType>, latitude: Double, longitude: Double, duration: Int32) => void;
+    setCoordinates: (viewRef: React.ElementRef<React.ComponentType>, latitude: Double, longitude: Double) => void;
     showCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
     hideCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
     redrawCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;

package/lib/specs/NativeComponentMarker.js

@@ -8,6 +8,7 @@ const codegenNativeComponent_1 = __importDefault(require("react-native/Libraries
 const codegenNativeCommands_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeCommands"));
 exports.Commands = (0, codegenNativeCommands_1.default)({
     supportedCommands: [
+        'setCoordinates',
         'animateToCoordinates',
         'showCallout',
         'hideCallout',

package/package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "author": "Leland Richardson <leland.m.richardson@gmail.com>",
   "homepage": "https://github.com/react-native-maps/react-native-maps#readme",
-  "version": "1.21.0-alpha.20",
+  "version": "1.21.0-alpha.22",
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --max-warnings 0",