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

package/ios/AirMaps/AIRMapMarker.m

@@ -14,6 +14,8 @@
 #import <React/RCTImageLoaderProtocol.h>
 #import <React/RCTUtils.h>
 #import <React/UIView+React.h>
+#import <React/RCTImageLoader.h>
+#import <React/RCTBridge+Private.h>
 
 NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
 
@@ -68,6 +70,7 @@ NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
         self.calloutView = (AIRMapCallout *)subview;
     } else {
         [super insertReactSubview:(UIView *)subview atIndex:atIndex];
+        [self addSubview:subview];
     }
 }
 - (void) setFrame:(CGRect)frame {
@@ -84,6 +87,7 @@ NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
         self.calloutView = nil;
     } else {
         [super removeReactSubview:(UIView *)subview];
+        [(UIView *) subview removeFromSuperview];
     }
 }
 
@@ -344,7 +348,8 @@ NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
         _reloadImageCancellationBlock();
         _reloadImageCancellationBlock = nil;
     }
-    _reloadImageCancellationBlock = [[_bridge moduleForName:@"ImageLoader"] loadImageWithURLRequest:[RCTConvert NSURLRequest:_imageSrc]
+    
+    _reloadImageCancellationBlock = [[[RCTBridge currentBridge] moduleForName:@"ImageLoader"] loadImageWithURLRequest:[RCTConvert NSURLRequest:_imageSrc]
                                                                             size:self.bounds.size
                                                                            scale:RCTScreenScale()
                                                                          clipped:YES
@@ -352,9 +357,10 @@ NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
                                                                    progressBlock:nil
                                                                 partialLoadBlock:nil
                                                                  completionBlock:^(NSError *error, UIImage *image) {
+        NSLog(@"image load completed");
                                                                      if (error) {
                                                                          // TODO(lmr): do something with the error?
-                                                                         NSLog(@"%@", error);
+                                                                         NSLog(@"failed to load image: %@", error);
                                                                      }
                                                                      dispatch_async(dispatch_get_main_queue(), ^{
                                                                          self.image = image;

package/ios/AirMaps/RNMapsMapView.mm

@@ -10,6 +10,7 @@
 #import "AirMap.h"
 #import "AIRMapMarker.h"
 #import "AIRMapManager.h"
+#import "RNMapsMarkerView.h"
 #import <react/renderer/components/RNMapsSpecs/ComponentDescriptors.h>
 #import <react/renderer/components/RNMapsSpecs/EventEmitters.h>
 #import <react/renderer/components/RNMapsSpecs/Props.h>
@@ -371,16 +372,25 @@ mapViewEventEmitter->emitterFunction(data);                               \
     id<RCTComponent> paperView = [childComponentView getPaperViewFromChildComponentView];
     if (paperView){
         [_view insertReactSubview:paperView atIndex:index];
-    } else {
+    } else if ([childComponentView isKindOfClass:[RNMapsMarkerView class]]){
+        RNMapsMarkerView* fabricMarker = (RNMapsMarkerView *) childComponentView;
+        [_view insertReactSubview:[fabricMarker marker] atIndex:index];
+    }
+    else  {
         [_view insertReactSubview:childComponentView atIndex:index];
     }
 }
+
 - (void) unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
     id<RCTComponent> paperView = [childComponentView getPaperViewFromChildComponentView];
     if (paperView){
         [_view removeReactSubview:paperView];
-    } else {
+    }
+    else if ([childComponentView isKindOfClass:[RNMapsMarkerView class]]){
+       RNMapsMarkerView* fabricMarker = (RNMapsMarkerView *) childComponentView;
+        [_view removeReactSubview:[fabricMarker marker]];
+   } else {
         [_view removeReactSubview:childComponentView];
     }
 }

package/lib/MapMarker.d.ts

@@ -42,7 +42,7 @@ export type MapMarkerProps = ViewProps & {
      *
      * @default {x: 0.0, y: 0.0}
      * @platform iOS: Apple Maps only. For Google Maps, see the `calloutAnchor` prop
-     * @platform Android: Not supported. See see the `calloutAnchor` prop
+     * @platform Android: Not supported. see the `calloutAnchor` prop
      */
     calloutOffset?: Point;
     /**
@@ -54,7 +54,7 @@ export type MapMarkerProps = ViewProps & {
      *
      * @default {x: 0.0, y: 0.0}
      * @platform iOS: Apple Maps only. For Google Maps, see the `anchor` prop
-     * @platform Android: Not supported. See see the `anchor` prop
+     * @platform Android: Not supported. see the `anchor` prop
      */
     centerOffset?: Point;
     /**

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 ProviderConstants_1 = require("./ProviderConstants");
 class MapMarker extends React.Component {
     getNativeComponent;
     getMapManagerCommand;
@@ -79,17 +80,23 @@ class MapMarker extends React.Component {
     }
     render() {
         const { stopPropagation = false } = this.props;
-        let image;
-        if (this.props.image) {
-            image = react_native_1.Image.resolveAssetSource(this.props.image) || {};
-            image = image.uri || this.props.image;
-        }
         let icon;
         if (this.props.icon) {
             icon = react_native_1.Image.resolveAssetSource(this.props.icon) || {};
             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') {
+                image = this.props.image;
+            }
+            else {
+                image = react_native_1.Image.resolveAssetSource(this.props.image) || {};
+                image = image.uri || this.props.image;
+            }
+        }
         return (<AIRMapMarker {...this.props} ref={this.marker} image={image} icon={icon} style={[styles.marker, this.props.style]} onPress={event => {
                 if (stopPropagation) {
                     event.stopPropagation();

package/lib/MapMarkerNativeComponent.js

@@ -9,9 +9,7 @@ exports.Commands = (0, codegenNativeCommands_1.default)({
     supportedCommands: [
         'showCallout',
         'hideCallout',
-        'redrawCallout',
         'animateMarkerToCoordinate',
-        'redraw',
         'setCoordinates',
     ],
 });

package/lib/decorateMapComponent.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const ProviderConstants_1 = require("./ProviderConstants");
 const NativeComponentGooglePolygon_1 = __importDefault(require("./specs/NativeComponentGooglePolygon"));
+const NativeComponentMarker_1 = __importDefault(require("./specs/NativeComponentMarker"));
 exports.SUPPORTED = 'SUPPORTED';
 exports.USES_DEFAULT_IMPLEMENTATION = 'USES_DEFAULT_IMPLEMENTATION';
 exports.NOT_SUPPORTED = 'NOT_SUPPORTED';
@@ -38,6 +39,12 @@ function decorateMapComponent(Component, componentName, providers) {
     Component.prototype.getNativeComponent =
         function getNativeComponent() {
             const provider = this.context;
+            if (componentName === 'Marker' &&
+                provider !== ProviderConstants_1.PROVIDER_GOOGLE &&
+                react_native_1.Platform.OS === 'ios') {
+                // @ts-ignore
+                return NativeComponentMarker_1.default;
+            }
             const key = provider || 'default';
             if (components[key]) {
                 return components[key];

package/lib/specs/NativeComponentMarker.d.ts

@@ -0,0 +1,245 @@
+/// <reference types="react" />
+import { HostComponent } from 'react-native';
+import type { ViewProps, ColorValue, ImageSourcePropType as ImageSource } from 'react-native';
+import { Int32, Double, BubblingEventHandler, DirectEventHandler, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+export type LatLng = Readonly<{
+    latitude: Double;
+    longitude: Double;
+}>;
+export type MarkerPressEventHandler = BubblingEventHandler<Readonly<{
+    action: string;
+    id?: string;
+    coordinate?: {
+        latitude: Double;
+        longitude: Double;
+    };
+    position?: {
+        x: Double;
+        y: Double;
+    };
+}>>;
+export type MarkerDragEventHandler = DirectEventHandler<Readonly<{
+    id?: string;
+    coordinate?: {
+        latitude: Double;
+        longitude: Double;
+    };
+}>>;
+export type CalloutPressEventHandler = BubblingEventHandler<Readonly<{
+    action: string;
+    id?: string;
+    frame?: {
+        x: Double;
+        y: Double;
+        width: Double;
+        height: Double;
+    };
+    point?: {
+        x: Double;
+        y: Double;
+    };
+}>>;
+type AppleMarkerVisibility = 'hidden' | 'adaptive' | 'visible';
+export type Point = Readonly<{
+    x: Double;
+    y: Double;
+}>;
+export interface MarkerFabricNativeProps extends ViewProps {
+    /**
+     * Sets the anchor point for the marker.
+     * The anchor specifies the point in the icon image that is anchored to the marker's position on the Earth's surface.
+     *
+     * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
+     * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
+     *
+     * The anchoring point in a W x H image is the nearest discrete grid point in a (W + 1) x (H + 1) grid, obtained by scaling the then rounding.
+     * For example, in a 4 x 2 image, the anchor point (0.7, 0.6) resolves to the grid point at (3, 1).
+     *
+     * @default {x: 0.5, y: 1.0}
+     * @platform iOS: Google Maps only. For Apple Maps, see the `centerOffset` prop
+     * @platform Android: Supported
+     */
+    anchor?: Point;
+    /**
+     * Specifies the point in the marker image at which to anchor the callout when it is displayed.
+     * This is specified in the same coordinate system as the anchor.
+     *
+     * See the `anchor` prop for more details.
+     *
+     * @default {x: 0.5, y: 0.0}
+     * @platform iOS: Google Maps only. For Apple Maps, see the `calloutOffset` prop
+     * @platform Android: Supported
+     */
+    calloutAnchor?: Point;
+    /**
+     * A custom image to be used as the marker's icon. Only local image resources are allowed to be used.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    image?: ImageSource | null;
+    /**
+     * The offset (in points) at which to place the callout bubble.
+     * When this property is set to (0, 0),
+     * the anchor point of the callout bubble is placed on the top-center point of the marker view’s frame.
+     *
+     * Specifying positive offset values moves the callout bubble down and to the right,
+     * while specifying negative values moves it up and to the left
+     *
+     * @default {x: 0.0, y: 0.0}
+     * @platform iOS: Apple Maps only. For Google Maps, see the `calloutAnchor` prop
+     * @platform Android: Not supported. See the `calloutAnchor` prop
+     */
+    calloutOffset?: Point;
+    /**
+     * The coordinate for the marker.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    coordinate: LatLng;
+    /**
+     * The description of the marker.
+     *
+     * This is only used if the <Marker /> component has no children that are a `<Callout />`,
+     * in which case the default callout behavior will be used,
+     * which will show both the `title` and the `description`, if provided.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    description?: string;
+    /**
+     * if `true` allows the marker to be draggable (re-positioned).
+     *
+     * @default false
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    draggable?: boolean;
+    /**
+     * The title of the marker.
+     * This is only used if the <Marker /> component has no `<Callout />` children.
+     *
+     * If the marker has <Callout /> children, default callout behavior will be used,
+     * which will show both the `title` and the `description`, if provided.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    title?: string;
+    /**
+     * A string that can be used to identify this marker.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    identifier?: string;
+    /**
+     * When true, the marker will be pre-selected.
+     * Setting this to true allows the user to drag the marker without needing to tap on it first to focus it.
+     *
+     * @default false
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    isPreselected?: boolean;
+    /**
+     * Callback that is called when the user taps the callout view.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Supported
+     */
+    onCalloutPress?: CalloutPressEventHandler;
+    /**
+     * Callback that is called when the marker is deselected, before the callout is hidden.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    onDeselect?: MarkerPressEventHandler;
+    /**
+     * Callback called continuously as the marker is dragged
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Supported
+     */
+    onDrag?: MarkerDragEventHandler;
+    /**
+     * Callback that is called when a drag on the marker finishes.
+     * This is usually the point you will want to setState on the marker's coordinate again
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Supported
+     */
+    onDragEnd?: MarkerDragEventHandler;
+    /**
+     * Callback that is called when the user initiates a drag on the marker (if it is draggable)
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Supported
+     */
+    onDragStart?: MarkerDragEventHandler;
+    /**
+     * Callback that is called when the marker is tapped by the user.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    onPress?: MarkerPressEventHandler;
+    /**
+     * Callback that is called when the marker becomes selected.
+     * This will be called when the callout for that marker is about to be shown.
+     *
+     * @platform iOS: Supported.
+     * @platform Android: Supported
+     */
+    onSelect?: MarkerPressEventHandler;
+    /**
+     * The marker's opacity between 0.0 and 1.0.
+     *
+     * @default 1.0
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    opacity?: WithDefault<Double, 1.0>;
+    /**
+     * If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color.
+     * Ignored if a custom marker is being used.<br/><br/>
+     * For Android, the set of available colors is limited. Unsupported colors will fall back to red.
+     * See [#887](https://github.com/react-community/react-native-maps/issues/887) for more information.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    pinColor?: ColorValue;
+    /**
+     * Visibility of the title text rendered beneath Marker balloon
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    titleVisibility?: WithDefault<AppleMarkerVisibility, 'visible'>;
+    /**
+     * Visibility of the subtitle text rendered beneath Marker balloon
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    subtitleVisibility?: WithDefault<AppleMarkerVisibility, 'adaptive'>;
+    /**
+     * Indicate type of default markers if it's true MKPinAnnotationView will be used and MKMarkerAnnotationView if it's false
+     * It doesn't change anything if you are using custom Markers
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    useLegacyPinView?: boolean;
+}
+export interface NativeCommands {
+    animateToCoordinates: (viewRef: React.ElementRef<React.ComponentType>, latitude: Double, longitude: Double, duration: Int32) => void;
+    showCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
+    hideCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
+    redrawCallout: (viewRef: React.ElementRef<React.ComponentType>) => void;
+    redraw: (viewRef: React.ElementRef<React.ComponentType>) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: HostComponent<MarkerFabricNativeProps>;
+export default _default;

package/lib/specs/NativeComponentMarker.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Commands = void 0;
+const codegenNativeComponent_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
+const codegenNativeCommands_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeCommands"));
+exports.Commands = (0, codegenNativeCommands_1.default)({
+    supportedCommands: [
+        'animateToCoordinates',
+        'showCallout',
+        'hideCallout',
+        'redrawCallout',
+        'redraw',
+    ],
+});
+exports.default = (0, codegenNativeComponent_1.default)('RNMapsMarker', {
+    excludedPlatforms: ['android'],
+});

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.19",
+  "version": "1.21.0-alpha.20",
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --max-warnings 0",