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

package/javascript/components/Images.js

@@ -1,119 +0,0 @@
-import {viewPropTypes} from '../utils';
-
-import ShapeSource from './ShapeSource';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {requireNativeComponent} from 'react-native';
-import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
-
-export const NATIVE_MODULE_NAME = 'RCTMGLImages';
-
-function _isUrlOrPath(value) {
-  return (
-    (typeof value === 'string' || value instanceof String) &&
-    (value.startsWith('file://') ||
-      value.startsWith('http://') ||
-      value.startsWith('https://') ||
-      value.startsWith('data:') ||
-      value.startsWith('asset://') ||
-      value.startsWith('/'))
-  );
-}
-
-/**
- * Images defines the images used in Symbol etc layers
- */
-class Images extends React.Component {
-  static NATIVE_ASSETS_KEY = 'assets';
-
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * 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: PropTypes.object,
-
-    /**
-     * 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: PropTypes.arrayOf(PropTypes.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: PropTypes.func,
-  };
-
-  _getImages() {
-    if (!this.props.images && !this.props.nativeAssetImages) {
-      return {};
-    }
-
-    const images = {};
-    let nativeImages = [];
-
-    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 {
-          const res = resolveAssetSource(value);
-          if (res && res.uri) {
-            images[imageName] = res;
-          }
-        }
-      }
-    }
-
-    if (this.props.nativeAssetImages) {
-      nativeImages = this.props.nativeAssetImages;
-    }
-
-    return {
-      images,
-      nativeImages,
-    };
-  }
-
-  _onImageMissing(event) {
-    if (this.props.onImageMissing) {
-      this.props.onImageMissing(event.nativeEvent.payload.imageKey);
-    }
-  }
-
-  render() {
-    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, Images, {
-  nativeOnly: {
-    nativeImages: true,
-    onImageMissing: true,
-  },
-});
-
-export default Images;

package/javascript/components/Light.js

@@ -1,47 +0,0 @@
-import {viewPropTypes} from '../utils';
-import {LightLayerStyleProp} from '../utils/styleMap';
-
-import AbstractLayer from './AbstractLayer';
-
-import React from 'react';
-import {requireNativeComponent} from 'react-native';
-
-export const NATIVE_MODULE_NAME = 'RCTMGLLight';
-
-/**
- * Light represents the light source for extruded geometries
- */
-class Light extends AbstractLayer {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * Customizable style attributes
-     */
-    style: LightLayerStyleProp,
-  };
-
-  setNativeProps(props) {
-    if (this.refs.nativeLight) {
-      this.refs.nativeLight.setNativeProps(props);
-    }
-  }
-
-  render() {
-    return (
-      <RCTMGLLight
-        ref="nativeLight"
-        testID="rctmglLight"
-        {...this.props}
-        style={undefined}
-        reactStyle={this.getStyle()}
-      />
-    );
-  }
-}
-
-const RCTMGLLight = requireNativeComponent(NATIVE_MODULE_NAME, Light, {
-  nativeOnly: {reactStyle: true},
-});
-
-export default Light;

package/javascript/components/LineLayer.js

@@ -1,94 +0,0 @@
-import {viewPropTypes} from '../utils';
-import {LineLayerStyleProp} from '../utils/styleMap';
-
-import AbstractLayer from './AbstractLayer';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
-
-const MapLibreGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
-
-/**
- * LineLayer is a style layer that renders one or more stroked polylines on the map.
- */
-class LineLayer extends AbstractLayer {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the source in the style to which it is added.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * 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.
-     * Inferred from parent source only if the layer is a direct child to it.
-     */
-    sourceID: PropTypes.string,
-
-    /**
-     * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
-     */
-    sourceLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer above aboveLayerID.
-     */
-    aboveLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer below belowLayerID
-     */
-    belowLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer at a specified index
-     */
-    layerIndex: PropTypes.number,
-
-    /**
-     *  Filter only the features in the source layer that satisfy a condition that you define
-     */
-    filter: PropTypes.array,
-
-    /**
-     * The minimum zoom level at which the layer gets parsed and appears.
-     */
-    minZoomLevel: PropTypes.number,
-
-    /**
-     * The maximum zoom level at which the layer gets parsed and appears.
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Customizable style attributes
-     */
-    style: PropTypes.oneOfType([
-      LineLayerStyleProp,
-      PropTypes.arrayOf(LineLayerStyleProp),
-    ]),
-  };
-
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  render() {
-    const props = {
-      ...this.baseProps,
-      sourceLayerID: this.props.sourceLayerID,
-    };
-    return <RCTMGLLineLayer ref="nativeLayer" {...props} />;
-  }
-}
-
-const RCTMGLLineLayer = requireNativeComponent(NATIVE_MODULE_NAME, LineLayer, {
-  nativeOnly: {reactStyle: true},
-});
-
-export default LineLayer;

package/javascript/components/MarkerView.js

@@ -1,87 +0,0 @@
-import {toJSONString, viewPropTypes} from '../utils';
-import {makePoint} from '../utils/geoUtils';
-
-import PointAnnotation from './PointAnnotation';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {Platform, requireNativeComponent} from 'react-native';
-
-export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
-
-/**
- * MarkerView allows you to place a interactive react native marker to the map.
- *
- * If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
- * .
- * This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android
- * and PointAnnotation on iOS.
- */
-class MarkerView extends React.PureComponent {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * The center point (specified as a map coordinate) of the marker.
-     * See also #anchor.
-     */
-    coordinate: PropTypes.arrayOf(PropTypes.number).isRequired,
-
-    /**
-     * Specifies the anchor being set on a particular point of the annotation.
-     * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
-     * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
-     * Note this is only for custom annotations not the default pin view.
-     * Defaults to the center of the view.
-     */
-    anchor: PropTypes.shape({
-      /**
-       * `x` of anchor
-       */
-      x: PropTypes.number.isRequired,
-      /**
-       * `y` of anchor
-       */
-      y: PropTypes.number.isRequired,
-    }),
-
-    /**
-     * Expects one child - can be container with multiple elements
-     */
-    children: PropTypes.element.isRequired,
-  };
-
-  static defaultProps = {
-    anchor: {x: 0.5, y: 0.5},
-  };
-
-  _getCoordinate() {
-    if (!this.props.coordinate) {
-      return undefined;
-    }
-    return toJSONString(makePoint(this.props.coordinate));
-  }
-
-  render() {
-    if (Platform.OS === 'ios') {
-      return <PointAnnotation {...this.props} />;
-    }
-
-    const props = {
-      ...this.props,
-      anchor: this.props.anchor,
-      coordinate: this._getCoordinate(),
-    };
-
-    return (
-      <RCTMGLMarkerView {...props}>{this.props.children}</RCTMGLMarkerView>
-    );
-  }
-}
-
-const RCTMGLMarkerView =
-  Platform.OS === 'android'
-    ? requireNativeComponent(NATIVE_MODULE_NAME, MarkerView, {})
-    : undefined;
-
-export default MarkerView;

package/javascript/components/NativeUserLocation.js

@@ -1,41 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {requireNativeComponent} from 'react-native';
-
-const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
-
-class NativeUserLocation extends React.Component {
-  static propTypes = {
-    /**
-     * Android render mode.
-     *
-     *  - normal: just a circle
-     *  - compass: triangle with heading
-     *  - gps: large arrow
-     *
-     * @platform android
-     */
-    androidRenderMode: PropTypes.oneOf(['normal', 'compass', 'gps']),
-
-    /**
-     * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
-     *
-     * @platform ios
-     */
-    iosShowsUserHeadingIndicator: PropTypes.bool,
-  };
-
-  render() {
-    return <RCTMGLNativeUserLocation {...this.props} />;
-  }
-}
-
-const RCTMGLNativeUserLocation = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  NativeUserLocation,
-  {
-    nativeOnly: {},
-  },
-);
-
-export default NativeUserLocation;

package/javascript/components/PointAnnotation.js

@@ -1,216 +0,0 @@
-import {toJSONString, isFunction, viewPropTypes} from '../utils';
-import {makePoint} from '../utils/geoUtils';
-
-import NativeBridgeComponent from './NativeBridgeComponent';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {requireNativeComponent, StyleSheet, Platform} from 'react-native';
-
-export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-  },
-});
-
-/**
- * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
- *
- * Consider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,
- * they'll offer much better performance
- *
- * .
- * If you need interctive views please use MarkerView,
- * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
- */
-class PointAnnotation extends NativeBridgeComponent(React.PureComponent) {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the annotation
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * The string containing the annotation’s title. Note this is required to be set if you want to see a callout appear on iOS.
-     */
-    title: PropTypes.string,
-
-    /**
-     * The string containing the annotation’s snippet(subtitle). Not displayed in the default callout.
-     */
-    snippet: PropTypes.string,
-
-    /**
-     * Manually selects/deselects annotation
-     * @type {[type]}
-     */
-    selected: PropTypes.bool,
-
-    /**
-     * Enable or disable dragging. Defaults to false.
-     */
-    draggable: PropTypes.bool,
-
-    /**
-     * The center point (specified as a map coordinate) of the annotation.
-     */
-    coordinate: PropTypes.arrayOf(PropTypes.number).isRequired,
-
-    /**
-     * Specifies the anchor being set on a particular point of the annotation.
-     * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
-     * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
-     * Note this is only for custom annotations not the default pin view.
-     * Defaults to the center of the view.
-     */
-    anchor: PropTypes.shape({
-      /**
-       * See anchor
-       */
-      x: PropTypes.number.isRequired,
-      /**
-       * See anchor
-       */
-      y: PropTypes.number.isRequired,
-    }),
-
-    /**
-     * This callback is fired once this annotation is selected. Returns a Feature as the first param.
-     */
-    onSelected: PropTypes.func,
-
-    /**
-     * This callback is fired once this annotation is deselected.
-     */
-    onDeselected: PropTypes.func,
-
-    /**
-     * This callback is fired once this annotation has started being dragged.
-     */
-    onDragStart: PropTypes.func,
-
-    /**
-     * This callback is fired once this annotation has stopped being dragged.
-     */
-    onDragEnd: PropTypes.func,
-
-    /**
-     * This callback is fired while this annotation is being dragged.
-     */
-    onDrag: PropTypes.func,
-  };
-
-  static defaultProps = {
-    anchor: {x: 0.5, y: 0.5},
-    draggable: false,
-  };
-
-  constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
-    this._onSelected = this._onSelected.bind(this);
-    this._onDeselected = this._onDeselected.bind(this);
-    this._onDragStart = this._onDragStart.bind(this);
-    this._onDrag = this._onDrag.bind(this);
-    this._onDragEnd = this._onDragEnd.bind(this);
-  }
-
-  _onSelected(e) {
-    if (isFunction(this.props.onSelected)) {
-      this.props.onSelected(e.nativeEvent.payload);
-    }
-  }
-
-  _onDeselected(e) {
-    if (isFunction(this.props.onDeselected)) {
-      this.props.onDeselected(e.nativeEvent.payload);
-    }
-  }
-
-  _onDragStart(e) {
-    if (isFunction(this.props.onDragStart)) {
-      this.props.onDragStart(e.nativeEvent.payload);
-    }
-  }
-
-  _onDrag(e) {
-    if (isFunction(this.props.onDrag)) {
-      this.props.onDrag(e.nativeEvent.payload);
-    }
-  }
-
-  _onDragEnd(e) {
-    if (isFunction(this.props.onDragEnd)) {
-      this.props.onDragEnd(e.nativeEvent.payload);
-    }
-  }
-
-  _getCoordinate() {
-    if (!this.props.coordinate) {
-      return undefined;
-    }
-    return toJSONString(makePoint(this.props.coordinate));
-  }
-
-  /**
-   * On android point annotation is rendered offscreen with a canvas into an image.
-   * To rerender the image from the current state of the view call refresh.
-   * Call this for example from Image#onLoad.
-   */
-  refresh() {
-    if (Platform.OS === 'android') {
-      this._runNativeCommand('refresh', this._nativeRef, []);
-    }
-  }
-
-  _setNativeRef(nativeRef) {
-    this._nativeRef = nativeRef;
-    super._runPendingNativeCommands(nativeRef);
-  }
-
-  render() {
-    const props = {
-      ...this.props,
-      ref: nativeRef => this._setNativeRef(nativeRef),
-      id: this.props.id,
-      title: this.props.title,
-      snippet: this.props.snippet,
-      anchor: this.props.anchor,
-      selected: this.props.selected,
-      draggable: this.props.draggable,
-      style: [this.props.style, styles.container],
-      onMapboxPointAnnotationSelected: this._onSelected,
-      onMapboxPointAnnotationDeselected: this._onDeselected,
-      onMapboxPointAnnotationDragStart: this._onDragStart,
-      onMapboxPointAnnotationDrag: this._onDrag,
-      onMapboxPointAnnotationDragEnd: this._onDragEnd,
-      coordinate: this._getCoordinate(),
-    };
-    return (
-      <RCTMGLPointAnnotation {...props}>
-        {this.props.children}
-      </RCTMGLPointAnnotation>
-    );
-  }
-}
-
-const RCTMGLPointAnnotation = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  PointAnnotation,
-  {
-    nativeOnly: {
-      onMapboxPointAnnotationSelected: true,
-      onMapboxPointAnnotationDeselected: true,
-      onMapboxPointAnnotationDragStart: true,
-      onMapboxPointAnnotationDrag: true,
-      onMapboxPointAnnotationDragEnd: true,
-    },
-  },
-);
-
-export default PointAnnotation;

package/javascript/components/RasterLayer.js

@@ -1,95 +0,0 @@
-import {viewPropTypes} from '../utils';
-import {RasterLayerStyleProp} from '../utils/styleMap';
-
-import AbstractLayer from './AbstractLayer';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
-
-const MapLibreGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
-
-class RasterLayer extends AbstractLayer {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the source in the style to which it is added.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * 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.
-     * Inferred from parent source only if the layer is a direct child to it.
-     */
-    sourceID: PropTypes.string,
-
-    /**
-     * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
-     */
-    sourceLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer above aboveLayerID.
-     */
-    aboveLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer below belowLayerID
-     */
-    belowLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer at a specified index
-     */
-    layerIndex: PropTypes.number,
-
-    /**
-     *  Filter only the features in the source layer that satisfy a condition that you define
-     */
-    filter: PropTypes.array,
-
-    /**
-     * The minimum zoom level at which the layer gets parsed and appears.
-     */
-    minZoomLevel: PropTypes.number,
-
-    /**
-     * The maximum zoom level at which the layer gets parsed and appears.
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Customizable style attributes
-     */
-    style: PropTypes.oneOfType([
-      RasterLayerStyleProp,
-      PropTypes.arrayOf(RasterLayerStyleProp),
-    ]),
-  };
-
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  render() {
-    const props = {
-      ...this.baseProps,
-      sourceLayerID: this.props.sourceLayerID,
-    };
-    return <RCTMGLRasterLayer ref="nativeLayer" {...props} />;
-  }
-}
-
-const RCTMGLRasterLayer = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  RasterLayer,
-  {
-    nativeOnly: {reactStyle: true},
-  },
-);
-
-export default RasterLayer;