@maplibre/maplibre-react-native 10.0.0-beta.12 → 10.0.0-beta.13

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 HeatmapLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNHeatmapLayer";
 
@@ -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,10 +1,10 @@
-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 { type BaseProps } from "../types/BaseProps";
@@ -55,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[];
@@ -123,5 +123,3 @@ const Images = ({
 };
 
 const MLRNImages = requireNativeComponent(NATIVE_MODULE_NAME);
-
-export default Images;

package/src/components/Light.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { requireNativeComponent } from "react-native";
 
-import useAbstractLayer, {
+import {
+  useAbstractLayer,
   type BaseLayerProps,
 } from "../hooks/useAbstractLayer";
 import { type BaseProps } from "../types/BaseProps";
@@ -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 LineLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNLineLayer";
 
@@ -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;

package/src/components/MapView.tsx

@@ -22,17 +22,17 @@ import {
   type NativeSyntheticEvent,
 } from "react-native";
 
-import useNativeBridge from "../hooks/useNativeBridge";
-import useOnce from "../hooks/useOnce";
-import { type Location } from "../modules/location/locationManager";
+import { useNativeBridge } from "../hooks/useNativeBridge";
+import { useOnce } from "../hooks/useOnce";
+import { type Location } from "../modules/location/LocationManager";
 import { type BaseProps } from "../types/BaseProps";
 import { type FilterExpression } from "../types/MapLibreRNStyles";
 import { isFunction, isAndroid } from "../utils";
-import Logger from "../utils/Logger";
+import { Logger } from "../utils/Logger";
 import { getFilter } from "../utils/filterUtils";
 
-const MapLibreRN = NativeModules.MLRNModule;
-if (MapLibreRN == null) {
+const MLRNModule = NativeModules.MLRNModule;
+if (MLRNModule == null) {
   console.error(
     "Native module of @maplibre/maplibre-react-native library was not registered properly, please consult the docs: https://github.com/maplibre/maplibre-react-native",
   );
@@ -67,7 +67,7 @@ interface MapViewProps extends BaseProps {
    */
   style?: ViewProps["style"];
   /**
-   * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `MapLibreRN.StyleURL.Default`
+   * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `StyleURL.Default`
    */
   mapStyle?: string | object;
   /**
@@ -278,7 +278,7 @@ export interface MapViewRef {
 /**
  * MapView backed by MapLibre Native
  */
-const MapView = memo(
+export const MapView = memo(
   forwardRef<MapViewRef, MapViewProps>(
     (
       {
@@ -433,46 +433,46 @@ const MapView = memo(
           const events = [];
 
           if (props.onRegionWillChange) {
-            events.push(MapLibreRN.EventTypes.RegionWillChange);
+            events.push(MLRNModule.EventTypes.RegionWillChange);
           }
           if (props.onRegionIsChanging) {
-            events.push(MapLibreRN.EventTypes.RegionIsChanging);
+            events.push(MLRNModule.EventTypes.RegionIsChanging);
           }
           if (props.onRegionDidChange) {
-            events.push(MapLibreRN.EventTypes.RegionDidChange);
+            events.push(MLRNModule.EventTypes.RegionDidChange);
           }
           if (props.onUserLocationUpdate) {
-            events.push(MapLibreRN.EventTypes.UserLocationUpdated);
+            events.push(MLRNModule.EventTypes.UserLocationUpdated);
           }
           if (props.onWillStartLoadingMap) {
-            events.push(MapLibreRN.EventTypes.WillStartLoadingMap);
+            events.push(MLRNModule.EventTypes.WillStartLoadingMap);
           }
           if (props.onDidFinishLoadingMap) {
-            events.push(MapLibreRN.EventTypes.DidFinishLoadingMap);
+            events.push(MLRNModule.EventTypes.DidFinishLoadingMap);
           }
           if (props.onDidFailLoadingMap) {
-            events.push(MapLibreRN.EventTypes.DidFailLoadingMap);
+            events.push(MLRNModule.EventTypes.DidFailLoadingMap);
           }
           if (props.onWillStartRenderingFrame) {
-            events.push(MapLibreRN.EventTypes.WillStartRenderingFrame);
+            events.push(MLRNModule.EventTypes.WillStartRenderingFrame);
           }
           if (props.onDidFinishRenderingFrame) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingFrame);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingFrame);
           }
           if (props.onDidFinishRenderingFrameFully) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingFrameFully);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingFrameFully);
           }
           if (props.onWillStartRenderingMap) {
-            events.push(MapLibreRN.EventTypes.WillStartRenderingMap);
+            events.push(MLRNModule.EventTypes.WillStartRenderingMap);
           }
           if (props.onDidFinishRenderingMap) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingMap);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingMap);
           }
           if (props.onDidFinishRenderingMapFully) {
-            events.push(MapLibreRN.EventTypes.DidFinishRenderingMapFully);
+            events.push(MLRNModule.EventTypes.DidFinishRenderingMapFully);
           }
           if (props.onDidFinishLoadingStyle) {
-            events.push(MapLibreRN.EventTypes.DidFinishLoadingStyle);
+            events.push(MLRNModule.EventTypes.DidFinishLoadingStyle);
           }
 
           _runNativeCommand(
@@ -656,7 +656,7 @@ const MapView = memo(
         let propName: CallableProps | undefined;
 
         switch (type) {
-          case MapLibreRN.EventTypes.RegionWillChange:
+          case MLRNModule.EventTypes.RegionWillChange:
             if (
               regionWillChangeDebounceTime &&
               regionWillChangeDebounceTime > 0
@@ -670,10 +670,10 @@ const MapView = memo(
               propName = "onRegionWillChange";
             }
             break;
-          case MapLibreRN.EventTypes.RegionIsChanging:
+          case MLRNModule.EventTypes.RegionIsChanging:
             propName = "onRegionIsChanging";
             break;
-          case MapLibreRN.EventTypes.RegionDidChange:
+          case MLRNModule.EventTypes.RegionDidChange:
             if (
               regionDidChangeDebounceTime &&
               regionDidChangeDebounceTime > 0
@@ -687,37 +687,37 @@ const MapView = memo(
               propName = "onRegionDidChange";
             }
             break;
-          case MapLibreRN.EventTypes.UserLocationUpdated:
+          case MLRNModule.EventTypes.UserLocationUpdated:
             propName = "onUserLocationUpdate";
             break;
-          case MapLibreRN.EventTypes.WillStartLoadingMap:
+          case MLRNModule.EventTypes.WillStartLoadingMap:
             propName = "onWillStartLoadingMap";
             break;
-          case MapLibreRN.EventTypes.DidFinishLoadingMap:
+          case MLRNModule.EventTypes.DidFinishLoadingMap:
             propName = "onDidFinishLoadingMap";
             break;
-          case MapLibreRN.EventTypes.DidFailLoadingMap:
+          case MLRNModule.EventTypes.DidFailLoadingMap:
             propName = "onDidFailLoadingMap";
             break;
-          case MapLibreRN.EventTypes.WillStartRenderingFrame:
+          case MLRNModule.EventTypes.WillStartRenderingFrame:
             propName = "onWillStartRenderingFrame";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingFrame:
+          case MLRNModule.EventTypes.DidFinishRenderingFrame:
             propName = "onDidFinishRenderingFrame";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingFrameFully:
+          case MLRNModule.EventTypes.DidFinishRenderingFrameFully:
             propName = "onDidFinishRenderingFrameFully";
             break;
-          case MapLibreRN.EventTypes.WillStartRenderingMap:
+          case MLRNModule.EventTypes.WillStartRenderingMap:
             propName = "onWillStartRenderingMap";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingMap:
+          case MLRNModule.EventTypes.DidFinishRenderingMap:
             propName = "onDidFinishRenderingMap";
             break;
-          case MapLibreRN.EventTypes.DidFinishRenderingMapFully:
+          case MLRNModule.EventTypes.DidFinishRenderingMapFully:
             propName = "onDidFinishRenderingMapFully";
             break;
-          case MapLibreRN.EventTypes.DidFinishLoadingStyle:
+          case MLRNModule.EventTypes.DidFinishLoadingStyle:
             propName = "onDidFinishLoadingStyle";
             break;
           default:
@@ -852,4 +852,3 @@ if (isAndroid()) {
     ANDROID_TEXTURE_NATIVE_MODULE_NAME,
   );
 }
-export default MapView;

package/src/components/MarkerView.tsx

@@ -2,7 +2,7 @@ import { point } from "@turf/helpers";
 import { type ReactElement, useMemo } from "react";
 import { Platform, requireNativeComponent, type ViewProps } from "react-native";
 
-import PointAnnotation from "./PointAnnotation";
+import { PointAnnotation } from "./PointAnnotation";
 import { toJSONString } from "../utils";
 
 export const NATIVE_MODULE_NAME = "MLRNMarkerView";
@@ -35,7 +35,7 @@ interface MarkerViewProps extends ViewProps {
   /**
    * Expects one child - can be container with multiple elements
    */
-  children: React.ReactElement;
+  children: ReactElement;
 }
 
 interface NativeProps extends ViewProps {
@@ -53,12 +53,12 @@ interface NativeProps extends ViewProps {
  * This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android
  * and PointAnnotation on iOS.
  */
-const MarkerView = ({
+export const MarkerView = ({
   anchor = { x: 0.5, y: 0.5 },
   allowOverlap = false,
   isSelected = false,
   ...rest
-}: MarkerViewProps): ReactElement => {
+}: MarkerViewProps) => {
   const props = { anchor, allowOverlap, isSelected, ...rest };
   const coordinate = props.coordinate
     ? toJSONString(point(props.coordinate))
@@ -84,5 +84,3 @@ const MarkerView = ({
 let lastId = 0;
 
 const MLRNMarkerView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default MarkerView;

package/src/components/NativeUserLocation.tsx

@@ -1,4 +1,3 @@
-import { type ReactElement } from "react";
 import { requireNativeComponent } from "react-native";
 
 const NATIVE_MODULE_NAME = "MLRNNativeUserLocation";
@@ -26,10 +25,8 @@ interface NativeUserLocationProps {
   androidPreferredFramesPerSecond?: number;
 }
 
-const NativeUserLocation = (props: NativeUserLocationProps): ReactElement => {
+export const NativeUserLocation = (props: NativeUserLocationProps) => {
   return <MLRNNativeUserLocation {...props} />;
 };
 
 const MLRNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
-
-export default NativeUserLocation;

package/src/components/PointAnnotation.tsx

@@ -14,7 +14,7 @@ import {
   requireNativeComponent,
 } from "react-native";
 
-import useNativeBridge, { type RNMLEvent } from "../hooks/useNativeBridge";
+import { useNativeBridge, type RNMLEvent } from "../hooks/useNativeBridge";
 import { isFunction, toJSONString } from "../utils";
 
 export const NATIVE_MODULE_NAME = "MLRNPointAnnotation";
@@ -102,7 +102,7 @@ export interface PointAnnotationProps {
   /**
    * Expects one child, and an optional callout can be added as well
    */
-  children: React.ReactElement | [React.ReactElement, React.ReactElement];
+  children: ReactElement | [ReactElement, ReactElement];
 
   style?: ViewProps["style"];
 }
@@ -125,7 +125,10 @@ export interface PointAnnotationRef {
  * If you need interctive views please use MarkerView,
  * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
  */
-const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
+export const PointAnnotation = forwardRef<
+  PointAnnotationRef,
+  PointAnnotationProps
+>(
   (
     {
       anchor = { x: 0.5, y: 0.5 },
@@ -133,7 +136,7 @@ const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
       ...props
     }: PointAnnotationProps,
     ref,
-  ): ReactElement => {
+  ) => {
     useImperativeHandle(
       ref,
       (): PointAnnotationRef => ({
@@ -241,5 +244,3 @@ PointAnnotation.displayName = "PointAnnotation";
 
 const MLRNPointAnnotation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default PointAnnotation;

package/src/components/RasterLayer.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 RasterLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNRasterLayer";
 
@@ -25,8 +25,8 @@ interface NativeProps
 
 const MLRNRasterLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
-const RasterLayer: React.FC<RasterLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const RasterLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: RasterLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -39,5 +39,3 @@ const RasterLayer: React.FC<RasterLayerProps> = ({
 
   return <MLRNRasterLayer ref={setNativeLayer} {...baseProps} />;
 };
-
-export default RasterLayer;

package/src/components/RasterSource.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import { type ReactNode } from "react";
 import { NativeModules, requireNativeComponent } from "react-native";
 
-import useAbstractSource from "../hooks/useAbstractSource";
-import useOnce from "../hooks/useOnce";
+import { useAbstractSource } from "../hooks/useAbstractSource";
+import { useOnce } from "../hooks/useOnce";
 import { type BaseProps } from "../types/BaseProps";
 import { cloneReactChildrenWithProps } from "../utils";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNRasterSource";
 
@@ -55,7 +55,7 @@ interface RasterSourceProps extends BaseProps {
    */
   attribution?: string;
 
-  children?: React.ReactElement | React.ReactElement[];
+  children?: ReactNode;
 }
 
 type NativeProps = RasterSourceProps;
@@ -68,8 +68,8 @@ const MLRNRasterSource =
  * The location of and metadata about the tiles are defined either by an option dictionary
  * or by an external file that conforms to the TileJSON specification.
  */
-const RasterSource: React.FC<RasterSourceProps> = ({
-  id = MapLibreRN.StyleSource.DefaultSourceID,
+export const RasterSource = ({
+  id = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: RasterSourceProps) => {
   useOnce(() => {
@@ -110,5 +110,3 @@ const RasterSource: React.FC<RasterSourceProps> = ({
     </MLRNRasterSource>
   );
 };
-
-export default RasterSource;

package/src/components/ShapeSource.tsx

@@ -1,8 +1,8 @@
 import {
   Component,
-  type ReactElement,
   forwardRef,
   memo,
+  type ReactNode,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -13,7 +13,7 @@ import {
   requireNativeComponent,
 } from "react-native";
 
-import useNativeBridge from "../hooks/useNativeBridge";
+import { useNativeBridge } from "../hooks/useNativeBridge";
 import { type BaseProps } from "../types/BaseProps";
 import {
   type ExpressionField,
@@ -28,7 +28,7 @@ import {
 } from "../utils";
 import { getFilter } from "../utils/filterUtils";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 export const NATIVE_MODULE_NAME = "MLRNShapeSource";
 
 interface NativeProps {
@@ -133,7 +133,7 @@ export interface ShapeSourceProps extends BaseProps {
     height: number;
   };
 
-  children?: ReactElement | ReactElement[];
+  children?: ReactNode;
 }
 
 export interface ShapeSourceRef {
@@ -158,11 +158,11 @@ export interface ShapeSourceRef {
  * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
  * The shape may be a url or a GeoJSON object
  */
-const ShapeSource = memo(
+export const ShapeSource = memo(
   forwardRef<ShapeSourceRef, ShapeSourceProps>(
     (
       {
-        id: shapeId = MapLibreRN.StyleSource.DefaultSourceID,
+        id: shapeId = MLRNModule.StyleSource.DefaultSourceID,
         ...props
       }: ShapeSourceProps,
       ref,
@@ -364,5 +364,3 @@ const ShapeSource = memo(
 );
 
 const MLRNShapeSource = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default ShapeSource;

package/src/components/SymbolLayer.tsx

@@ -1,13 +1,14 @@
 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 SymbolLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNSymbolLayer";
 
@@ -27,8 +28,8 @@ const MLRNSymbolLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
-const SymbolLayer: React.FC<SymbolLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const SymbolLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: SymbolLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -45,5 +46,3 @@ const SymbolLayer: React.FC<SymbolLayerProps> = ({
 
   return <MLRNSymbolLayer ref={setNativeLayer} {...updatedProps} />;
 };
-
-export default SymbolLayer;