@rnmapbox/maps 10.0.0-beta.64 → 10.0.0-beta.66

package/javascript/components/CircleLayer.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+  HostComponent,
+  NativeModules,
+  requireNativeComponent,
+} from 'react-native';
+
+import { FilterExpression, CircleLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * 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?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property
+   * from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: CircleLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * CircleLayer is a style layer that renders one or more filled circles on the map.
+ */
+class CircleLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.props,
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLCircleLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLCircleLayer: HostComponent<Props> =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default CircleLayer;

package/javascript/components/FillExtrusionLayer.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import {
+  FilterExpression,
+  FillExtrusionLayerStyleProps,
+} from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * 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?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: FillExtrusionLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
+ */
+class FillExtrusionLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.props,
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLFillExtrusionLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default FillExtrusionLayer;

package/javascript/components/FillLayer.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { FilterExpression, FillLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * 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?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: FillLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
+ */
+class FillLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLFillLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default FillLayer;

package/javascript/components/HeatmapLayer.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import {
+  FilterExpression,
+  HeatmapLayerStyleProps,
+} from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * 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?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property
+   * from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: HeatmapLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+/**
+ * HeatmapLayer is a style layer that renders one or more filled circles on the map.
+ */
+class HeatmapLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.props,
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLHeatmapLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default HeatmapLayer;

package/javascript/components/NativeUserLocation.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { HostComponent, requireNativeComponent } from 'react-native';
+
+const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
+
+export type Props = {
+  /**
+   * Android render mode.
+   *
+   *  - normal: just a circle
+   *  - compass: triangle with heading
+   *  - gps: large arrow
+   *
+   * @platform android
+   */
+  androidRenderMode?: 'normal' | 'compass' | 'gps';
+
+  /**
+   * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
+   *
+   * @platform ios
+   */
+  iosShowsUserHeadingIndicator?: boolean;
+};
+
+const RCTMGLNativeUserLocation: HostComponent<Props> =
+  requireNativeComponent(NATIVE_MODULE_NAME);
+
+const NativeUserLocation = memo((props: Props) => {
+  return <RCTMGLNativeUserLocation {...props} />;
+});
+
+export default NativeUserLocation;

package/javascript/components/RasterLayer.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { FilterExpression, RasterLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * 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?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style: RasterLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+class RasterLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLRasterLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default RasterLayer;

package/javascript/components/SkyLayer.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import { FilterExpression, SkyLayerStyleProps } from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLSkyLayer';
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * 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.
+   */
+  sourceID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: SkyLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+/**
+ * SkyLayer is a spherical dome around the map that is always rendered behind all other layers
+ */
+class SkyLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    return <RCTMGLSkyLayer ref={this.setNativeLayer} {...this.baseProps} />;
+  }
+}
+
+const RCTMGLSkyLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default SkyLayer;

package/javascript/components/UserLocation.js

@@ -97,6 +97,13 @@ class UserLocation extends React.Component {
      */
     showsUserHeadingIndicator: PropTypes.bool,
 
+    /**
+     * Request the always location permission, and listen to the location even when the app is in background
+     *
+     * @platform ios
+     */
+    requestsAlwaysUse: PropTypes.bool,
+
     /**
      * Minimum amount of movement before GPS location is updated in meters
      */
@@ -112,6 +119,7 @@ class UserLocation extends React.Component {
     animated: true,
     visible: true,
     showsUserHeadingIndicator: false,
+    requestsAlwaysUse: false,
     minDisplacement: 0,
     renderMode: 'normal',
   };
@@ -161,6 +169,9 @@ class UserLocation extends React.Component {
     if (this.props.minDisplacement !== prevProps.minDisplacement) {
       locationManager.setMinDisplacement(this.props.minDisplacement);
     }
+    if (this.props.requestsAlwaysUse !== prevProps.requestsAlwaysUse) {
+      locationManager.setRequestsAlwaysUse(this.props.requestsAlwaysUse);
+    }
   }
 
   async componentWillUnmount() {

package/javascript/modules/location/locationManager.js

@@ -1,4 +1,4 @@
-import { NativeModules, NativeEventEmitter } from 'react-native';
+import { NativeModules, NativeEventEmitter, AppState } from 'react-native';
 
 const MapboxGL = NativeModules.MGLModule;
 const MapboxGLLocationManager = NativeModules.MGLLocationModule;
@@ -12,8 +12,14 @@ class LocationManager {
     this._listeners = [];
     this._lastKnownLocation = null;
     this._isListening = false;
+    this._requestsAlwaysUse = false;
     this.onUpdate = this.onUpdate.bind(this);
     this.subscription = null;
+
+    this._appStateListener = AppState.addEventListener(
+      'change',
+      this._handleAppStateChange.bind(this),
+    );
   }
 
   async getLastKnownLocation() {
@@ -28,7 +34,7 @@ class LocationManager {
         lastKnownLocation =
           await MapboxGLLocationManager.getLastKnownLocation();
       } catch (error) {
-        console.log('locationManager Error: ', error);
+        console.warn('locationManager Error: ', error);
       }
 
       if (!this._lastKnownLocation && lastKnownLocation) {
@@ -64,6 +70,16 @@ class LocationManager {
     this.stop();
   }
 
+  _handleAppStateChange(appState) {
+    if (!this._requestsAlwaysUse) {
+      if (appState === 'background') {
+        this.stop();
+      } else if (appState === 'active') {
+        this.start();
+      }
+    }
+  }
+
   start(displacement = -1) {
     if (
       displacement === -1 ||
@@ -103,6 +119,11 @@ class LocationManager {
     MapboxGLLocationManager.setMinDisplacement(minDisplacement);
   }
 
+  setRequestsAlwaysUse(requestsAlwaysUse) {
+    MapboxGLLocationManager.setRequestsAlwaysUse(requestsAlwaysUse);
+    this._requestsAlwaysUse = requestsAlwaysUse;
+  }
+
   onUpdate(location) {
     this._lastKnownLocation = location;
 

package/javascript/modules/offline/offlineManager.js

@@ -247,7 +247,7 @@ class OfflineManager {
 
   /**
    * Sets the period at which download status events will be sent over the React Native bridge.
-   * The default is 500ms.
+   * The default is 300ms.
    *
    * @example
    * MapboxGL.offlineManager.setProgressEventThrottle(500);