react-native-maps 0.31.1 → 1.0.0-beta.1

package/lib/MapMarker.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapMarker = void 0;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
+class MapMarker extends React.Component {
+    getNativeComponent;
+    getMapManagerCommand;
+    getUIManagerCommand;
+    static Animated;
+    marker;
+    constructor(props) {
+        super(props);
+        this.marker = React.createRef();
+        this.showCallout = this.showCallout.bind(this);
+        this.hideCallout = this.hideCallout.bind(this);
+        this.redrawCallout = this.redrawCallout.bind(this);
+        this.animateMarkerToCoordinate = this.animateMarkerToCoordinate.bind(this);
+    }
+    setNativeProps(props) {
+        this.marker.current?.setNativeProps(props);
+    }
+    showCallout() {
+        this._runCommand('showCallout', []);
+    }
+    hideCallout() {
+        this._runCommand('hideCallout', []);
+    }
+    redrawCallout() {
+        this._runCommand('redrawCallout', []);
+    }
+    animateMarkerToCoordinate(coordinate, duration = 500) {
+        this._runCommand('animateMarkerToCoordinate', [coordinate, duration]);
+    }
+    redraw() {
+        this._runCommand('redraw', []);
+    }
+    _getHandle() {
+        return (0, react_native_1.findNodeHandle)(this.marker.current);
+    }
+    _runCommand(name, args) {
+        switch (react_native_1.Platform.OS) {
+            case 'android':
+                react_native_1.UIManager.dispatchViewManagerCommand(this._getHandle(), this.getUIManagerCommand(name), args);
+                break;
+            case 'ios':
+                this.getMapManagerCommand(name)(this._getHandle(), ...args);
+                break;
+            default:
+                break;
+        }
+    }
+    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();
+        return (<AIRMapMarker {...this.props} ref={this.marker} image={image} icon={icon} style={[styles.marker, this.props.style]} onPress={event => {
+                if (stopPropagation) {
+                    event.stopPropagation();
+                }
+                if (this.props.onPress) {
+                    this.props.onPress(event);
+                }
+            }}/>);
+    }
+}
+exports.MapMarker = MapMarker;
+const styles = react_native_1.StyleSheet.create({
+    marker: {
+        position: 'absolute',
+        backgroundColor: 'transparent',
+    },
+});
+MapMarker.Animated = react_native_1.Animated.createAnimatedComponent(MapMarker);
+exports.default = (0, decorateMapComponent_1.default)(MapMarker, 'Marker', {
+    google: {
+        ios: decorateMapComponent_1.SUPPORTED,
+        android: decorateMapComponent_1.USES_DEFAULT_IMPLEMENTATION,
+    },
+});

package/lib/MapOverlay.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { Animated, ViewProps, ImageURISource, ImageRequireSource, NativeSyntheticEvent } from 'react-native';
+import { MapManagerCommand, NativeComponent, ProviderContext, UIManagerCommand } from './decorateMapComponent';
+import { LatLng, Modify, Point } from './sharedTypes';
+declare type Props = ViewProps & {
+    /**
+     * The bearing in degrees clockwise from north. Values outside the range [0, 360) will be normalized.
+     *
+     * @default 0
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    bearing?: number;
+    /**
+     * The coordinates for the image (left-top corner, right-bottom corner). ie.```[[lat, long], [lat, long]]```
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    bounds: [Coordinate, Coordinate];
+    /**
+     * A custom image to be used as the overlay.
+     * Only required local image resources and uri (as for images located in the net) are allowed to be used.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    image: ImageURISource | ImageRequireSource;
+    /**
+     * Callback that is called when the user presses on the overlay
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Supported
+     */
+    onPress?: (event: OverlayPressEvent) => void;
+    /**
+     * The opacity of the overlay.
+     *
+     * @default 1
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    opacity?: number;
+    /**
+     * Boolean to allow an overlay to be tappable and use the onPress function.
+     *
+     * @default false
+     * @platform iOS: Not supported
+     * @platform Android: Supported
+     */
+    tappable?: boolean;
+};
+declare type NativeProps = Modify<Props, {
+    image?: string;
+}>;
+export declare class MapOverlay extends React.Component<Props> {
+    context: React.ContextType<typeof ProviderContext>;
+    getNativeComponent: () => NativeComponent<NativeProps>;
+    getMapManagerCommand: (name: string) => MapManagerCommand;
+    getUIManagerCommand: (name: string) => UIManagerCommand;
+    static Animated: Animated.AnimatedComponent<typeof MapOverlay>;
+    render(): JSX.Element;
+}
+declare type Coordinate = [number, number];
+declare type OverlayPressEvent = NativeSyntheticEvent<{
+    /**
+     * @platform iOS: Apple Maps: `image-overlay-press`
+     * @platform Android: `overlay-press`
+     */
+    action: 'overlay-press' | 'image-overlay-press';
+    /**
+     * @platform iOS: Apple maps
+     */
+    name?: string;
+    /**
+     * @platform iOS: Apple Maps
+     * @platform Android
+     */
+    coordinate?: LatLng;
+    /**
+     * @platform Android
+     */
+    position?: Point;
+}>;
+declare const _default: typeof MapOverlay;
+export default _default;

package/lib/MapOverlay.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapOverlay = void 0;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
+class MapOverlay extends React.Component {
+    getNativeComponent;
+    getMapManagerCommand;
+    getUIManagerCommand;
+    static Animated;
+    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;
+        }
+        const AIRMapOverlay = this.getNativeComponent();
+        return (<AIRMapOverlay {...this.props} opacity={opacity} image={image} style={[styles.overlay, this.props.style]}/>);
+    }
+}
+exports.MapOverlay = MapOverlay;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        backgroundColor: 'transparent',
+    },
+});
+MapOverlay.Animated = react_native_1.Animated.createAnimatedComponent(MapOverlay);
+exports.default = (0, decorateMapComponent_1.default)(MapOverlay, 'Overlay', {
+    google: {
+        ios: decorateMapComponent_1.SUPPORTED,
+        android: decorateMapComponent_1.USES_DEFAULT_IMPLEMENTATION,
+    },
+});

package/lib/MapPolygon.d.ts

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { NativeSyntheticEvent, View, ViewProps } from 'react-native';
+import { ProviderContext, NativeComponent, MapManagerCommand, UIManagerCommand } from './decorateMapComponent';
+import { LatLng, LineCapType, LineJoinType, Point } from './sharedTypes';
+export declare type Props = ViewProps & {
+    /**
+     * An array of coordinates to describe the polygon
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    coordinates: LatLng[];
+    /**
+     * The fill color to use for the path.
+     *
+     * @default `#000`, `rgba(r,g,b,0.5)`
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    fillColor?: string;
+    /**
+     * Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection.
+     * A geodesic is the shortest path between two points on the Earth's surface.
+     * The geodesic curve is constructed assuming the Earth is a sphere.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    geodesic?: boolean;
+    /**
+     * A 2d array of coordinates to describe holes of the polygon where each hole has at least 3 points.
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    holes?: LatLng[][];
+    /**
+     * The line cap style to apply to the open ends of the path
+     *
+     * @default `round`
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineCap?: LineCapType;
+    /**
+     * An array of numbers specifying the dash pattern to use for the path.
+     * The array contains one or more numbers that indicate the lengths (measured in points)
+     * of the line segments and gaps in the pattern.
+     * 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: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineDashPattern?: number[];
+    /**
+     * The offset (in points) at which to start drawing the dash pattern.
+     * Use this property to start drawing a dashed line partway through a segment or gap.
+     * For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
+     *
+     * @default 0
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineDashPhase?: number;
+    /**
+     * The line join style to apply to corners of the path.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineJoin?: LineJoinType;
+    /**
+     * The limiting value that helps avoid spikes at junctions between connected line segments.
+     * The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style.
+     * If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit,
+     * the joint is converted to a bevel join.
+     * The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
+     *
+     * @default 10
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    miterLimit?: number;
+    /**
+     * Callback that is called when the user presses on the polygon
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    onPress?: (event: PolygonPressEvent) => void;
+    /**
+     * The stroke color to use for the path.
+     *
+     * @default `#000`, `rgba(r,g,b,0.5)`
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    strokeColor?: string;
+    /**
+     * The stroke width to use for the path.
+     *
+     * @default 1
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    strokeWidth?: number;
+    /**
+     * Boolean to allow a polygon to be tappable and use the onPress function.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    tappable?: boolean;
+    /**
+     * The order in which this tile overlay is drawn with respect to other overlays.
+     * An overlay with a larger z-index is drawn over overlays with smaller z-indices.
+     * The order of overlays with the same z-index is arbitrary.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    zIndex?: number;
+};
+declare type NativeProps = Props & {
+    ref: React.RefObject<View>;
+};
+export declare class MapPolygon extends React.Component<Props> {
+    context: React.ContextType<typeof ProviderContext>;
+    getNativeComponent: () => NativeComponent<NativeProps>;
+    getMapManagerCommand: (name: string) => MapManagerCommand;
+    getUIManagerCommand: (name: string) => UIManagerCommand;
+    private polygon;
+    constructor(props: Props);
+    setNativeProps(props: Partial<Props>): void;
+    updateNativeProps(): () => void;
+    render(): JSX.Element;
+}
+declare const _default: typeof MapPolygon;
+export default _default;
+declare type PolygonPressEvent = NativeSyntheticEvent<{
+    action: 'polygon-press';
+    /**
+     * @platform iOS: Google Maps
+     */
+    id?: string;
+    /**
+     * @platform iOS: Apple Maps
+     * @platform Android
+     */
+    coordinate?: LatLng;
+    /**
+     * @platform Android
+     */
+    position?: Point;
+}>;

package/lib/MapPolygon.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapPolygon = void 0;
+const React = __importStar(require("react"));
+const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
+const ProviderConstants = __importStar(require("./ProviderConstants"));
+class MapPolygon extends React.Component {
+    getNativeComponent;
+    getMapManagerCommand;
+    getUIManagerCommand;
+    polygon;
+    constructor(props) {
+        super(props);
+        this.polygon = React.createRef();
+    }
+    setNativeProps(props) {
+        this.polygon.current?.setNativeProps(props);
+    }
+    updateNativeProps() {
+        return () => {
+            const { fillColor, strokeColor, strokeWidth } = this.props;
+            let polygonNativeProps = {};
+            if (fillColor) {
+                polygonNativeProps.fillColor = fillColor;
+            }
+            if (strokeColor) {
+                polygonNativeProps.strokeColor = strokeColor;
+            }
+            if (strokeWidth) {
+                polygonNativeProps.strokeWidth = strokeWidth;
+            }
+            if (polygonNativeProps) {
+                this.setNativeProps(polygonNativeProps);
+            }
+        };
+    }
+    render() {
+        const { strokeColor = '#000', strokeWidth = 1 } = this.props;
+        const AIRMapPolygon = this.getNativeComponent();
+        return (<AIRMapPolygon {...this.props} strokeColor={strokeColor} strokeWidth={strokeWidth} ref={this.polygon} onLayout={this.context === ProviderConstants.PROVIDER_GOOGLE
+                ? this.updateNativeProps()
+                : undefined}/>);
+    }
+}
+exports.MapPolygon = MapPolygon;
+exports.default = (0, decorateMapComponent_1.default)(MapPolygon, 'Polygon', {
+    google: {
+        ios: decorateMapComponent_1.SUPPORTED,
+        android: decorateMapComponent_1.USES_DEFAULT_IMPLEMENTATION,
+    },
+});

package/lib/MapPolyline.d.ts

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { NativeSyntheticEvent, View, ViewProps } from 'react-native';
+import { ProviderContext, NativeComponent, MapManagerCommand, UIManagerCommand } from './decorateMapComponent';
+import { LatLng, LineCapType, LineJoinType, Point } from './sharedTypes';
+export declare type Props = ViewProps & {
+    /**
+     * An array of coordinates to describe the polyline
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    coordinates: LatLng[];
+    /**
+     * The fill color to use for the path.
+     *
+     * @default `#000`, `rgba(r,g,b,0.5)`
+     * @platform iOS: Supported
+     * @platform Android: Not supported
+     */
+    fillColor?: string;
+    /**
+     * Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection.
+     * A geodesic is the shortest path between two points on the Earth's surface.
+     * The geodesic curve is constructed assuming the Earth is a sphere.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    geodesic?: boolean;
+    /**
+     * The line cap style to apply to the open ends of the path
+     *
+     * @default `round`
+     * @platform iOS: Apple Maps only
+     * @platform Android: Supported
+     */
+    lineCap?: LineCapType;
+    /**
+     * An array of numbers specifying the dash pattern to use for the path.
+     * The array contains one or more numbers that indicate the lengths (measured in points)
+     * of the line segments and gaps in the pattern.
+     * 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
+     */
+    lineDashPattern?: number[];
+    /**
+     * The offset (in points) at which to start drawing the dash pattern.
+     * Use this property to start drawing a dashed line partway through a segment or gap.
+     * For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap.
+     *
+     * @default 0
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineDashPhase?: number;
+    /**
+     * The line join style to apply to corners of the path.
+     *
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    lineJoin?: LineJoinType;
+    /**
+     * The limiting value that helps avoid spikes at junctions between connected line segments.
+     * The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style.
+     * If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit,
+     * the joint is converted to a bevel join.
+     * The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
+     *
+     * @default 10
+     * @platform iOS: Apple Maps only
+     * @platform Android: Not supported
+     */
+    miterLimit?: number;
+    /**
+     * Callback that is called when the user presses on the polyline
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    onPress?: (event: PolylinePressEvent) => void;
+    /**
+     * The stroke color to use for the path.
+     *
+     * @default `#000`, `rgba(r,g,b,0.5)`
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    strokeColor?: string;
+    /**
+     * The stroke colors to use for the path.
+     *
+     * Must be the same length as `coordinates`
+     *
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    strokeColors?: string[];
+    /**
+     * The stroke width to use for the path.
+     *
+     * @default 1
+     * @platform iOS: Supported
+     * @platform Android: Supported
+     */
+    strokeWidth?: number;
+    /**
+     * Boolean to allow the polyline to be tappable and use the onPress function.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    tappable?: boolean;
+    /**
+     * The order in which this tile overlay is drawn with respect to other overlays.
+     * An overlay with a larger z-index is drawn over overlays with smaller z-indices.
+     * The order of overlays with the same z-index is arbitrary.
+     *
+     * @platform iOS: Google Maps only
+     * @platform Android: Supported
+     */
+    zIndex?: number;
+};
+declare type NativeProps = Props & {
+    ref: React.RefObject<View>;
+};
+export declare class MapPolyline extends React.Component<Props> {
+    context: React.ContextType<typeof ProviderContext>;
+    getNativeComponent: () => NativeComponent<NativeProps>;
+    getMapManagerCommand: (name: string) => MapManagerCommand;
+    getUIManagerCommand: (name: string) => UIManagerCommand;
+    private polyline;
+    constructor(props: Props);
+    setNativeProps(props: Partial<NativeProps>): void;
+    render(): JSX.Element;
+}
+declare const _default: typeof MapPolyline;
+export default _default;
+declare type PolylinePressEvent = NativeSyntheticEvent<{
+    action: 'polyline-press';
+    /**
+     * @platform iOS: Google Maps
+     */
+    id?: string;
+    /**
+     * @platform Android
+     */
+    coordinate?: LatLng;
+    /**
+     * @platform Android
+     */
+    position?: Point;
+}>;