@rnmapbox/maps 10.0.0-beta.75 → 10.0.0-beta.77

package/javascript/components/{Callout.js → Callout.tsx}

@@ -1,15 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import {
   View,
   Text,
   Animated,
   requireNativeComponent,
   StyleSheet,
+  ViewStyle,
+  ViewProps,
+  StyleProp,
 } from 'react-native';
 
-import { viewPropTypes } from '../utils';
-
 export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
 
 const styles = StyleSheet.create({
@@ -48,60 +48,68 @@ const styles = StyleSheet.create({
   },
 });
 
+type NativeProps = {
+  children: ReactNode;
+  style: StyleProp<ViewStyle>;
+};
+
+type Props = Omit<ViewProps, 'style'> & {
+  /**
+   * String that gets displayed in the default callout.
+   */
+  title: string;
+
+  /**
+   * Style property for the Animated.View wrapper, apply animations to this
+   */
+  style?: ViewStyle;
+
+  /**
+   * Style property for the native RCTMGLCallout container, set at your own risk.
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Style property for the content bubble.
+   */
+  contentStyle?: ViewStyle;
+
+  /**
+   * Style property for the triangle tip under the content.
+   */
+  tipStyle?: ViewStyle;
+
+  /**
+   * Style property for the title in the content bubble.
+   */
+  textStyle?: ViewStyle;
+};
+
 /**
  *  Callout that displays information about a selected annotation near the annotation.
  */
-class Callout extends React.PureComponent {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * String that gets displayed in the default callout.
-     */
-    title: PropTypes.string,
-
-    /**
-     * Style property for the Animated.View wrapper, apply animations to this
-     */
-    style: PropTypes.any,
-
-    /**
-     * Style property for the native RCTMGLCallout container, set at your own risk.
-     */
-    containerStyle: PropTypes.any,
-
-    /**
-     * Style property for the content bubble.
-     */
-    contentStyle: PropTypes.any,
-
-    /**
-     * Style property for the triangle tip under the content.
-     */
-    tipStyle: PropTypes.any,
-
-    /**
-     * Style property for the title in the content bubble.
-     */
-    textStyle: PropTypes.any,
-  };
-
+class Callout extends React.PureComponent<Props> {
   get _containerStyle() {
-    return [
+    const style = [
       {
         position: 'absolute',
         zIndex: 999,
         backgroundColor: 'transparent',
-      },
-      this.props.containerStyle,
+      } as ViewStyle,
     ];
+
+    if (this.props.containerStyle) {
+      style.push(this.props.containerStyle);
+    }
+
+    return style;
   }
 
   get _hasChildren() {
     return React.Children.count(this.props.children) > 0;
   }
 
-  _renderDefaultCallout() {
+  _renderDefaultCallout(): ReactNode {
     return (
       <Animated.View style={[styles.container, this.props.style]}>
         <View style={[styles.content, this.props.contentStyle]}>
@@ -114,7 +122,7 @@ class Callout extends React.PureComponent {
     );
   }
 
-  _renderCustomCallout() {
+  _renderCustomCallout(): ReactNode {
     return (
       <Animated.View {...this.props} style={this.props.style}>
         {this.props.children}
@@ -134,6 +142,6 @@ class Callout extends React.PureComponent {
   }
 }
 
-const RCTMGLCallout = requireNativeComponent(NATIVE_MODULE_NAME, Callout);
+const RCTMGLCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Callout;

package/javascript/components/CircleLayer.tsx

@@ -18,6 +18,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.

package/javascript/components/FillExtrusionLayer.tsx

@@ -15,10 +15,15 @@ export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
 
 export type Props = {
   /**
-   * A string that uniquely identifies the source in the style to which it is added.
+   * A string that uniquely identifies the layer in the style to which it is added.
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.

package/javascript/components/FillLayer.tsx

@@ -16,6 +16,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.

package/javascript/components/HeadingIndicator.tsx

@@ -1,30 +1,41 @@
 import React from 'react';
 
 import headingIcon from '../assets/heading.png';
+import { BaseProps } from '../types/BaseProps';
 
 import { SymbolLayer } from './SymbolLayer';
+import Images from './Images';
 
 const style = {
-  iconImage: headingIcon,
+  iconImage: 'userLocationHeading',
   iconAllowOverlap: true,
   iconPitchAlignment: 'map',
   iconRotationAlignment: 'map',
 } as const;
 
-type Props = {
+type Props = BaseProps & {
   heading?: number;
 };
 
-const HeadingIndicator = ({ heading }: Props) => (
-  <SymbolLayer
-    key="mapboxUserLocationHeadingIndicator"
-    id="mapboxUserLocationHeadingIndicator"
-    belowLayerID="mapboxUserLocationWhiteCircle"
-    style={{
-      iconRotate: heading,
-      ...style,
-    }}
-  />
-);
+const HeadingIndicator = ({ heading }: Props) => {
+  return (
+    <React.Fragment key="mapboxUserLocationHeadingIndicatorWrapper">
+      <Images
+        images={{ userLocationHeading: headingIcon }}
+        key="mapboxUserLocationHeadingImages"
+      />
+      <SymbolLayer
+        key="mapboxUserLocationHeadingIndicator"
+        id="mapboxUserLocationHeadingIndicator"
+        sourceID="mapboxUserLocation"
+        belowLayerID="mapboxUserLocationWhiteCircle"
+        style={{
+          iconRotate: heading,
+          ...style,
+        }}
+      />
+    </React.Fragment>
+  );
+};
 
 export default HeadingIndicator;

package/javascript/components/HeatmapLayer.tsx

@@ -15,10 +15,15 @@ export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
 
 export type Props = {
   /**
-   * A string that uniquely identifies the source in the style to which it is added.
+   * A string that uniquely identifies the layer in the style to which it is added.
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.

package/javascript/components/ImageSource.tsx

@@ -20,6 +20,11 @@ type Props = BaseProps & {
    */
   id: string;
 
+  /**
+   * The id refers to en existing source in the style. Does not create a new source.
+   */
+  existing?: boolean;
+
   /**
    * An HTTP(S) URL, absolute file URL, or local file URL to the source image.
    * Gifs are currently not supported.
@@ -29,7 +34,7 @@ type Props = BaseProps & {
   /**
    * The top left, top right, bottom right, and bottom left coordinates for the image.
    */
-  coordinates: [Position, Position, Position, Position];
+  coordinates?: [Position, Position, Position, Position];
 
   children?: React.ReactElement | React.ReactElement[];
 };

package/javascript/components/Images.tsx

@@ -1,5 +1,9 @@
 import React, { ReactNode, ReactElement } from 'react';
-import { requireNativeComponent, Image as RNImage } from 'react-native';
+import {
+  requireNativeComponent,
+  Image as RNImage,
+  ImageURISource,
+} from 'react-native';
 import { ImageSourcePropType, ImageResolvedAssetSource } from 'react-native';
 
 import { ShapeSource } from './ShapeSource';
@@ -12,7 +16,7 @@ export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   type: string;
 };
 
-function _isUrlOrPath(value: string | ImageSourcePropType): value is string {
+function _isUrlOrPath(value: ImageEntry): value is string {
   return (
     (typeof value === 'string' || value instanceof String) &&
     (value.startsWith('file://') ||
@@ -24,6 +28,16 @@ function _isUrlOrPath(value: string | ImageSourcePropType): value is string {
   );
 }
 
+function isImageSourcePropType(
+  value: ImageEntry,
+): value is ImageSourcePropType {
+  if (typeof value === 'number' || value instanceof Number) {
+    return true;
+  }
+  const valueAsSource = value as ImageURISource;
+  return !!valueAsSource.uri && typeof valueAsSource.uri === 'string';
+}
+
 type TypedReactNode<T> = ReactElement<T> | Array<TypedReactNode<T>> | never;
 
 type NativeImage =
@@ -33,8 +47,33 @@ type NativeImage =
       sdf?: boolean;
       stretchX?: [number, number][];
       stretchY?: [number, number][];
+      content?: [number, number, number, number];
+      scale?: number;
     };
 
+export type ImageEntryData = {
+  url?: string;
+  image?: ImageSourcePropType;
+  resolvedImage?: ImageResolvedAssetSource;
+  sdf?: boolean;
+  stretchX?: [number, number][];
+  stretchY?: [number, number][];
+  content?: [number, number, number, number];
+  scale?: number;
+};
+
+type ResolvedImageEntryData = {
+  url?: string;
+  resolvedImage?: ImageResolvedAssetSource;
+  sdf?: boolean;
+  stretchX?: [number, number][];
+  stretchY?: [number, number][];
+  content?: [number, number, number, number];
+  scale?: number;
+};
+
+export type ImageEntry = string | ImageSourcePropType | ImageEntryData;
+
 const isChildAnImage = (
   child: ReactNode,
 ): child is React.ReactElement<typeof Image> => {
@@ -47,7 +86,7 @@ interface Props {
    * Keys are names - see iconImage expressions, values can be either urls-s objects
    * with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
    */
-  images?: { [key: string]: ImageSourcePropType };
+  images?: { [key: string]: ImageEntry };
 
   /**
    * If you have an asset under Image.xcassets on iOS and the drawables directory on android
@@ -77,7 +116,9 @@ class Images extends React.PureComponent<Props> {
       return {};
     }
 
-    const images: { [key: string]: string | ImageResolvedAssetSource } = {};
+    const images: {
+      [key: string]: string | ImageResolvedAssetSource | ResolvedImageEntryData;
+    } = {};
     let nativeImages: NativeImage[] = [];
 
     if (this.props.images) {
@@ -93,11 +134,20 @@ class Images extends React.PureComponent<Props> {
           );
         } else if (_isUrlOrPath(value)) {
           images[imageName] = value;
-        } else {
+        } else if (isImageSourcePropType(value)) {
           const res = RNImage.resolveAssetSource(value);
           if (res && res.uri) {
             images[imageName] = res;
           }
+        } else {
+          let imageEntry = value as ImageEntryData;
+          if (imageEntry.image) {
+            imageEntry = {
+              ...imageEntry,
+              resolvedImage: RNImage.resolveAssetSource(imageEntry.image),
+            };
+          }
+          images[imageName] = imageEntry;
         }
       }
     }
@@ -147,7 +197,9 @@ class Images extends React.PureComponent<Props> {
 type NativeProps = {
   hasOnImageMissing: boolean;
   onImageMissing?: (event: React.SyntheticEvent<Element, RNMBEvent>) => void;
-  images?: { [key: string]: string | ImageResolvedAssetSource };
+  images?: {
+    [key: string]: string | ImageResolvedAssetSource | ResolvedImageEntryData;
+  };
   nativeImages?: NativeImage[];
 };
 

package/javascript/components/LineLayer.tsx

@@ -16,6 +16,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.

package/javascript/components/MapView.tsx

@@ -21,6 +21,7 @@ import {
 import { getFilter } from '../utils/filterUtils';
 import Logger from '../utils/Logger';
 import { FilterExpression } from '../utils/MapboxStyles';
+import { type Position } from '../types/Position';
 
 import NativeBridgeComponent from './NativeBridgeComponent';
 
@@ -46,7 +47,6 @@ export type Point = {
   y: number;
 };
 
-export type Position = [number, number];
 type BBox = [number, number, number, number];
 
 export type RegionPayload = {

package/javascript/components/MarkerView.tsx

@@ -9,6 +9,7 @@ import {
 
 import { toJSONString } from '../utils';
 import { makePoint } from '../utils/geoUtils';
+import { type Position } from '../types/Position';
 
 import PointAnnotation from './PointAnnotation';
 
@@ -20,7 +21,7 @@ type Props = ViewProps & {
   /**
    * The center point (specified as a map coordinate) of the marker.
    */
-  coordinate: [number, number];
+  coordinate: Position;
 
   /**
    * Any coordinate between (0, 0) and (1, 1), where (0, 0) is the top-left corner of
@@ -78,7 +79,7 @@ class MarkerView extends React.PureComponent<Props> {
     return this.__idForPointAnnotation;
   }
 
-  _getCoordinate(coordinate: [number, number]): string | undefined {
+  _getCoordinate(coordinate: Position): string | undefined {
     if (!coordinate) {
       return undefined;
     }

package/javascript/components/PointAnnotation.tsx

@@ -5,11 +5,12 @@ import {
   Platform,
   type ViewProps,
 } from 'react-native';
-import { type Feature } from 'geojson';
+import { Feature, Point } from 'geojson';
 
 import { toJSONString, isFunction } from '../utils';
 import { makePoint } from '../utils/geoUtils';
 import { type BaseProps } from '../types/BaseProps';
+import { Position } from '../types/Position';
 
 import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
 
@@ -23,9 +24,13 @@ const styles = StyleSheet.create({
   },
 });
 
-type FeaturePayload = {
-  feature: Feature;
-};
+type FeaturePayload = Feature<
+  Point,
+  {
+    screenPointX: number;
+    screenPointY: number;
+  }
+>;
 
 type Props = BaseProps & {
   /**
@@ -56,7 +61,7 @@ type Props = BaseProps & {
   /**
    * The center point (specified as a map coordinate) of the annotation.
    */
-  coordinate: [number, number];
+  coordinate: Position;
 
   /**
    * Specifies the anchor being set on a particular point of the annotation.
@@ -104,7 +109,7 @@ type Props = BaseProps & {
   /**
    * Expects one child, and an optional callout can be added as well
    */
-  children: React.ReactElement;
+  children: React.ReactElement | [React.ReactElement, React.ReactElement];
 
   style?: ViewProps['style'];
 };

package/javascript/components/RasterDemSource.tsx

@@ -19,6 +19,11 @@ type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing source in the style. Does not create a new source.
+   */
+  existing?: boolean;
+
   /**
    * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
    */

package/javascript/components/RasterLayer.tsx

@@ -12,10 +12,15 @@ export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
 
 export type Props = {
   /**
-   * A string that uniquely identifies the source in the style to which it is added.
+   * A string that uniquely identifies the layer in the style to which it is added.
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.

package/javascript/components/RasterSource.tsx

@@ -20,6 +20,11 @@ type Props = BaseProps & {
    */
   id: string;
 
+  /**
+   * The id refers to en existing source in the style. Does not create a new source.
+   */
+  existing?: boolean;
+
   /**
    * A URL to a TileJSON configuration file describing the source’s contents and other metadata.
    */

package/javascript/components/ShapeSource.tsx

@@ -33,6 +33,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing source in the style. Does not create a new source.
+   */
+  existing?: boolean;
+
   /**
    * An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle.
    */
@@ -136,7 +141,7 @@ export type Props = {
     height: number;
   };
 
-  children: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement | React.ReactElement[];
 };
 
 /**

package/javascript/components/SkyLayer.tsx

@@ -16,6 +16,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * The source from which to obtain the data to style.
    * If the source has not yet been added to the current style, the behavior is undefined.