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

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 { type FilterExpression } from "../utils/MapLibreRNStyles";
+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",
   );
@@ -46,8 +46,6 @@ const styles = StyleSheet.create({
   matchParent: { flex: 1 },
 });
 
-const defaultStyleURL = MapLibreRN.StyleURL.Street;
-
 export interface RegionPayload {
   zoomLevel: number;
   heading: number;
@@ -69,13 +67,9 @@ interface MapViewProps extends BaseProps {
    */
   style?: ViewProps["style"];
   /**
-   * Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Default`
-   */
-  styleURL?: string;
-  /**
-   * StyleJSON for map - according to TileJSON specs: https://github.com/mapbox/tilejson-spec
+   * Style for map - either a URL or a Style JSON (https://maplibre.org/maplibre-style-spec/). Default: `StyleURL.Default`
    */
-  styleJSON?: string;
+  mapStyle?: string | object;
   /**
    * iOS: The preferred frame rate at which the map view is rendered.
    * The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,
@@ -165,7 +159,7 @@ interface MapViewProps extends BaseProps {
   /**
    * This event is triggered whenever the currently displayed map region is about to change.
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionWillChange?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
@@ -173,7 +167,7 @@ interface MapViewProps extends BaseProps {
   /**
    * This event is triggered whenever the currently displayed map region is changing.
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionIsChanging?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
@@ -181,7 +175,7 @@ interface MapViewProps extends BaseProps {
   /**
    * This event is triggered whenever the currently displayed map region finished changing
    *
-   * @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
+   * @param {GeoJSON.Feature<GeoJSON.Point, RegionPayload>} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds
    */
   onRegionDidChange?(
     feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
@@ -250,13 +244,18 @@ type CallableProps = {
 }[keyof MapViewProps];
 
 interface NativeProps extends Omit<MapViewProps, "onPress" | "onLongPress"> {
+  mapStyle?: string;
   onPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
   onLongPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
 }
 
 export interface MapViewRef {
-  getPointInView: (coordinate: GeoJSON.Position) => Promise<GeoJSON.Point>;
-  getCoordinateFromView: (point: number[]) => Promise<GeoJSON.Position>;
+  getPointInView: (
+    coordinate: GeoJSON.Position,
+  ) => Promise<[x: number, y: number]>;
+  getCoordinateFromView: (
+    point: [x: number, y: number],
+  ) => Promise<GeoJSON.Position>;
   getVisibleBounds: () => Promise<VisibleBounds>;
   queryRenderedFeaturesAtPoint: (
     point: [screenPointX: number, screenPointY: number],
@@ -268,7 +267,6 @@ export interface MapViewRef {
     filter: FilterExpression | undefined,
     layerIDs: string[],
   ) => Promise<GeoJSON.FeatureCollection>;
-  setCamera: () => void;
   takeSnap: (writeToDisk?: boolean) => Promise<string>;
   getZoom: () => Promise<number>;
   getCenter: () => Promise<GeoJSON.Position>;
@@ -284,7 +282,7 @@ export interface MapViewRef {
 /**
  * MapView backed by MapLibre Native
  */
-const MapView = memo(
+export const MapView = memo(
   forwardRef<MapViewRef, MapViewProps>(
     (
       {
@@ -306,23 +304,23 @@ const MapView = memo(
         ref,
         (): MapViewRef => ({
           /**
-           * Converts a geographic coordinate to a point in the given view’s coordinate system.
+           * Converts a geographic coordinate to a pixel point of the view.
            *
            * @example
-           * const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);
+           * const pointInView = await mapViewRef.current?.getPointInView([-37.817070, 144.949901]);
            *
-           * @param {Array<Number>} coordinate - A point expressed in the map view's coordinate system.
-           * @return {Array}
+           * @param {GeoJSON.Position} coordinate Geographic coordinate
+           * @return {[x: number, y: number]} Pixel point
            */
           getPointInView,
           /**
-           * Converts a point in the given view’s coordinate system to a geographic coordinate.
+           * Converts a pixel point of the view to a geographic coordinate.
            *
            * @example
-           * const coordinate = await this._map.getCoordinateFromView([100, 100]);
+           * const coordinate = await mapViewRef.current?.getCoordinateFromView([100, 100]);
            *
-           * @param {Array<Number>} point - A point expressed in the given view’s coordinate system.
-           * @return {Array}
+           * @param {[x: number, y: number]} point Pixel point
+           * @return {GeoJSON.Position} Geographic coordinate
            */
           getCoordinateFromView,
           /**
@@ -340,7 +338,7 @@ const MapView = memo(
            * @example
            * this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])
            *
-           * @param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.
+           * @param  {number[]} coordinate - A point expressed in the map view’s coordinate system.
            * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
            * @param  {Array=} layerIDs - A array of layer id's to filter the features by
            * @return {GeoJSON.FeatureCollection}
@@ -353,20 +351,16 @@ const MapView = memo(
            * @example
            * this._map.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2'])
            *
-           * @param  {Array<Number>} bbox - A rectangle expressed in the map view’s coordinate system.
+           * @param  {number[]} bbox - A rectangle expressed in the map view’s coordinate system.
            * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
            * @param  {Array=} layerIDs -  A array of layer id's to filter the features by
            * @return {GeoJSON.FeatureCollection}
            */
           queryRenderedFeaturesInRect,
-          /**
-           * Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.
-           */
-          setCamera,
           /**
            * Takes snapshot of map with current tiles and returns a URI to the image
-           * @param  {Boolean} writeToDisk If true will create a temp file, otherwise it is in base64
-           * @return {String}
+           * @param  {boolean} writeToDisk If true will create a temp file, otherwise it is in base64
+           * @return {string}
            */
           takeSnap,
           /**
@@ -375,7 +369,7 @@ const MapView = memo(
            * @example
            * const zoom = await this._map.getZoom();
            *
-           * @return {Number}
+           * @return {number}
            */
           getZoom,
           /**
@@ -384,7 +378,7 @@ const MapView = memo(
            * @example
            * const center = await this._map.getCenter();
            *
-           * @return {Array<Number>} Coordinates
+           * @return {number[]} Coordinates
            */
           getCenter,
           /**
@@ -394,8 +388,8 @@ const MapView = memo(
            * await this._map.setSourceVisibility(false, 'composite', 'building')
            *
            * @param {boolean} visible - Visibility of the layers
-           * @param {String} sourceId - Identifier of the target source (e.g. 'composite')
-           * @param {String=} sourceLayerId - Identifier of the target source-layer (e.g. 'building')
+           * @param {string} sourceId - Identifier of the target source (e.g. 'composite')
+           * @param {string=} sourceLayerId - Identifier of the target source-layer (e.g. 'building')
            */
           setSourceVisibility,
           /**
@@ -443,46 +437,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(
@@ -495,22 +489,23 @@ const MapView = memo(
 
       const getPointInView = async (
         coordinate: GeoJSON.Position,
-      ): Promise<GeoJSON.Point> => {
-        const res: { pointInView: GeoJSON.Point } = await _runNativeCommand(
-          "getPointInView",
-          _nativeRef.current,
-          [coordinate],
-        );
+      ): Promise<[x: number, y: number]> => {
+        const res: { pointInView: [x: number, y: number] } =
+          await _runNativeCommand("getPointInView", _nativeRef.current, [
+            coordinate,
+          ]);
+
         return res.pointInView;
       };
 
       const getCoordinateFromView = async (
-        point: number[],
+        point: [x: number, y: number],
       ): Promise<GeoJSON.Position> => {
         const res: { coordinateFromView: GeoJSON.Position } =
           await _runNativeCommand("getCoordinateFromView", _nativeRef.current, [
             point,
           ]);
+
         return res.coordinateFromView;
       };
 
@@ -571,12 +566,6 @@ const MapView = memo(
         return res.data as GeoJSON.FeatureCollection;
       };
 
-      const setCamera = (): void => {
-        console.warn(
-          "MapView.setCamera is deprecated - please use Camera#setCamera",
-        );
-      };
-
       const takeSnap = async (writeToDisk = false): Promise<string> => {
         const res: { uri: string } = await _runNativeCommand(
           "takeSnap",
@@ -672,7 +661,7 @@ const MapView = memo(
         let propName: CallableProps | undefined;
 
         switch (type) {
-          case MapLibreRN.EventTypes.RegionWillChange:
+          case MLRNModule.EventTypes.RegionWillChange:
             if (
               regionWillChangeDebounceTime &&
               regionWillChangeDebounceTime > 0
@@ -686,10 +675,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
@@ -703,37 +692,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:
@@ -782,27 +771,20 @@ const MapView = memo(
         }
       };
 
-      const _setStyleURL = (props: MapViewProps): void => {
-        // user set a styleURL, no need to alter props
-        if (props.styleURL) {
-          return;
-        }
-
-        // user set styleJSON pass it to styleURL
-        if (props.styleJSON && !props.styleURL) {
-          props.styleURL = props.styleJSON;
-        }
-
-        // user neither set styleJSON nor styleURL
-        // set defaultStyleUrl
-        if (!props.styleJSON || !props.styleURL) {
-          props.styleURL = defaultStyleURL;
+      const nativeProps = useMemo(() => {
+        const { mapStyle, ...otherProps } = props;
+
+        let nativeMapStyle = undefined;
+        if (mapStyle) {
+          if (typeof mapStyle === "string") {
+            nativeMapStyle = mapStyle;
+          } else if (typeof mapStyle === "object") {
+            nativeMapStyle = JSON.stringify(mapStyle);
+          }
         }
-      };
 
-      const nativeProps = useMemo(() => {
         return {
-          ...props,
+          ...otherProps,
           localizeLabels,
           scrollEnabled,
           pitchEnabled,
@@ -812,10 +794,12 @@ const MapView = memo(
           surfaceView,
           regionWillChangeDebounceTime,
           regionDidChangeDebounceTime,
+          mapStyle: nativeMapStyle,
           contentInset: contentInsetValue,
           style: styles.matchParent,
         };
       }, [
+        props,
         localizeLabels,
         scrollEnabled,
         pitchEnabled,
@@ -825,12 +809,9 @@ const MapView = memo(
         surfaceView,
         regionWillChangeDebounceTime,
         regionDidChangeDebounceTime,
-        props,
         contentInsetValue,
       ]);
 
-      _setStyleURL(nativeProps);
-
       const callbacks = {
         ref: (ref: MLRNMapViewRefType): void => _setNativeRef(ref),
         onPress: _onPress,
@@ -876,4 +857,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";
@@ -50,7 +50,6 @@ export interface PointAnnotationProps {
   snippet?: string;
   /**
    * Manually selects/deselects annotation
-   * @type {[type]}
    */
   selected?: boolean;
   /**
@@ -102,7 +101,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"];
 }
@@ -118,14 +117,16 @@ export interface PointAnnotationRef {
 /**
  * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
  *
- * Consider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,
- * they'll offer much better performance
+ * Consider using ShapeSource and SymbolLayer instead, if you have many points, and you have static images,
+ * they'll offer much better performance.
  *
- * .
- * If you need interctive views please use MarkerView,
+ * If you need interactive 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 +134,7 @@ const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
       ...props
     }: PointAnnotationProps,
     ref,
-  ): ReactElement => {
+  ) => {
     useImperativeHandle(
       ref,
       (): PointAnnotationRef => ({
@@ -241,5 +242,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 RasterLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type RasterLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNRasterLayer";
 
@@ -16,7 +16,7 @@ export interface RasterLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: RasterLayerStyleProps;
+  style?: RasterLayerStyle;
 }
 
 interface NativeProps
@@ -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;