react-native-maps 1.21.0-alpha.1 → 1.21.0-alpha.100

package/lib/MapMarker.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Animated, ViewProps, ImageURISource, ImageRequireSource } from 'react-native';
 import { MapManagerCommand, NativeComponent, ProviderContext, UIManagerCommand } from './decorateMapComponent';
 import { MapMarkerNativeComponentType } from './MapMarkerNativeComponent';
+import type { AppleMarkerPriority } from './specs/NativeComponentMarker';
 import { CalloutPressEvent, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point } from './sharedTypes';
 import { Modify } from './sharedTypesInternal';
 type AppleMarkerVisibility = 'hidden' | 'adaptive' | 'visible';
@@ -42,7 +43,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 +55,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;
     /**
@@ -261,6 +262,17 @@ export type MapMarkerProps = ViewProps & {
      * @platform Android: Supported
      */
     zIndex?: number;
+    /**
+     Constants that indicates the display priority for annotations.
+     @default required
+     @platform iOS: Apple Maps only.
+     @platform Android: Not supported
+  
+      Required: A constant indicating that the item is required.
+      High: A constant indicating that the item’s display priority is high.
+      Low: A constant indicating that the item’s display priority is Low.
+     */
+    displayPriority?: AppleMarkerPriority;
     /**
      * Visibility of the title text rendered beneath Marker balloon
      * @platform iOS: Apple Maps only
@@ -286,7 +298,7 @@ export type NativeProps = Modify<OmittedProps, {
     icon?: string;
     image?: MapMarkerProps['image'] | string;
 }> & {
-    ref: React.RefObject<MapMarkerNativeComponentType>;
+    ref: React.RefObject<MapMarkerNativeComponentType | null>;
 };
 export declare class MapMarker extends React.Component<MapMarkerProps> {
     context: React.ContextType<typeof ProviderContext>;
@@ -295,6 +307,7 @@ 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;
     showCallout(): void;

package/lib/MapMarker.js

@@ -28,12 +28,16 @@ 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");
+const fixImageProp_1 = require("./fixImageProp");
 class MapMarker extends React.Component {
     getNativeComponent;
     getMapManagerCommand;
     getUIManagerCommand;
     static Animated;
     marker;
+    fabricMarker = undefined;
     constructor(props) {
         super(props);
         this.marker = React.createRef();
@@ -49,27 +53,59 @@ class MapMarker extends React.Component {
     }
     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() {
@@ -79,18 +115,24 @@ 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;
+        if (this.fabricMarker === undefined) {
+            const provider = this.context;
+            this.fabricMarker = !(react_native_1.Platform.OS === 'ios' && provider === ProviderConstants_1.PROVIDER_GOOGLE);
         }
         let icon;
-        if (this.props.icon) {
-            icon = react_native_1.Image.resolveAssetSource(this.props.icon) || {};
-            icon = icon.uri;
+        if (this.props.icon && this.fabricMarker) {
+            icon = (0, fixImageProp_1.fixImageProp)(this.props.icon);
+        }
+        let image;
+        if (this.props.image && this.fabricMarker) {
+            image = (0, fixImageProp_1.fixImageProp)(this.props.image);
         }
         const AIRMapMarker = this.getNativeComponent();
-        return (<AIRMapMarker {...this.props} ref={this.marker} image={image} icon={icon} style={[styles.marker, this.props.style]} onPress={event => {
+        return (<AIRMapMarker {...this.props} ref={this.marker} 
+        // @ts-ignore
+        image={image} 
+        // @ts-ignore
+        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/MapOverlay.d.ts

@@ -60,6 +60,7 @@ export declare class MapOverlay extends React.Component<MapOverlayProps> {
     getMapManagerCommand: (name: string) => MapManagerCommand;
     getUIManagerCommand: (name: string) => UIManagerCommand;
     static Animated: Animated.AnimatedComponent<typeof MapOverlay>;
+    private fabricOverlay?;
     render(): React.JSX.Element;
 }
 type Coordinate = [number, number];
@@ -70,7 +71,7 @@ type OverlayPressEvent = NativeSyntheticEvent<{
      */
     action: 'overlay-press' | 'image-overlay-press';
     /**
-     * @platform iOS: Apple maps
+     * @platform iOS: Apple Maps
      */
     name?: string;
     /**

package/lib/MapOverlay.js

@@ -27,24 +27,26 @@ exports.MapOverlay = void 0;
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
+const fixImageProp_1 = require("./fixImageProp");
 class MapOverlay extends React.Component {
     getNativeComponent;
     getMapManagerCommand;
     getUIManagerCommand;
     static Animated;
+    fabricOverlay = undefined;
     render() {
         const { opacity = 1.0 } = this.props;
-        let image;
-        if (typeof this.props.image !== 'number' &&
-            this.props.image.uri?.startsWith('http')) {
-            image = this.props.image.uri;
-        }
-        else {
-            const sourceAsset = react_native_1.Image.resolveAssetSource(this.props.image) || {};
-            image = sourceAsset.uri;
+        if (this.fabricOverlay === undefined) {
+            this.fabricOverlay = react_native_1.Platform.OS === 'android';
         }
         const AIRMapOverlay = this.getNativeComponent();
-        return (<AIRMapOverlay {...this.props} opacity={opacity} image={image} style={[styles.overlay, this.props.style]}/>);
+        let image = this.props.image;
+        if (this.props.image && this.fabricOverlay) {
+            image = (0, fixImageProp_1.fixImageProp)(this.props.image);
+        }
+        return (<AIRMapOverlay {...this.props} opacity={opacity} 
+        // @ts-ignore
+        image={image} style={[styles.overlay, this.props.style]}/>);
     }
 }
 exports.MapOverlay = MapOverlay;

package/lib/MapPolygon.d.ts

@@ -124,7 +124,7 @@ export type MapPolygonProps = ViewProps & {
     zIndex?: number;
 };
 type NativeProps = MapPolygonProps & {
-    ref: React.RefObject<View>;
+    ref: React.RefObject<View | null>;
 };
 export declare class MapPolygon extends React.Component<MapPolygonProps> {
     context: React.ContextType<typeof ProviderContext>;

package/lib/MapPolyline.d.ts

@@ -14,7 +14,7 @@ export type MapPolylineProps = ViewProps & {
      * The fill color to use for the path.
      *
      * @default `#000`, `rgba(r,g,b,0.5)`
-     * @platform iOS: Supported
+     * @platform iOS: Apple Maps only
      * @platform Android: Not supported
      */
     fillColor?: string;
@@ -32,8 +32,8 @@ export type MapPolylineProps = ViewProps & {
      *
      * @default `round`
      * @platform iOS: Apple Maps only
-     * @platform Android: Supported
-     */
+     * @platform Android: supported
+     * */
     lineCap?: LineCapType;
     /**
      * An array of numbers specifying the dash pattern to use for the path.
@@ -42,8 +42,8 @@ export type MapPolylineProps = ViewProps & {
      * The values in the array alternate, starting with the first line segment length,
      * followed by the first gap length, followed by the second line segment length, and so on.
      *
-     * @platform iOS: Supported
-     * @platform Android: Supported
+     * @platform iOS: Apple Maps only
+     * @platform Android: supported
      */
     lineDashPattern?: number[];
     /**
@@ -60,7 +60,7 @@ export type MapPolylineProps = ViewProps & {
      * The line join style to apply to corners of the path.
      *
      * @platform iOS: Apple Maps only
-     * @platform Android: Not supported
+     * @platform Android: supported
      */
     lineJoin?: LineJoinType;
     /**
@@ -125,7 +125,7 @@ export type MapPolylineProps = ViewProps & {
     zIndex?: number;
 };
 type NativeProps = MapPolylineProps & {
-    ref: React.RefObject<View>;
+    ref: React.RefObject<View | null>;
 };
 export declare class MapPolyline extends React.Component<MapPolylineProps> {
     context: React.ContextType<typeof ProviderContext>;

package/lib/MapView.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Animated as RNAnimated, Animated, NativeSyntheticEvent, ViewProps } from 'react-native';
 import { CalloutPressEvent, ClickEvent, Frame, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point, Provider, Region } from './sharedTypes';
-import { Address, BoundingBox, Camera, CameraZoomRange, ChangeEvent, Details, EdgePadding, FitToOptions, IndoorBuildingEvent, IndoorLevelActivatedEvent, KmlMapEvent, LongPressEvent, MapPressEvent, MapStyleElement, MapType, MapTypes, PanDragEvent, PoiClickEvent, SnapshotOptions, UserLocationChangeEvent } from './MapView.types';
+import { ActiveIndoorLevel, Address, BoundingBox, Camera, CameraZoomRange, ChangeEvent, Details, EdgePadding, FitToOptions, IndoorBuilding, KmlMapEvent, LongPressEvent, MapPressEvent, MapStyleElement, MapType, MapTypes, PanDragEvent, PoiClickEvent, SnapshotOptions, UserLocationChangeEvent } from './MapView.types';
 import { Modify } from './sharedTypesInternal';
 import { MapViewNativeComponentType } from './MapViewNativeComponent';
 import AnimatedRegion from './AnimatedRegion';
@@ -11,7 +11,7 @@ export type MapViewProps = ViewProps & {
      * If `true` map will be cached and displayed as an image instead of being interactable, for performance usage.
      *
      * @default false
-     * @platform iOS: Apple maps only
+     * @platform iOS: Apple Maps only
      * @platform Android: Supported
      */
     cacheEnabled?: boolean;
@@ -92,7 +92,7 @@ export type MapViewProps = ViewProps & {
      */
     kmlSrc?: string;
     /**
-     * If set, changes the position of the "Legal" label link in Apple maps.
+     * If set, changes the position of the "Legal" label link in Apple Maps.
      *
      * @platform iOS: Apple Maps only
      * @platform Android: Not supported
@@ -217,14 +217,14 @@ export type MapViewProps = ViewProps & {
      * @platform iOS: Google Maps only
      * @platform Android: Supported
      */
-    onIndoorBuildingFocused?: (event: IndoorBuildingEvent) => void;
+    onIndoorBuildingFocused?: (indoorBuilding: IndoorBuilding) => void;
     /**
      * Callback that is called when a level on indoor building is activated
      *
      * @platform iOS: Google Maps only
      * @platform Android: Supported
      */
-    onIndoorLevelActivated?: (event: IndoorLevelActivatedEvent) => void;
+    onIndoorLevelActivated?: (indoorLevel: ActiveIndoorLevel) => void;
     /**
      * Callback that is called once the kml is fully loaded.
      *
@@ -426,7 +426,7 @@ export type MapViewProps = ViewProps & {
      * If `false` compass won't be displayed on the map.
      *
      * @default true
-     * @platform iOS: Supported
+     * @platform iOS: Supported (adaptive on Apple Maps, visible only if map is not pointing north)
      * @platform Android: Supported
      */
     showsCompass?: boolean;
@@ -454,32 +454,14 @@ export type MapViewProps = ViewProps & {
      * @platform Android: Supported
      */
     showsMyLocationButton?: boolean;
-    /**
-     * If `false` points of interest won't be displayed on the map.
-     * TODO: DEPRECATED? Doesn't seem to do anything
-     *
-     * @default true
-     * @platform iOS: Maybe Apple Maps?
-     * @platform Android: Not supported
-     */
-    showsPointsOfInterest?: boolean;
     /**
      * A Boolean indicating whether the map shows scale information.
      *
-     * @default true
+     * @default false
      * @platform iOS: Apple Maps only
      * @platform Android: Not supported
      */
     showsScale?: boolean;
-    /**
-     * A Boolean value indicating whether the map displays traffic information.
-     * TODO: Look into android support
-     *
-     * @default false
-     * @platform iOS: Supported
-     * @platform Android: Not supported?
-     */
-    showsTraffic?: boolean;
     /**
      * If `true` the users location will be displayed on the map.
      *
@@ -510,8 +492,8 @@ export type MapViewProps = ViewProps & {
      * Sets the map to the style selected.
      *
      * @default System setting
-     * @platform iOS: Apple Maps only (iOS >= 13.0)
-     * @platform Android: Not supported
+     * @platform iOS: Supported
+     * @platform Android: Supported
      */
     userInterfaceStyle?: 'light' | 'dark';
     /**
@@ -604,7 +586,7 @@ type ModifiedProps = Modify<MapViewProps, {
     initialRegion?: MapViewProps['initialRegion'] | null;
 }>;
 export type NativeProps = Omit<ModifiedProps, 'customMapStyle' | 'onRegionChange' | 'onRegionChangeComplete'> & {
-    ref: React.RefObject<MapViewNativeComponentType>;
+    ref: React.RefObject<MapViewNativeComponentType | null>;
     customMapStyleString?: string;
     handlePanDrag?: boolean;
     onChange?: (e: ChangeEvent) => void;
@@ -626,6 +608,7 @@ declare class MapView extends React.Component<MapViewProps, State> {
         duration?: number;
     }): void;
     animateToRegion(region: Region, duration?: number): void;
+    setRegion(region: Region): void;
     fitToElements(options?: FitToOptions): void;
     fitToSuppliedMarkers(markers: string[], options?: FitToOptions): void;
     fitToCoordinates(coordinates?: LatLng[], options?: FitToOptions): void;
@@ -636,7 +619,7 @@ declare class MapView extends React.Component<MapViewProps, State> {
      */
     getMapBoundaries(): Promise<BoundingBox>;
     setMapBoundaries(northEast: LatLng, southWest: LatLng): void;
-    setIndoorActiveLevelIndex(activeLevelIndex: number): void;
+    setIndoorActiveLevelIndex(activeLevelIndex: number): void | Promise<never>;
     /**
      * Takes a snapshot of the map and saves it to a picture
      * file or returns the image as a base64 encoded string.
@@ -707,8 +690,13 @@ declare class MapView extends React.Component<MapViewProps, State> {
     private handleMapPress;
     private handleMarkerPress;
     private handleMarkerSelect;
+    private handleKmlReady;
     private handleMarkerDeselect;
     private handleRegionChange;
+    private handleRegionChangeStarted;
+    private handleIndoorBuildingFocused;
+    private handleIndoorLevelActivated;
+    private handleRegionChangeComplete;
     render(): React.JSX.Element;
 }
 export declare const AnimatedMapView: RNAnimated.AnimatedComponent<typeof MapView>;