react-native-maps 1.21.0-alpha.99 → 1.22.0

package/src/MapOverlay.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  Animated,
+  ViewProps,
+  ImageURISource,
+  ImageRequireSource,
+  NativeSyntheticEvent,
+  Platform,
+} from 'react-native';
+
+import decorateMapComponent, {
+  MapManagerCommand,
+  NativeComponent,
+  ProviderContext,
+  SUPPORTED,
+  UIManagerCommand,
+  USES_DEFAULT_IMPLEMENTATION,
+} from './decorateMapComponent';
+import {LatLng, Point} from './sharedTypes';
+import {Modify} from './sharedTypesInternal';
+import {fixImageProp} from './fixImageProp';
+
+export type MapOverlayProps = 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;
+};
+
+type NativeProps = Modify<MapOverlayProps, {image?: string}>;
+
+function normalizeBounds(bounds: [number, number][]): any {
+  return {
+    northEast: {latitude: bounds[0][0], longitude: bounds[0][1]},
+    southWest: {latitude: bounds[1][0], longitude: bounds[1][1]},
+  };
+}
+
+export class MapOverlay extends React.Component<MapOverlayProps> {
+  // declaration only, as they are set through decorateMap
+  /// @ts-ignore
+  context!: React.ContextType<typeof ProviderContext>;
+  getNativeComponent!: () => NativeComponent<NativeProps>;
+  getMapManagerCommand!: (name: string) => MapManagerCommand;
+  getUIManagerCommand!: (name: string) => UIManagerCommand;
+
+  static Animated: Animated.AnimatedComponent<typeof MapOverlay>;
+
+  private fabricOverlay?: Boolean = undefined;
+
+  render() {
+    const {opacity = 1.0, bounds} = this.props;
+
+    if (this.fabricOverlay === undefined) {
+      this.fabricOverlay = Platform.OS === 'android';
+    }
+
+    const AIRMapOverlay = this.getNativeComponent();
+    let image: any = this.props.image;
+
+    let boundsParam: any = bounds;
+    if (this.fabricOverlay) {
+      if (this.props.image) {
+        image = fixImageProp(this.props.image);
+      }
+      if (bounds) {
+        boundsParam = normalizeBounds(bounds);
+      }
+    } else {
+      if (this.props.image) {
+        image = fixImageProp(this.props.image);
+        if (image.uri) {
+          image = image.uri;
+        }
+      }
+    }
+    return (
+      <AIRMapOverlay
+        // @ts-ignore
+        bounds={boundsParam}
+        opacity={opacity}
+        // @ts-ignore
+        image={image}
+        style={[styles.overlay, this.props.style]}
+      />
+    );
+  }
+}
+
+type Coordinate = [number, number];
+
+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;
+}>;
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+  },
+});
+
+MapOverlay.Animated = Animated.createAnimatedComponent(MapOverlay);
+
+export default decorateMapComponent(MapOverlay, 'Overlay', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});

package/src/MapPolygon.tsx

@@ -0,0 +1,188 @@
+import * as React from 'react';
+import {View, ViewProps} from 'react-native';
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  SUPPORTED,
+  ProviderContext,
+  NativeComponent,
+  MapManagerCommand,
+  UIManagerCommand,
+} from './decorateMapComponent';
+import {PolygonPressEvent} from './MapPolygon.types';
+import {LatLng, LineCapType, LineJoinType} from './sharedTypes';
+
+export type MapPolygonProps = 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: 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;
+};
+
+type NativeProps = MapPolygonProps & {ref: React.RefObject<View | null>};
+
+export class MapPolygon extends React.Component<MapPolygonProps> {
+  // declaration only, as they are set through decorateMap
+  /// @ts-ignore
+  context!: React.ContextType<typeof ProviderContext>;
+  getNativeComponent!: () => NativeComponent<NativeProps>;
+  getMapManagerCommand!: (name: string) => MapManagerCommand;
+  getUIManagerCommand!: (name: string) => UIManagerCommand;
+
+  private polygon: NativeProps['ref'];
+
+  constructor(props: MapPolygonProps) {
+    super(props);
+    this.polygon = React.createRef<View>();
+  }
+
+  setNativeProps(props: Partial<MapPolygonProps>) {
+    this.polygon.current?.setNativeProps(props);
+  }
+
+  render() {
+    const {strokeColor = '#000', strokeWidth = 1} = this.props;
+    const AIRMapPolygon = this.getNativeComponent();
+    return (
+      <AIRMapPolygon
+        {...this.props}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        ref={this.polygon}
+      />
+    );
+  }
+}
+
+export default decorateMapComponent(MapPolygon, 'Polygon', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});

package/src/MapPolygon.types.ts

@@ -0,0 +1,25 @@
+import {NativeSyntheticEvent} from 'react-native';
+import {LatLng, Point} from './sharedTypes';
+
+// All types in this file are directly exported with the package for external
+// use.
+
+export 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/src/MapPolyline.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import {NativeSyntheticEvent, View, ViewProps} from 'react-native';
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  SUPPORTED,
+  ProviderContext,
+  NativeComponent,
+  MapManagerCommand,
+  UIManagerCommand,
+} from './decorateMapComponent';
+import {LatLng, LineCapType, LineJoinType, Point} from './sharedTypes';
+
+export type MapPolylineProps = 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: Apple Maps only
+   * @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: Apple Maps only
+   * @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: 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;
+};
+
+type NativeProps = MapPolylineProps & {ref: React.RefObject<View | null>};
+
+export class MapPolyline extends React.Component<MapPolylineProps> {
+  // declaration only, as they are set through decorateMap
+  /// @ts-ignore
+  context!: React.ContextType<typeof ProviderContext>;
+  getNativeComponent!: () => NativeComponent<NativeProps>;
+  getMapManagerCommand!: (name: string) => MapManagerCommand;
+  getUIManagerCommand!: (name: string) => UIManagerCommand;
+
+  private polyline: NativeProps['ref'];
+
+  constructor(props: MapPolylineProps) {
+    super(props);
+    this.polyline = React.createRef<View>();
+  }
+
+  setNativeProps(props: Partial<NativeProps>) {
+    this.polyline.current?.setNativeProps(props);
+  }
+
+  render() {
+    const {
+      strokeColor = '#000',
+      strokeWidth = 1,
+      lineJoin = 'round',
+      lineCap = 'round',
+    } = this.props;
+    const AIRMapPolyline = this.getNativeComponent();
+    return (
+      <AIRMapPolyline
+        {...this.props}
+        strokeColor={strokeColor}
+        strokeWidth={strokeWidth}
+        lineJoin={lineJoin}
+        lineCap={lineCap}
+        ref={this.polyline}
+      />
+    );
+  }
+}
+
+export default decorateMapComponent(MapPolyline, 'Polyline', {
+  google: {
+    ios: SUPPORTED,
+    android: USES_DEFAULT_IMPLEMENTATION,
+  },
+});
+
+export type PolylinePressEvent = NativeSyntheticEvent<{
+  action: 'polyline-press';
+
+  /**
+   * @platform iOS: Google Maps
+   */
+  id?: string;
+
+  /**
+   * @platform Android
+   */
+  coordinate?: LatLng;
+
+  /**
+   * @platform Android
+   */
+  position?: Point;
+}>;