@maplibre/maplibre-react-native 10.0.0-alpha.5 → 10.0.0-alpha.7

package/javascript/components/CircleLayer.tsx

@@ -1,16 +1,18 @@
 import {CircleLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
-
-import React, {ReactElement} from 'react';
+import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
 const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNCircleLayer';
 
-interface CircleLayerProps extends BaseProps, BaseLayerProps {
+export interface CircleLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -21,26 +23,31 @@ interface NativeProps
   extends Omit<CircleLayerProps, 'style'>,
     NativeBaseProps {}
 
+const RCTMLNCircleLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * 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 (
-      <RCTMLNCircleLayer
-        testID="rctmlnCircleLayer"
-        ref={this.setNativeLayer}
-        {...this.baseProps}
-      />
-    );
-  }
-}
-
-const RCTMLNCircleLayer =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const CircleLayer: React.FC<CircleLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: CircleLayerProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<
+    CircleLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return (
+    <RCTMLNCircleLayer
+      testID="rctmlnCircleLayer"
+      ref={setNativeLayer}
+      {...baseProps}
+    />
+  );
+};
 
 export default CircleLayer;

package/javascript/components/FillExtrusionLayer.tsx

@@ -1,16 +1,18 @@
 import {FillExtrusionLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
-
-import React, {ReactElement} from 'react';
+import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
 const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNFillExtrusionLayer';
 
-interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
+export interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -21,27 +23,25 @@ interface NativeProps
   extends Omit<FillExtrusionLayerProps, 'style'>,
     NativeBaseProps {}
 
+const RCTMLNFillExtrusionLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * 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 <RCTMLNFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMLNFillExtrusionLayer =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const FillExtrusionLayer: React.FC<FillExtrusionLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: FillExtrusionLayerProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<
+    FillExtrusionLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNFillExtrusionLayer ref={setNativeLayer} {...baseProps} />;
+};
 
 export default FillExtrusionLayer;

package/javascript/components/FillLayer.tsx

@@ -1,16 +1,18 @@
 import {FillLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
-
-import React, {ReactElement} from 'react';
+import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
 const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNFillLayer';
 
-interface FillLayerProps extends BaseProps, BaseLayerProps {
+export interface FillLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -19,23 +21,24 @@ interface FillLayerProps extends BaseProps, BaseLayerProps {
 
 interface NativeProps extends Omit<FillLayerProps, 'style'>, NativeBaseProps {}
 
+const RCTMLNFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * 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 <RCTMLNFillLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMLNFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const FillLayer: React.FC<FillLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: FillLayerProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<
+    FillLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNFillLayer ref={setNativeLayer} {...baseProps} />;
+};
 
 export default FillLayer;

package/javascript/components/HeatmapLayer.tsx

@@ -1,9 +1,11 @@
 import {HeatmapLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
-
-import React, {ReactElement} from 'react';
+import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
 const MapLibreGL = NativeModules.MLNModule;
@@ -21,24 +23,24 @@ interface NativeProps
   extends Omit<HeatmapLayerProps, 'style'>,
     NativeBaseProps {}
 
+const RCTMLNHeatmapLayer =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 /**
  * 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 <RCTMLNHeatmapLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMLNHeatmapLayer =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const HeatmapLayer: React.FC<HeatmapLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: HeatmapLayerProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<
+    HeatmapLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNHeatmapLayer ref={setNativeLayer} {...baseProps} />;
+};
 
 export default HeatmapLayer;

package/javascript/components/ImageSource.tsx

@@ -4,15 +4,14 @@ import {
   resolveImagePath,
 } from '../utils';
 import BaseProps from '../types/BaseProps';
-
-import AbstractSource from './AbstractSource';
+import useAbstractSource from '../hooks/useAbstractSource';
 
 import {requireNativeComponent} from 'react-native';
 import React, {ReactElement} from 'react';
 
 export const NATIVE_MODULE_NAME = 'RCTMLNImageSource';
 
-interface ImageSourceProps extends BaseProps {
+export interface ImageSourceProps extends BaseProps {
   /**
    * A string that uniquely identifies the source.
    */
@@ -37,42 +36,36 @@ interface ImageSourceProps extends BaseProps {
 
 type NativeProps = ImageSourceProps;
 
+const RCTMLNImageSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * 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;
-  }
+const ImageSource: React.FC<ImageSourceProps> = (props: ImageSourceProps) => {
+  const {setNativeRef} = useAbstractSource<NativeProps>();
 
-  render(): ReactElement | null {
-    if (
-      !this.props.url ||
-      !this.props.coordinates ||
-      !this.props.coordinates.length
-    ) {
-      return null;
-    }
+  const _getURL = (): string | undefined => {
+    return isNumber(props.url) ? resolveImagePath(props.url) : props.url;
+  };
 
-    const props = {
-      ...this.props,
-      url: this._getURL(),
-    };
-
-    return (
-      <RCTMLNImageSource ref={this.setNativeRef} {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMLNImageSource>
-    );
+  if (!props.url || !props.coordinates || !props.coordinates.length) {
+    return null;
   }
-}
 
-const RCTMLNImageSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+  const allProps = {
+    ...props,
+    url: _getURL(),
+  };
+
+  return (
+    <RCTMLNImageSource ref={setNativeRef} {...allProps}>
+      {cloneReactChildrenWithProps(allProps.children, {
+        sourceID: allProps.id,
+      })}
+    </RCTMLNImageSource>
+  );
+};
 
 export default ImageSource;

package/javascript/components/Images.tsx

@@ -1,6 +1,6 @@
 import BaseProps from '../types/BaseProps';
 
-import ShapeSource from './ShapeSource';
+import {SHAPE_SOURCE_NATIVE_ASSETS_KEY} from './ShapeSource';
 
 import React, {ReactElement} from 'react';
 import {
@@ -54,7 +54,6 @@ interface ImagesProps extends BaseProps {
    * any of the `Images` component of the Map.
    */
   onImageMissing?(imageKey: string): void;
-
   id?: string;
   children: ReactElement;
 }
@@ -62,72 +61,74 @@ interface ImagesProps extends BaseProps {
 /**
  * Images defines the images used in Symbol etc layers
  */
-class Images extends React.Component<ImagesProps> {
-  static NATIVE_ASSETS_KEY = 'assets';
-
-  _getImages(): {
+const Images = ({
+  images,
+  nativeAssetImages,
+  onImageMissing,
+  id,
+  children,
+}: ImagesProps): ReactElement => {
+  const _getImages = (): {
     images?: {[key: string]: ImageEntry};
     nativeImages?: ImageEntry[];
-  } {
-    if (!this.props.images && !this.props.nativeAssetImages) {
+  } => {
+    if (!images && !nativeAssetImages) {
       return {};
     }
 
-    const images: {[key: string]: ImageEntry} = {};
+    const imagesResult: {[key: string]: ImageEntry} = {};
     let nativeImages: ImageEntry[] = [];
 
-    if (this.props.images) {
-      const imageNames = Object.keys(this.props.images);
+    if (images) {
+      const imageNames = Object.keys(images);
       for (const imageName of imageNames) {
-        const value = this.props.images[imageName];
+        const value = images[imageName];
         if (
-          imageName === ShapeSource.NATIVE_ASSETS_KEY &&
+          imageName === SHAPE_SOURCE_NATIVE_ASSETS_KEY &&
           Array.isArray(value)
         ) {
           console.warn(
-            `Use of ${ShapeSource.NATIVE_ASSETS_KEY} in Images#images is deprecated please use Images#nativeAssetImages`,
+            `Use of ${SHAPE_SOURCE_NATIVE_ASSETS_KEY} in Images#images is deprecated please use Images#nativeAssetImages`,
           );
           nativeImages = value;
         } else if (_isUrlOrPath(value)) {
-          images[imageName] = value;
+          imagesResult[imageName] = value;
         } else if (_isImageSourcePropType(value)) {
           const res = Image.resolveAssetSource(value);
           if (res && res.uri) {
-            images[imageName] = res;
+            imagesResult[imageName] = res;
           }
         }
       }
     }
 
-    if (this.props.nativeAssetImages) {
-      nativeImages = this.props.nativeAssetImages;
+    if (nativeAssetImages) {
+      nativeImages = nativeAssetImages;
     }
 
     return {
-      images,
+      images: imagesResult,
       nativeImages,
     };
-  }
+  };
 
-  _onImageMissing(
+  const _onImageMissing = (
     event: NativeSyntheticEvent<{payload: {imageKey: string}}>,
-  ): void {
-    if (this.props.onImageMissing) {
-      this.props.onImageMissing(event.nativeEvent.payload.imageKey);
+  ): void => {
+    if (onImageMissing) {
+      onImageMissing(event.nativeEvent.payload.imageKey);
     }
-  }
+  };
 
-  render(): ReactElement {
-    const props = {
-      id: this.props.id,
-      hasOnImageMissing: !!this.props.onImageMissing,
-      onImageMissing: this._onImageMissing.bind(this),
-      ...this._getImages(),
-    };
+  const props = {
+    id,
+    hasOnImageMissing: !!onImageMissing,
+    onImageMissing: _onImageMissing,
+    ..._getImages(),
+  };
 
-    return <RCTMLNImages {...props}>{this.props.children}</RCTMLNImages>;
-  }
-}
+  return <RCTMLNImages {...props}>{children}</RCTMLNImages>;
+};
 
 const RCTMLNImages = requireNativeComponent(NATIVE_MODULE_NAME);
 

package/javascript/components/Light.tsx

@@ -1,20 +1,15 @@
 import {LightLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
-import {StyleValue, transformStyle} from '../utils/StyleValue';
+import {StyleValue} from '../utils/StyleValue';
+import {BaseLayerProps} from '../hooks/useAbstractLayer';
+import useAbstractLayer from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps} from './AbstractLayer';
-
-import React, {
-  Component,
-  createRef,
-  MutableRefObject,
-  ReactElement,
-} from 'react';
-import {NativeMethods, requireNativeComponent} from 'react-native';
+import React from 'react';
+import {requireNativeComponent} from 'react-native';
 
 export const NATIVE_MODULE_NAME = 'RCTMLNLight';
 
-interface LightProps extends BaseProps {
+interface LightProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -24,44 +19,22 @@ interface LightProps extends BaseProps {
 interface NativeProps extends Omit<LightProps, 'style'> {
   reactStyle?: {[key: string]: StyleValue};
 }
+
+const RCTMLNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * 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 (
-      <RCTMLNLight
-        ref={this.lightRef}
-        testID="rctmlnLight"
-        {...this.props}
-        reactStyle={this.getStyle()}
-      />
-    );
-  }
-}
-
-const RCTMLNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const Light: React.FC<LightProps> = (props: LightProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<LightProps, NativeProps>(
+    {
+      ...props,
+    },
+  );
+
+  return (
+    <RCTMLNLight ref={setNativeLayer} testID="rctmlnLight" {...baseProps} />
+  );
+};
 
 export default Light;

package/javascript/components/LineLayer.tsx

@@ -1,16 +1,18 @@
 import {LineLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
-
-import React, {ReactElement} from 'react';
+import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
 const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNLineLayer';
 
-interface LineLayerProps extends BaseProps, BaseLayerProps {
+export interface LineLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -19,24 +21,25 @@ interface LineLayerProps extends BaseProps, BaseLayerProps {
 
 interface NativeProps extends Omit<LineLayerProps, 'style'>, NativeBaseProps {}
 
+const RCTMLNLineLayer =
+  requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
+
 /**
  * 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 <RCTMLNLineLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMLNLineLayer =
-  requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
+const LineLayer: React.FC<LineLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: LineLayerProps) => {
+  const {baseProps, setNativeLayer} = useAbstractLayer<
+    LineLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNLineLayer ref={setNativeLayer} {...baseProps} />;
+};
 
 export default LineLayer;