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

package/src/components/CircleLayer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type CircleLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type CircleLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNCircleLayer";
 
@@ -16,7 +16,7 @@ export interface CircleLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: CircleLayerStyleProps;
+  style?: CircleLayerStyle;
 }
 
 interface NativeProps
@@ -28,8 +28,8 @@ const MLRNCircleLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 /**
  * CircleLayer is a style layer that renders one or more filled circles on the map.
  */
-const CircleLayer: React.FC<CircleLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const CircleLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: CircleLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -48,5 +48,3 @@ const CircleLayer: React.FC<CircleLayerProps> = ({
     />
   );
 };
-
-export default CircleLayer;

package/src/components/FillExtrusionLayer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type FillExtrusionLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type FillExtrusionLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNFillExtrusionLayer";
 
@@ -16,7 +16,7 @@ export interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: FillExtrusionLayerStyleProps;
+  style?: FillExtrusionLayerStyle;
 }
 
 interface NativeProps
@@ -29,8 +29,8 @@ const MLRNFillExtrusionLayer =
 /**
  * FillExtrusionLayer is a style layer that renders one or more 3D extruded polygons on the map.
  */
-const FillExtrusionLayer: React.FC<FillExtrusionLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const FillExtrusionLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: FillExtrusionLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -43,5 +43,3 @@ const FillExtrusionLayer: React.FC<FillExtrusionLayerProps> = ({
 
   return <MLRNFillExtrusionLayer ref={setNativeLayer} {...baseProps} />;
 };
-
-export default FillExtrusionLayer;

package/src/components/FillLayer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type FillLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type FillLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNFillLayer";
 
@@ -16,7 +16,7 @@ export interface FillLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: FillLayerStyleProps;
+  style?: FillLayerStyle;
 }
 
 interface NativeProps extends Omit<FillLayerProps, "style">, NativeBaseProps {}
@@ -26,8 +26,8 @@ const MLRNFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 /**
  * FillLayer is a style layer that renders one or more filled (and optionally stroked) polygons on the map.
  */
-const FillLayer: React.FC<FillLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const FillLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: FillLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -40,5 +40,3 @@ const FillLayer: React.FC<FillLayerProps> = ({
 
   return <MLRNFillLayer ref={setNativeLayer} {...baseProps} />;
 };
-
-export default FillLayer;

package/src/components/HeadingIndicator.tsx

@@ -1,6 +1,4 @@
-import { type ReactElement } from "react";
-
-import SymbolLayer from "./SymbolLayer";
+import { SymbolLayer } from "./SymbolLayer";
 import headingIcon from "../assets/heading.png";
 import { type BaseProps } from "../types/BaseProps";
 
@@ -15,7 +13,7 @@ interface HeadingIndicatorProps extends BaseProps {
   heading?: number;
 }
 
-const HeadingIndicator = ({ heading }: HeadingIndicatorProps): ReactElement => (
+export const HeadingIndicator = ({ heading }: HeadingIndicatorProps) => (
   <SymbolLayer
     key="mapboxUserLocationHeadingIndicator"
     id="mapboxUserLocationHeadingIndicator"
@@ -26,5 +24,3 @@ const HeadingIndicator = ({ heading }: HeadingIndicatorProps): ReactElement => (
     }}
   />
 );
-
-export default HeadingIndicator;

package/src/components/HeatmapLayer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
   type BaseLayerProps,
   type NativeBaseProps,
+  useAbstractLayer,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type HeatmapLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type HeatmapLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNHeatmapLayer";
 
@@ -16,7 +16,7 @@ export interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: HeatmapLayerStyleProps;
+  style?: HeatmapLayerStyle;
 }
 
 interface NativeProps
@@ -28,8 +28,8 @@ const MLRNHeatmapLayer =
 /**
  * HeatmapLayer is a style layer that renders one or more filled circles on the map.
  */
-const HeatmapLayer: React.FC<HeatmapLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const HeatmapLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: HeatmapLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -42,5 +42,3 @@ const HeatmapLayer: React.FC<HeatmapLayerProps> = ({
 
   return <MLRNHeatmapLayer ref={setNativeLayer} {...baseProps} />;
 };
-
-export default HeatmapLayer;

package/src/components/ImageSource.tsx

@@ -1,7 +1,7 @@
-import { type ReactElement } from "react";
+import { type ReactNode } from "react";
 import { requireNativeComponent } from "react-native";
 
-import useAbstractSource from "../hooks/useAbstractSource";
+import { useAbstractSource } from "../hooks/useAbstractSource";
 import { type BaseProps } from "../types/BaseProps";
 import {
   cloneReactChildrenWithProps,
@@ -31,7 +31,7 @@ export interface ImageSourceProps extends BaseProps {
     GeoJSON.Position,
   ];
 
-  children?: ReactElement | ReactElement[];
+  children?: ReactNode;
 }
 
 type NativeProps = ImageSourceProps;
@@ -42,7 +42,7 @@ const MLRNImageSource = 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
  */
-const ImageSource: React.FC<ImageSourceProps> = (props: ImageSourceProps) => {
+export const ImageSource = (props: ImageSourceProps) => {
   const { setNativeRef } = useAbstractSource<NativeProps>();
 
   const _getURL = (): string | undefined => {
@@ -66,5 +66,3 @@ const ImageSource: React.FC<ImageSourceProps> = (props: ImageSourceProps) => {
     </MLRNImageSource>
   );
 };
-
-export default ImageSource;

package/src/components/Images.tsx

@@ -1,13 +1,12 @@
-import { type ReactElement } from "react";
+import { type ReactNode } from "react";
 import {
-  requireNativeComponent,
   Image,
-  type NativeSyntheticEvent,
   type ImageSourcePropType,
   type ImageURISource,
+  type NativeSyntheticEvent,
+  requireNativeComponent,
 } from "react-native";
 
-import { SHAPE_SOURCE_NATIVE_ASSETS_KEY } from "./ShapeSource";
 import { type BaseProps } from "../types/BaseProps";
 
 export const NATIVE_MODULE_NAME = "MLRNImages";
@@ -40,7 +39,7 @@ interface ImagesProps extends BaseProps {
   /**
    * Specifies the external images in key-value pairs required for the shape source.
    * 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'`
+   * with format `{uri: 'http://...'}` or `require('image.png')` or `import "image.png"`
    */
   images?: { [key: string]: ImageEntry };
   /**
@@ -56,19 +55,19 @@ interface ImagesProps extends BaseProps {
 
   id?: string;
 
-  children?: ReactElement;
+  children?: ReactNode;
 }
 
 /**
  * Images defines the images used in Symbol etc layers
  */
-const Images = ({
+export const Images = ({
   images,
   nativeAssetImages,
   onImageMissing,
   id,
   children,
-}: ImagesProps): ReactElement => {
+}: ImagesProps) => {
   const _getImages = (): {
     images?: { [key: string]: ImageEntry };
     nativeImages?: ImageEntry[];
@@ -84,15 +83,7 @@ const Images = ({
       const imageNames = Object.keys(images);
       for (const imageName of imageNames) {
         const value = images[imageName];
-        if (
-          imageName === SHAPE_SOURCE_NATIVE_ASSETS_KEY &&
-          Array.isArray(value)
-        ) {
-          console.warn(
-            `Use of ${SHAPE_SOURCE_NATIVE_ASSETS_KEY} in Images#images is deprecated please use Images#nativeAssetImages`,
-          );
-          nativeImages = value;
-        } else if (value && _isUrlOrPath(value)) {
+        if (value && _isUrlOrPath(value)) {
           imagesResult[imageName] = value;
         } else if (value && _isImageSourcePropType(value)) {
           const res = Image.resolveAssetSource(value);
@@ -132,5 +123,3 @@ const Images = ({
 };
 
 const MLRNImages = requireNativeComponent(NATIVE_MODULE_NAME);
-
-export default Images;

package/src/components/Light.tsx

@@ -1,11 +1,11 @@
-import React from "react";
 import { requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type LightLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type LightLayerStyle } from "../types/MapLibreRNStyles";
 import { type StyleValue } from "../utils/StyleValue";
 
 export const NATIVE_MODULE_NAME = "MLRNLight";
@@ -14,7 +14,7 @@ interface LightProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: LightLayerStyleProps;
+  style?: LightLayerStyle;
 }
 
 interface NativeProps extends Omit<LightProps, "style"> {
@@ -26,7 +26,7 @@ const MLRNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 /**
  * Light represents the light source for extruded geometries
  */
-const Light: React.FC<LightProps> = (props: LightProps) => {
+export const Light = (props: LightProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
     LightProps,
     NativeProps
@@ -36,5 +36,3 @@ const Light: React.FC<LightProps> = (props: LightProps) => {
 
   return <MLRNLight ref={setNativeLayer} testID="mlrnLight" {...baseProps} />;
 };
-
-export default Light;

package/src/components/LineLayer.tsx

@@ -1,14 +1,14 @@
-import React from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
   type NativeBaseProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
-import { type LineLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type LineLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNLineLayer";
 
@@ -16,7 +16,7 @@ export interface LineLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: LineLayerStyleProps;
+  style?: LineLayerStyle;
 }
 
 interface NativeProps extends Omit<LineLayerProps, "style">, NativeBaseProps {}
@@ -27,8 +27,8 @@ const MLRNLineLayer =
 /**
  * LineLayer is a style layer that renders one or more stroked polylines on the map.
  */
-const LineLayer: React.FC<LineLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const LineLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: LineLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -41,5 +41,3 @@ const LineLayer: React.FC<LineLayerProps> = ({
 
   return <MLRNLineLayer ref={setNativeLayer} {...baseProps} />;
 };
-
-export default LineLayer;