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

package/javascript/components/CircleLayer.tsx

@@ -1,16 +1,18 @@
-import {CircleLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { CircleLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNCircleLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
-
-interface CircleLayerProps extends BaseProps, BaseLayerProps {
+export interface CircleLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -18,29 +20,34 @@ interface CircleLayerProps extends BaseProps, BaseLayerProps {
 }
 
 interface NativeProps
-  extends Omit<CircleLayerProps, 'style'>,
+  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 (
-      <RCTMGLCircleLayer
-        testID="rctmglCircleLayer"
-        ref={this.setNativeLayer}
-        {...this.baseProps}
-      />
-    );
-  }
-}
-
-const RCTMGLCircleLayer =
-  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 React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { FillExtrusionLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNFillExtrusionLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
-
-interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
+export interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -18,30 +20,28 @@ interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
 }
 
 interface NativeProps
-  extends Omit<FillExtrusionLayerProps, 'style'>,
+  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 <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMGLFillExtrusionLayer =
-  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,41 +1,44 @@
-import {FillLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { FillLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNFillLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
-
-interface FillLayerProps extends BaseProps, BaseLayerProps {
+export interface FillLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
   style?: FillLayerStyleProps;
 }
 
-interface NativeProps extends Omit<FillLayerProps, 'style'>, NativeBaseProps {}
+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 <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMGLFillLayer = 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/HeadingIndicator.tsx

@@ -1,22 +1,22 @@
-import BaseProps from '../types/BaseProps';
-import headingIcon from '../../assets/heading.png';
+import React, { ReactElement } from "react";
 
-import SymbolLayer from './SymbolLayer';
-
-import React, {ReactElement} from 'react';
+import SymbolLayer from "./SymbolLayer";
+// @ts-ignore
+import headingIcon from "../../assets/heading.png";
+import BaseProps from "../types/BaseProps";
 
 const style = {
   iconImage: headingIcon,
   iconAllowOverlap: true,
-  iconPitchAlignment: 'map',
-  iconRotationAlignment: 'map',
+  iconPitchAlignment: "map",
+  iconRotationAlignment: "map",
 } as const;
 
 interface HeadingIndicatorProps extends BaseProps {
   heading?: number;
 }
 
-const HeadingIndicator = ({heading}: HeadingIndicatorProps): ReactElement => (
+const HeadingIndicator = ({ heading }: HeadingIndicatorProps): ReactElement => (
   <SymbolLayer
     key="mapboxUserLocationHeadingIndicator"
     id="mapboxUserLocationHeadingIndicator"

package/javascript/components/HeatmapLayer.tsx

@@ -1,16 +1,18 @@
-import {HeatmapLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { HeatmapLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNHeatmapLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
-
-interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
+export interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -18,27 +20,27 @@ interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
 }
 
 interface NativeProps
-  extends Omit<HeatmapLayerProps, 'style'>,
+  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 <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMGLHeatmapLayer =
-  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

@@ -1,18 +1,17 @@
+import React, { ReactElement } from "react";
+import { requireNativeComponent } from "react-native";
+
+import useAbstractSource from "../hooks/useAbstractSource";
+import BaseProps from "../types/BaseProps";
 import {
   cloneReactChildrenWithProps,
   isNumber,
   resolveImagePath,
-} from '../utils';
-import BaseProps from '../types/BaseProps';
-
-import AbstractSource from './AbstractSource';
-
-import {requireNativeComponent} from 'react-native';
-import React, {ReactElement} from 'react';
+} from "../utils";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLImageSource';
+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;
-  }
-
-  render(): ReactElement | null {
-    if (
-      !this.props.url ||
-      !this.props.coordinates ||
-      !this.props.coordinates.length
-    ) {
-      return null;
-    }
+const ImageSource: React.FC<ImageSourceProps> = (props: ImageSourceProps) => {
+  const { setNativeRef } = useAbstractSource<NativeProps>();
 
-    const props = {
-      ...this.props,
-      url: this._getURL(),
-    };
+  const _getURL = (): string | undefined => {
+    return isNumber(props.url) ? resolveImagePath(props.url) : props.url;
+  };
 
-    return (
-      <RCTMGLImageSource ref={this.setNativeRef} {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMGLImageSource>
-    );
+  if (!props.url || !props.coordinates || !props.coordinates.length) {
+    return null;
   }
-}
 
-const RCTMGLImageSource =
-  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,40 +1,39 @@
-import BaseProps from '../types/BaseProps';
-
-import ShapeSource from './ShapeSource';
-
-import React, {ReactElement} from 'react';
+import React, { ReactElement } from "react";
 import {
   requireNativeComponent,
   Image,
   NativeSyntheticEvent,
   ImageSourcePropType,
   ImageURISource,
-} from 'react-native';
+} from "react-native";
+
+import { SHAPE_SOURCE_NATIVE_ASSETS_KEY } from "./ShapeSource";
+import BaseProps from "../types/BaseProps";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLImages';
+export const NATIVE_MODULE_NAME = "RCTMLNImages";
 
 export type ImageEntry = string | ImageSourcePropType;
 
 function _isUrlOrPath(value: ImageEntry): boolean {
   return (
-    (typeof value === 'string' || value instanceof String) &&
-    (value.startsWith('file://') ||
-      value.startsWith('http://') ||
-      value.startsWith('https://') ||
-      value.startsWith('data:') ||
-      value.startsWith('asset://') ||
-      value.startsWith('/'))
+    (typeof value === "string" || value instanceof String) &&
+    (value.startsWith("file://") ||
+      value.startsWith("http://") ||
+      value.startsWith("https://") ||
+      value.startsWith("data:") ||
+      value.startsWith("asset://") ||
+      value.startsWith("/"))
   );
 }
 
 function _isImageSourcePropType(
   value: ImageEntry,
 ): value is ImageSourcePropType {
-  if (typeof value === 'number' || value instanceof Number) {
+  if (typeof value === "number" || value instanceof Number) {
     return true;
   }
   const valueAsSource = value as ImageURISource;
-  return !!valueAsSource.uri && typeof valueAsSource.uri === 'string';
+  return !!valueAsSource.uri && typeof valueAsSource.uri === "string";
 }
 
 interface ImagesProps extends BaseProps {
@@ -43,7 +42,7 @@ interface ImagesProps extends BaseProps {
    * 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?: {[key: string]: ImageEntry};
+  images?: { [key: string]: ImageEntry };
   /**
    * 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']`.
@@ -54,7 +53,6 @@ interface ImagesProps extends BaseProps {
    * any of the `Images` component of the Map.
    */
   onImageMissing?(imageKey: string): void;
-
   id?: string;
   children: ReactElement;
 }
@@ -62,73 +60,75 @@ 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(): {
-    images?: {[key: string]: ImageEntry};
+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(
-    event: NativeSyntheticEvent<{payload: {imageKey: string}}>,
-  ): void {
-    if (this.props.onImageMissing) {
-      this.props.onImageMissing(event.nativeEvent.payload.imageKey);
+  const _onImageMissing = (
+    event: NativeSyntheticEvent<{ payload: { imageKey: string } }>,
+  ): 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 <RCTMGLImages {...props}>{this.props.children}</RCTMGLImages>;
-  }
-}
+  return <RCTMLNImages {...props}>{children}</RCTMLNImages>;
+};
 
-const RCTMGLImages = requireNativeComponent(NATIVE_MODULE_NAME);
+const RCTMLNImages = requireNativeComponent(NATIVE_MODULE_NAME);
 
 export default Images;