@rnmapbox/maps 10.0.0-beta.41 → 10.0.0-beta.43

package/javascript/components/SymbolLayer.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { View, NativeModules, requireNativeComponent } from 'react-native';
+
+import { type SymbolLayerStyleProps } from '../utils/MapboxStyles';
+import { type StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
+
+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?: string[];
+
+  /**
+   * 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;
+
+  style: SymbolLayerStyleProps;
+
+  children?: JSX.Element | JSX.Element[];
+};
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  snapshot: boolean;
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+const RCTMGLSymbolLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+/**
+ * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
+ */
+class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  _shouldSnapshot() {
+    let isSnapshot = false;
+
+    if (React.Children.count(this.props.children) <= 0) {
+      return isSnapshot;
+    }
+
+    React.Children.forEach(this.props.children, (child) => {
+      if (child?.type === View) {
+        isSnapshot = true;
+      }
+    });
+
+    return isSnapshot;
+  }
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      snapshot: this._shouldSnapshot(),
+      sourceLayerID: this.props.sourceLayerID,
+    };
+
+    return (
+      <RCTMGLSymbolLayer ref={this.setNativeLayer} {...props}>
+        {this.props.children}
+      </RCTMGLSymbolLayer>
+    );
+  }
+}
+
+export default SymbolLayer;

package/javascript/components/Terrain.tsx

@@ -0,0 +1,52 @@
+import React, { memo, useMemo } from 'react';
+import { HostComponent, requireNativeComponent } from 'react-native';
+
+import type { TerrainLayerStyleProps, Value } from '../utils/MapboxStyles';
+import { StyleValue, transformStyle } from '../utils/StyleValue';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
+
+type Props = {
+  /**
+   * Name of a source of raster_dem type to be used for terrain elevation.
+   */
+  sourceID: string;
+
+  /**
+   * Deprecated, use exaggeration in style instead
+   */
+  exaggeration?: Value<number, ['zoom']>;
+
+  /**
+   * Customizable style attributes
+   */
+  style: TerrainLayerStyleProps;
+};
+
+export const Terrain = memo((props: Props) => {
+  let { style = {} } = props;
+
+  if (props.exaggeration) {
+    console.warn(
+      `Tarrain: exaggeration property is deprecated pls use style.exaggeration instead!`,
+    );
+    style = { exaggeration: props.exaggeration, ...style };
+  }
+
+  const baseProps = useMemo(() => {
+    return {
+      ...props,
+      reactStyle: transformStyle(style),
+      style: undefined,
+    };
+  }, [props, style]);
+  console.log('BASE PROPS', baseProps);
+
+  return <RCTMGLTerrain {...baseProps} />;
+});
+
+const RCTMGLTerrain: HostComponent<{
+  sourceID: string;
+  reactStyle?: { [key: string]: StyleValue };
+  style?: undefined;
+}> = requireNativeComponent(NATIVE_MODULE_NAME);

package/javascript/components/UserLocation.js

@@ -49,7 +49,7 @@ export const normalIcon = (showsUserHeadingIndicator, heading) => [
     style={layerStyles.normal.foreground}
   />,
   ...(showsUserHeadingIndicator && heading !== null
-    ? [HeadingIndicator(heading)]
+    ? [HeadingIndicator({ heading })]
     : []),
 ];
 

package/javascript/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: import('react-native').ImageSourcePropType;
+  export default value;
+}

package/javascript/index.js

@@ -1,6 +1,6 @@
 import { NativeModules } from 'react-native';
 
-import { Camera } from './components/Camera';
+import { Camera, UserTrackingModes } from './components/Camera';
 import { Atmosphere } from './components/Atmosphere';
 import MapView from './components/MapView';
 import Light from './components/Light';
@@ -23,7 +23,7 @@ import SkyLayer from './components/SkyLayer';
 import SymbolLayer from './components/SymbolLayer';
 import RasterLayer from './components/RasterLayer';
 import BackgroundLayer from './components/BackgroundLayer';
-import Terrain from './components/Terrain';
+import { Terrain } from './components/Terrain';
 import locationManager from './modules/location/locationManager';
 import offlineManager from './modules/offline/offlineManager';
 import snapshotManager from './modules/snapshot/snapshotManager';
@@ -38,13 +38,14 @@ import {
 } from './classes';
 import Style from './components/Style';
 import Logger from './utils/Logger';
+import { deprecatedClass } from './utils/deprecation';
 import { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions';
 
 const MapboxGL = { ...NativeModules.MGLModule };
 
 // static methods
 MapboxGL.requestAndroidLocationPermissions = requestAndroidLocationPermissions;
-MapboxGL.UserTrackingModes = Camera.UserTrackingModes;
+MapboxGL.UserTrackingModes = UserTrackingModes;
 
 // components
 MapboxGL.MapView = MapView;
@@ -57,7 +58,10 @@ MapboxGL.Style = Style;
 
 // classes
 MapboxGL.AnimatedPoint = AnimatedPoint;
-MapboxGL.AnimatedMapPoint = AnimatedPoint; // For backwards compatibiilty.
+MapboxGL.AnimatedMapPoint = deprecatedClass(
+  AnimatedPoint,
+  'AnimatedMapPoint is deprecated please use AnimatedPoint',
+);
 MapboxGL.AnimatedShape = AnimatedShape;
 MapboxGL.AnimatedCoordinatesArray = AnimatedCoordinatesArray;
 MapboxGL.AnimatedExtractCoordinateFromArray =

package/javascript/types/index.ts

@@ -10,20 +10,6 @@ export type MapboxGLEvent<
   V = Element,
 > = SyntheticEvent<V, { type: T; payload: P }>;
 
-// Camera.
-
-export type UserTrackingMode = 'normal' | 'compass' | 'course';
-
-export type UserTrackingModeChangeCallback = (
-  event: MapboxGLEvent<
-    'usertrackingmodechange',
-    {
-      followUserLocation: boolean;
-      followUserMode: UserTrackingMode | null;
-    }
-  >,
-) => void;
-
 // Animated.
 
 export interface AnimatedPoint extends GeoJsonObject {