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

package/javascript/components/Style.tsx

@@ -1,30 +1,30 @@
-import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
-
-import CircleLayer from './CircleLayer';
-import RasterLayer from './RasterLayer';
-import SymbolLayer from './SymbolLayer';
-import LineLayer from './LineLayer';
-import FillLayer from './FillLayer';
-import FillExtrusionLayer from './FillExtrusionLayer';
-import BackgroundLayer from './BackgroundLayer';
-import HeatmapLayer from './HeatmapLayer';
-import VectorSource from './VectorSource';
-import RasterSource from './RasterSource';
-import ImageSource from './ImageSource';
-import ShapeSource from './ShapeSource';
-import {BaseLayerProps} from './AbstractLayer';
-
 import React, {
   useMemo,
   useState,
   useEffect,
   ReactElement,
   ComponentType,
-} from 'react';
+} from "react";
+
+import BackgroundLayer, { BackgroundLayerProps } from "./BackgroundLayer";
+import CircleLayer, { CircleLayerProps } from "./CircleLayer";
+import FillExtrusionLayer, {
+  FillExtrusionLayerProps,
+} from "./FillExtrusionLayer";
+import FillLayer, { FillLayerProps } from "./FillLayer";
+import HeatmapLayer, { HeatmapLayerProps } from "./HeatmapLayer";
+import ImageSource from "./ImageSource";
+import LineLayer, { LineLayerProps } from "./LineLayer";
+import RasterLayer, { RasterLayerProps } from "./RasterLayer";
+import RasterSource from "./RasterSource";
+import ShapeSource from "./ShapeSource";
+import SymbolLayer, { SymbolLayerProps } from "./SymbolLayer";
+import VectorSource from "./VectorSource";
+import { ExpressionField, FilterExpression } from "../utils/MaplibreStyles";
 
 function toCamelCase(s: string): string {
-  return s.replace(/([-_][a-z])/gi, $1 => {
-    return $1.toUpperCase().replace('-', '').replace('_', '');
+  return s.replace(/([-_][a-z])/gi, ($1) => {
+    return $1.toUpperCase().replace("-", "").replace("_", "");
   });
 }
 
@@ -37,9 +37,9 @@ function toCamelCaseKeys(
     return {};
   }
   const newObj: Record<string, unknown> = {};
-  Object.keys(oldObj).forEach(key => {
+  Object.keys(oldObj).forEach((key) => {
     const value = oldObj[key];
-    if (key.includes('-')) {
+    if (key.includes("-")) {
       newObj[toCamelCase(key)] = value;
     } else {
       newObj[key] = value;
@@ -48,27 +48,37 @@ function toCamelCaseKeys(
   return newObj;
 }
 
+type LayerProps =
+  | CircleLayerProps
+  | SymbolLayerProps
+  | RasterLayerProps
+  | LineLayerProps
+  | FillLayerProps
+  | FillExtrusionLayerProps
+  | BackgroundLayerProps
+  | HeatmapLayerProps;
+
 function getLayerComponentType(
   layer: MaplibreJSONLayer,
-): ComponentType<BaseLayerProps> | null {
-  const {type} = layer;
+): ComponentType<LayerProps> | null {
+  const { type } = layer;
 
   switch (type) {
-    case 'circle':
+    case "circle":
       return CircleLayer;
-    case 'symbol':
+    case "symbol":
       return SymbolLayer;
-    case 'raster':
+    case "raster":
       return RasterLayer;
-    case 'line':
+    case "line":
       return LineLayer;
-    case 'fill':
+    case "fill":
       return FillLayer;
-    case 'fill-extrusion':
+    case "fill-extrusion":
       return FillExtrusionLayer;
-    case 'background':
+    case "background":
       return BackgroundLayer;
-    case 'heatmap':
+    case "heatmap":
       return HeatmapLayer;
   }
 
@@ -79,10 +89,10 @@ function getLayerComponentType(
 
 interface MaplibreJSONLayer {
   type: string;
-  paint: {[k: string]: unknown};
-  layout: {[k: string]: unknown};
+  paint: { [k: string]: unknown };
+  layout: { [k: string]: unknown };
   source?: string;
-  'source-layer'?: string;
+  "source-layer"?: string;
   minzoom?: number;
   maxzoom?: number;
   filter?: FilterExpression;
@@ -91,7 +101,7 @@ interface MaplibreJSONLayer {
 
 function asLayerComponent(
   layer: MaplibreJSONLayer,
-): ReactElement<BaseLayerProps> | null {
+): ReactElement<LayerProps> | null {
   const LayerComponent = getLayerComponentType(layer);
 
   if (!LayerComponent) {
@@ -103,13 +113,13 @@ function asLayerComponent(
     ...toCamelCaseKeys(layer.layout),
   };
 
-  const layerProps: Partial<BaseLayerProps> = {};
+  const layerProps: Partial<LayerProps> = {};
 
   if (layer.source) {
     layerProps.sourceID = layer.source;
   }
-  if (layer['source-layer']) {
-    layerProps.sourceLayerID = layer['source-layer'];
+  if (layer["source-layer"]) {
+    layerProps.sourceLayerID = layer["source-layer"];
   }
   if (layer.minzoom) {
     layerProps.minZoomLevel = layer.minzoom;
@@ -134,7 +144,7 @@ interface MaplibreJSONSource {
   minzoom?: number;
   maxzoom?: number;
   attribution?: string;
-  scheme?: 'xyz' | 'tms';
+  scheme?: "xyz" | "tms";
   bounds?: number[];
   buffer?: number;
   tileSize?: number;
@@ -148,7 +158,7 @@ interface MaplibreJSONSource {
   clusterMaxZoom?: number;
   clusterMinPoints?: number;
   clusterRadius?: number;
-  clusterProperties?: {[propertyName: string]: ExpressionField};
+  clusterProperties?: { [propertyName: string]: ExpressionField };
   data?: string | object;
   filter?: FilterExpression;
   generateId?: boolean;
@@ -182,19 +192,19 @@ function getTileSourceProps(source: MaplibreJSONSource): SourceProps {
   if (source.attribution) {
     sourceProps.attribution = source.attribution;
   }
-  if (source.scheme && source.scheme === 'tms') {
+  if (source.scheme && source.scheme === "tms") {
     sourceProps.tms = true;
   }
   return sourceProps;
 }
 
 function getVectorSource(id: string, source: MaplibreJSONSource): ReactElement {
-  const sourceProps = {...getTileSourceProps(source)};
+  const sourceProps = { ...getTileSourceProps(source) };
   return <VectorSource key={id} id={id} {...sourceProps} />;
 }
 
 function getRasterSource(id: string, source: MaplibreJSONSource): ReactElement {
-  const sourceProps: SourceProps & {tileSize?: number} = {
+  const sourceProps: SourceProps & { tileSize?: number } = {
     ...getTileSourceProps(source),
   };
   if (source.tileSize) {
@@ -211,7 +221,7 @@ function getImageSource(id: string, source: MaplibreJSONSource): ReactElement {
   return <ImageSource key={id} id={id} {...sourceProps} />;
 }
 
-type ShapeSourceShape = (typeof ShapeSource.prototype.props)['shape'];
+type ShapeSourceShape = (typeof ShapeSource.prototype.props)["shape"];
 
 function getShapeSource(id: string, source: MaplibreJSONSource): ReactElement {
   const sourceProps: SourceProps & {
@@ -219,14 +229,14 @@ function getShapeSource(id: string, source: MaplibreJSONSource): ReactElement {
     cluster?: boolean;
     clusterRadius?: number;
     clusterMaxZoomLevel?: number;
-    clusterProperties?: {[propertyName: string]: ExpressionField};
+    clusterProperties?: { [propertyName: string]: ExpressionField };
     buffer?: number;
     tolerance?: number;
     lineMetrics?: boolean;
   } = {};
-  if (source.data && typeof source.data === 'string') {
+  if (source.data && typeof source.data === "string") {
     sourceProps.url = source.data;
-  } else if (source.data && typeof source.data === 'object') {
+  } else if (source.data && typeof source.data === "object") {
     sourceProps.shape = source.data as ShapeSourceShape;
   }
   if (source.cluster !== undefined) {
@@ -261,13 +271,13 @@ function asSourceComponent(
   source: MaplibreJSONSource,
 ): ReactElement | null {
   switch (source.type) {
-    case 'vector':
+    case "vector":
       return getVectorSource(id, source);
-    case 'raster':
+    case "raster":
       return getRasterSource(id, source);
-    case 'image':
+    case "image":
       return getImageSource(id, source);
-    case 'geojson':
+    case "geojson":
       return getShapeSource(id, source);
   }
 
@@ -278,7 +288,7 @@ function asSourceComponent(
 
 interface MaplibreJSON {
   layers?: MaplibreJSONLayer[];
-  sources?: {[key: string]: MaplibreJSONSource};
+  sources?: { [key: string]: MaplibreJSONSource };
 }
 
 interface StyleProps {
@@ -298,7 +308,7 @@ interface StyleProps {
 const Style = (props: StyleProps): ReactElement => {
   const [fetchedJson, setFetchedJson] = useState({});
   const json: MaplibreJSON =
-    typeof props.json === 'object' ? props.json : fetchedJson;
+    typeof props.json === "object" ? props.json : fetchedJson;
 
   // Fetch style when props.json is a URL
   useEffect(() => {
@@ -311,14 +321,14 @@ const Style = (props: StyleProps): ReactElement => {
         const responseJson = await response.json();
         setFetchedJson(responseJson);
       } catch (error: unknown) {
-        const e = error as {name?: string};
-        if (e.name === 'AbortError') {
+        const e = error as { name?: string };
+        if (e.name === "AbortError") {
           return;
         }
         throw e;
       }
     };
-    if (typeof props.json === 'string') {
+    if (typeof props.json === "string") {
       fetchStyleJson(props.json);
     }
     return function cleanup(): void {
@@ -338,13 +348,13 @@ const Style = (props: StyleProps): ReactElement => {
 
   // Extract source components from json
   const sourceComponents = useMemo(() => {
-    const {sources} = json;
+    const { sources } = json;
     if (!sources || !Object.keys(sources)) {
       return [];
     }
     return Object.keys(sources)
-      .map(id => asSourceComponent(id, sources[id]))
-      .filter(x => !!x);
+      .map((id) => asSourceComponent(id, sources[id]))
+      .filter((x) => !!x);
   }, [json]);
 
   return (

package/javascript/components/SymbolLayer.tsx

@@ -1,16 +1,18 @@
-import {type SymbolLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React, { ReactElement } from "react";
+import { View, NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { type SymbolLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-import {View, NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNSymbolLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
-
-interface SymbolLayerProps extends BaseProps, BaseLayerProps {
+export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -23,50 +25,54 @@ interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   children?: ReactElement | ReactElement[];
 }
 
-interface NativeProps extends Omit<SymbolLayerProps, 'style'>, NativeBaseProps {
+interface NativeProps extends Omit<SymbolLayerProps, "style">, NativeBaseProps {
   snapshot: boolean;
 }
 
+const RCTMLNSymbolLayer =
+  requireNativeComponent<NativeProps>(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<SymbolLayerProps, NativeBaseProps> {
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  _shouldSnapshot(): boolean {
+const SymbolLayer: React.FC<SymbolLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: SymbolLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    SymbolLayerProps,
+    NativeBaseProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  const _shouldSnapshot = (): boolean => {
     let isSnapshot = false;
 
-    if (React.Children.count(this.props.children) <= 0) {
+    if (React.Children.count(props.children) <= 0) {
       return isSnapshot;
     }
 
-    React.Children.forEach(this.props.children, child => {
+    React.Children.forEach(props.children, (child) => {
       if (child?.type === View) {
         isSnapshot = true;
       }
     });
 
     return isSnapshot;
-  }
-
-  render(): ReactElement {
-    const props = {
-      ...this.baseProps,
-      snapshot: this._shouldSnapshot(),
-      sourceLayerID: this.props.sourceLayerID,
-    };
+  };
 
-    return (
-      <RCTMGLSymbolLayer ref={this.setNativeLayer} {...props}>
-        {this.props.children}
-      </RCTMGLSymbolLayer>
-    );
-  }
-}
+  const updatedProps = {
+    ...baseProps,
+    snapshot: _shouldSnapshot(),
+  };
 
-const RCTMGLSymbolLayer =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+  return (
+    <RCTMLNSymbolLayer ref={setNativeLayer} {...updatedProps}>
+      {props.children}
+    </RCTMLNSymbolLayer>
+  );
+};
 
 export default SymbolLayer;