@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.1

package/javascript/components/CircleLayer.tsx

@@ -0,0 +1,46 @@
+import {CircleLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactElement} from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
+
+interface CircleLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: CircleLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<CircleLayerProps, 'style'>,
+    NativeBaseProps {}
+
+/**
+ * CircleLayer is a style layer that renders one or more filled circles on the map.
+ */
+class CircleLayer extends AbstractLayer<CircleLayerProps, NativeProps> {
+  static defaultProps = {
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  render(): ReactElement {
+    return (
+      <RCTMGLCircleLayer
+        testID="rctmglCircleLayer"
+        ref={this.setNativeLayer}
+        {...this.baseProps}
+      />
+    );
+  }
+}
+
+const RCTMGLCircleLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default CircleLayer;

package/javascript/components/FillExtrusionLayer.tsx

@@ -0,0 +1,47 @@
+import {FillExtrusionLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactElement} from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
+
+interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: FillExtrusionLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<FillExtrusionLayerProps, 'style'>,
+    NativeBaseProps {}
+
+/**
+ * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
+ */
+class FillExtrusionLayer extends AbstractLayer<
+  FillExtrusionLayerProps,
+  NativeProps
+> {
+  static defaultProps = {
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  render(): ReactElement {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLFillExtrusionLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default FillExtrusionLayer;

package/javascript/components/FillLayer.tsx

@@ -0,0 +1,41 @@
+import {FillLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactElement} from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
+
+interface FillLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: FillLayerStyleProps;
+}
+
+interface NativeProps extends Omit<FillLayerProps, 'style'>, NativeBaseProps {}
+
+/**
+ * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
+ */
+class FillLayer extends AbstractLayer<FillLayerProps, NativeProps> {
+  static defaultProps = {
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  render(): ReactElement {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default FillLayer;

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

@@ -1,18 +1,22 @@
+import BaseProps from '../types/BaseProps';
 import headingIcon from '../../assets/heading.png';
 
 import SymbolLayer from './SymbolLayer';
 
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {ReactElement} from 'react';
 
 const style = {
   iconImage: headingIcon,
   iconAllowOverlap: true,
   iconPitchAlignment: 'map',
   iconRotationAlignment: 'map',
-};
+} as const;
 
-const HeadingIndicator = heading => (
+interface HeadingIndicatorProps extends BaseProps {
+  heading?: number;
+}
+
+const HeadingIndicator = ({heading}: HeadingIndicatorProps): ReactElement => (
   <SymbolLayer
     key="mapboxUserLocationHeadingIndicator"
     id="mapboxUserLocationHeadingIndicator"
@@ -24,8 +28,4 @@ const HeadingIndicator = heading => (
   />
 );
 
-HeadingIndicator.propTypes = {
-  heading: PropTypes.number,
-};
-
 export default HeadingIndicator;

package/javascript/components/HeatmapLayer.tsx

@@ -0,0 +1,44 @@
+import {HeatmapLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactElement} from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
+
+interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: HeatmapLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<HeatmapLayerProps, 'style'>,
+    NativeBaseProps {}
+
+/**
+ * HeatmapLayer is a style layer that renders one or more filled circles on the map.
+ */
+class HeatmapLayer extends AbstractLayer<HeatmapLayerProps, NativeProps> {
+  static defaultProps = {
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  render(): ReactElement {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLHeatmapLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default HeatmapLayer;

package/javascript/components/ImageSource.tsx

@@ -0,0 +1,78 @@
+import {
+  cloneReactChildrenWithProps,
+  isNumber,
+  resolveImagePath,
+} from '../utils';
+import BaseProps from '../types/BaseProps';
+
+import AbstractSource from './AbstractSource';
+
+import {requireNativeComponent} from 'react-native';
+import React, {ReactElement} from 'react';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImageSource';
+
+interface ImageSourceProps extends BaseProps {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL to the source image.
+   * Gifs are currently not supported.
+   */
+  url?: number | string;
+  /**
+   * The top left, top right, bottom right, and bottom left coordinates for the image.
+   */
+  coordinates?: [
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+    GeoJSON.Position,
+  ];
+
+  children?: ReactElement | ReactElement[];
+}
+
+type NativeProps = ImageSourceProps;
+
+/**
+ * ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.
+ * The georeferenced image scales and rotates as the user zooms and rotates the map
+ */
+class ImageSource extends AbstractSource<ImageSourceProps, NativeProps> {
+  _getURL(): string | undefined {
+    return isNumber(this.props.url)
+      ? resolveImagePath(this.props.url)
+      : this.props.url;
+  }
+
+  render(): ReactElement | null {
+    if (
+      !this.props.url ||
+      !this.props.coordinates ||
+      !this.props.coordinates.length
+    ) {
+      return null;
+    }
+
+    const props = {
+      ...this.props,
+      url: this._getURL(),
+    };
+
+    return (
+      <RCTMGLImageSource ref={this.setNativeRef} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLImageSource>
+    );
+  }
+}
+
+const RCTMGLImageSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default ImageSource;

package/javascript/components/Images.tsx

@@ -0,0 +1,134 @@
+import BaseProps from '../types/BaseProps';
+
+import ShapeSource from './ShapeSource';
+
+import React, {ReactElement} from 'react';
+import {
+  requireNativeComponent,
+  Image,
+  NativeSyntheticEvent,
+  ImageSourcePropType,
+  ImageURISource,
+} from 'react-native';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImages';
+
+export type ImageEntry = string | ImageSourcePropType;
+
+function _isUrlOrPath(value: ImageEntry): boolean {
+  return (
+    (typeof value === 'string' || value instanceof String) &&
+    (value.startsWith('file://') ||
+      value.startsWith('http://') ||
+      value.startsWith('https://') ||
+      value.startsWith('data:') ||
+      value.startsWith('asset://') ||
+      value.startsWith('/'))
+  );
+}
+
+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';
+}
+
+interface ImagesProps extends BaseProps {
+  /**
+   * Specifies the external images in key-value pairs required for the shape source.
+   * 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]: ImageEntry};
+  /**
+   * If you have an asset under Image.xcassets on iOS and the drawables directory on android
+   * you can specify an array of string names with assets as the key `['pin']`.
+   */
+  nativeAssetImages?: string[];
+  /**
+   * Gets called when a Layer is trying to render an image whose key is not present in
+   * any of the `Images` component of the Map.
+   */
+  onImageMissing?(imageKey: string): void;
+
+  id?: string;
+  children: ReactElement;
+}
+
+/**
+ * Images defines the images used in Symbol etc layers
+ */
+class Images extends React.Component<ImagesProps> {
+  static NATIVE_ASSETS_KEY = 'assets';
+
+  _getImages(): {
+    images?: {[key: string]: ImageEntry};
+    nativeImages?: ImageEntry[];
+  } {
+    if (!this.props.images && !this.props.nativeAssetImages) {
+      return {};
+    }
+
+    const images: {[key: string]: ImageEntry} = {};
+    let nativeImages: ImageEntry[] = [];
+
+    if (this.props.images) {
+      const imageNames = Object.keys(this.props.images);
+      for (const imageName of imageNames) {
+        const value = this.props.images[imageName];
+        if (
+          imageName === ShapeSource.NATIVE_ASSETS_KEY &&
+          Array.isArray(value)
+        ) {
+          console.warn(
+            `Use of ${ShapeSource.NATIVE_ASSETS_KEY} in Images#images is deprecated please use Images#nativeAssetImages`,
+          );
+          nativeImages = value;
+        } else if (_isUrlOrPath(value)) {
+          images[imageName] = value;
+        } else if (_isImageSourcePropType(value)) {
+          const res = Image.resolveAssetSource(value);
+          if (res && res.uri) {
+            images[imageName] = res;
+          }
+        }
+      }
+    }
+
+    if (this.props.nativeAssetImages) {
+      nativeImages = this.props.nativeAssetImages;
+    }
+
+    return {
+      images,
+      nativeImages,
+    };
+  }
+
+  _onImageMissing(
+    event: NativeSyntheticEvent<{payload: {imageKey: string}}>,
+  ): void {
+    if (this.props.onImageMissing) {
+      this.props.onImageMissing(event.nativeEvent.payload.imageKey);
+    }
+  }
+
+  render(): ReactElement {
+    const props = {
+      id: this.props.id,
+      hasOnImageMissing: !!this.props.onImageMissing,
+      onImageMissing: this._onImageMissing.bind(this),
+      ...this._getImages(),
+    };
+
+    return <RCTMGLImages {...props}>{this.props.children}</RCTMGLImages>;
+  }
+}
+
+const RCTMGLImages = requireNativeComponent(NATIVE_MODULE_NAME);
+
+export default Images;

package/javascript/components/Light.tsx

@@ -0,0 +1,67 @@
+import {LightLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+import {StyleValue, transformStyle} from '../utils/StyleValue';
+
+import AbstractLayer, {BaseLayerProps} from './AbstractLayer';
+
+import React, {
+  Component,
+  createRef,
+  MutableRefObject,
+  ReactElement,
+} from 'react';
+import {NativeMethods, requireNativeComponent} from 'react-native';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLLight';
+
+interface LightProps extends BaseProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: LightLayerStyleProps;
+}
+
+interface NativeProps extends Omit<LightProps, 'style'> {
+  reactStyle?: {[key: string]: StyleValue};
+}
+/**
+ * Light represents the light source for extruded geometries
+ */
+class Light extends AbstractLayer<LightProps, NativeProps> {
+  lightRef: MutableRefObject<
+    (Component<NativeProps> & Readonly<NativeMethods>) | null
+  >;
+
+  constructor(props: LightProps & BaseLayerProps) {
+    super(props);
+
+    this.lightRef = createRef<
+      (Component<NativeProps> & Readonly<NativeMethods>) | null
+    >();
+  }
+
+  setNativeProps(props: LightProps): void {
+    if (this.lightRef.current && props.style) {
+      const nativeProps = {
+        ...props,
+        reactStyle: transformStyle(props.style),
+      };
+      this.lightRef.current.setNativeProps(nativeProps);
+    }
+  }
+
+  render(): ReactElement {
+    return (
+      <RCTMGLLight
+        ref={this.lightRef}
+        testID="rctmglLight"
+        {...this.props}
+        reactStyle={this.getStyle()}
+      />
+    );
+  }
+}
+
+const RCTMGLLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default Light;

package/javascript/components/LineLayer.tsx

@@ -0,0 +1,42 @@
+import {LineLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactElement} from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
+
+interface LineLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: LineLayerStyleProps;
+}
+
+interface NativeProps extends Omit<LineLayerProps, 'style'>, NativeBaseProps {}
+
+/**
+ * LineLayer is a style layer that renders one or more stroked polylines on the map.
+ */
+class LineLayer extends AbstractLayer<LineLayerProps, NativeProps> {
+  static defaultProps = {
+    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
+  };
+
+  render(): ReactElement {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLLineLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLLineLayer =
+  requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
+
+export default LineLayer;