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

package/src/MapLibreRN.ts

@@ -1,6 +1,6 @@
 export * from "./MLRNModule";
 export {
-  default as Camera,
+  Camera,
   UserTrackingMode,
   type CameraPadding,
   type CameraAnimationMode,
@@ -8,53 +8,69 @@ export {
   type CameraRef,
 } from "./components/Camera";
 export {
-  default as MapView,
+  MapView,
   type MapViewRef,
   type RegionPayload,
 } from "./components/MapView";
-export { default as Light } from "./components/Light";
-export { default as PointAnnotation } from "./components/PointAnnotation";
+export { Light } from "./components/Light";
+export { PointAnnotation } from "./components/PointAnnotation";
 export type { PointAnnotationRef } from "./components/PointAnnotation";
-export { default as Annotation } from "./components/Annotation";
-export { default as Callout } from "./components/Callout";
+export { Annotation } from "./components/Annotation";
+export { Callout } from "./components/Callout";
 export { requestAndroidLocationPermissions } from "./requestAndroidLocationPermissions";
 export {
-  default as UserLocation,
+  UserLocation,
   UserLocationRenderMode,
 } from "./components/UserLocation";
 export type { UserLocationRef } from "./components/UserLocation";
-export { default as VectorSource } from "./components/VectorSource";
-export { default as ShapeSource } from "./components/ShapeSource";
+export { VectorSource } from "./components/VectorSource";
+export { ShapeSource } from "./components/ShapeSource";
 export type { ShapeSourceRef } from "./components/ShapeSource";
-export { default as RasterSource } from "./components/RasterSource";
-export { default as ImageSource } from "./components/ImageSource";
-export { default as Images } from "./components/Images";
-export { default as FillLayer } from "./components/FillLayer";
-export { default as FillExtrusionLayer } from "./components/FillExtrusionLayer";
-export { default as HeatmapLayer } from "./components/HeatmapLayer";
-export { default as LineLayer } from "./components/LineLayer";
-export { default as CircleLayer } from "./components/CircleLayer";
-export { default as SymbolLayer } from "./components/SymbolLayer";
-export { default as RasterLayer } from "./components/RasterLayer";
-export { default as BackgroundLayer } from "./components/BackgroundLayer";
-export { default as MarkerView } from "./components/MarkerView";
+export { RasterSource } from "./components/RasterSource";
+export { ImageSource } from "./components/ImageSource";
+export { Images } from "./components/Images";
+export { FillLayer } from "./components/FillLayer";
+export { FillExtrusionLayer } from "./components/FillExtrusionLayer";
+export { HeatmapLayer } from "./components/HeatmapLayer";
+export { LineLayer } from "./components/LineLayer";
+export { CircleLayer } from "./components/CircleLayer";
+export { SymbolLayer } from "./components/SymbolLayer";
+export { RasterLayer } from "./components/RasterLayer";
+export { BackgroundLayer } from "./components/BackgroundLayer";
+export { MarkerView } from "./components/MarkerView";
 
 export {
-  default as locationManager,
+  LocationManager,
+  /**
+   * @deprecated Use LocationManager instead
+   */
+  LocationManager as locationManager,
   type Location,
-} from "./modules/location/locationManager";
-export { default as offlineManager } from "./modules/offline/offlineManager";
-export type { OfflinePackError } from "./modules/offline/offlineManager";
+} from "./modules/location/LocationManager";
+export {
+  OfflineManager,
+  /**
+   * @deprecated Use OfflineManager instead
+   */
+  OfflineManager as offlineManager,
+} from "./modules/offline/OfflineManager";
+export type { OfflinePackError } from "./modules/offline/OfflineManager";
 export type { OfflinePackStatus } from "./modules/offline/OfflinePack";
-export { default as OfflinePack } from "./modules/offline/OfflinePack";
-export { default as OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions";
-export { default as snapshotManager } from "./modules/snapshot/snapshotManager";
+export { OfflinePack } from "./modules/offline/OfflinePack";
+export { OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions";
+export {
+  SnapshotManager,
+  /**
+   * @deprecated Use SnapshotManager instead
+   */
+  SnapshotManager as snapshotManager,
+} from "./modules/snapshot/SnapshotManager";
 export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions";
 
 export type { MapLibreRNEvent } from "./types/MapLibreRNEvent";
 
-export { default as Animated } from "./utils/animated/Animated";
-export { default as Logger, type LogLevel } from "./utils/Logger";
+export { Animated } from "./utils/animated/Animated";
+export { Logger, type LogLevel } from "./utils/Logger";
 export type {
   FillLayerStyle,
   LineLayerStyle,

package/src/components/Annotation.tsx

@@ -1,6 +1,6 @@
 import {
   forwardRef,
-  type ReactElement,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -8,11 +8,11 @@ import {
 } from "react";
 import { Animated as RNAnimated, Easing } from "react-native";
 
-import SymbolLayer from "./SymbolLayer";
+import { SymbolLayer } from "./SymbolLayer";
 import { type SymbolLayerStyle } from "../types/MapLibreRNStyles";
 import { type OnPressEvent } from "../types/OnPressEvent";
 import { AnimatedShapeSource } from "../utils/animated/Animated";
-import AnimatedMapPoint from "../utils/animated/AnimatedPoint";
+import { AnimatedPoint } from "../utils/animated/AnimatedPoint";
 
 interface AnnotationProps {
   id: string;
@@ -21,12 +21,12 @@ interface AnnotationProps {
   animationEasingFunction?(x: number): number;
   coordinates?: number[];
   onPress?(event: OnPressEvent): void;
-  children?: ReactElement | ReactElement[];
+  children?: ReactNode;
   style?: object;
   icon?: string | number | object;
 }
 
-type Shape = AnimatedMapPoint | GeoJSON.Point;
+type Shape = AnimatedPoint | GeoJSON.Point;
 
 function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
   const lng = props.coordinates?.[0] || 0;
@@ -34,14 +34,14 @@ function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
   const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] };
 
   if (props.animated) {
-    return new AnimatedMapPoint(point);
+    return new AnimatedPoint(point);
   }
 
   return point;
 }
 
-function isShapeAnimated(shape: Shape): shape is AnimatedMapPoint {
-  return shape instanceof AnimatedMapPoint;
+function isShapeAnimated(shape: Shape): shape is AnimatedPoint {
+  return shape instanceof AnimatedPoint;
 }
 
 interface AnnotationRef {
@@ -49,7 +49,7 @@ interface AnnotationRef {
   symbolStyle: SymbolLayerStyle | undefined;
 }
 
-const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
+export const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
   (
     {
       animated = false,
@@ -160,5 +160,3 @@ const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
 );
 
 Annotation.displayName = "Annotation";
-
-export default Annotation;

package/src/components/BackgroundLayer.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 BackgroundLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNBackgroundLayer";
 
@@ -26,8 +26,8 @@ interface NativeProps
 const MLRNBackgroundLayer =
   requireNativeComponent<BackgroundLayerProps>(NATIVE_MODULE_NAME);
 
-const BackgroundLayer: React.FC<BackgroundLayerProps> = ({
-  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+export const BackgroundLayer = ({
+  sourceID = MLRNModule.StyleSource.DefaultSourceID,
   ...props
 }: BackgroundLayerProps) => {
   const { baseProps, setNativeLayer } = useAbstractLayer<
@@ -46,5 +46,3 @@ const BackgroundLayer: React.FC<BackgroundLayerProps> = ({
     />
   );
 };
-
-export default BackgroundLayer;

package/src/components/Callout.tsx

@@ -1,13 +1,13 @@
-import { Children, type ReactElement } from "react";
+import { Children } from "react";
 import {
-  View,
-  Text,
   Animated,
   requireNativeComponent,
+  type StyleProp,
   StyleSheet,
-  type ViewStyle,
+  Text,
+  View,
   type ViewProps,
-  type StyleProp,
+  type ViewStyle,
 } from "react-native";
 
 export const NATIVE_MODULE_NAME = "MLRNCallout";
@@ -82,7 +82,7 @@ interface NativeProps extends Omit<CalloutProps, "style"> {
 /**
  *  Callout that displays information about a selected annotation near the annotation.
  */
-const Callout = (props: CalloutProps): ReactElement => {
+export const Callout = (props: CalloutProps) => {
   const {
     title,
     style,
@@ -104,7 +104,7 @@ const Callout = (props: CalloutProps): ReactElement => {
 
   const _hasChildren = Children.count(children) > 0;
 
-  const _renderDefaultCallout = (): ReactElement => {
+  const _renderDefaultCallout = () => {
     return (
       <Animated.View testID="container" style={[styles.container, style]}>
         <View testID="wrapper" style={[styles.content, contentStyle]}>
@@ -117,7 +117,7 @@ const Callout = (props: CalloutProps): ReactElement => {
     );
   };
 
-  const _renderCustomCallout = (): ReactElement => {
+  const _renderCustomCallout = () => {
     return (
       <Animated.View testID="container" {...props} style={style}>
         {children}
@@ -137,5 +137,3 @@ const Callout = (props: CalloutProps): ReactElement => {
 };
 
 const MLRNCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-export default Callout;

package/src/components/Camera.tsx

@@ -6,7 +6,7 @@ import { CameraModes } from "../MLRNModule";
 import { useNativeRef } from "../hooks/useNativeRef";
 import { type BaseProps } from "../types/BaseProps";
 import { CameraMode } from "../types/CameraMode";
-import type { MapLibreRNEvent } from "../types/MapLibreRNEvent";
+import { type MapLibreRNEvent } from "../types/MapLibreRNEvent";
 import { makeNativeBounds } from "../utils/makeNativeBounds";
 
 export const NATIVE_MODULE_NAME = "MLRNCamera";
@@ -211,7 +211,7 @@ export interface CameraProps extends BaseProps, CameraStop {
   followUserLocation?: boolean;
 
   /**
-   * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapLibreGL.UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js)
+   * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `UserTrackingMode` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingMode.js)
    */
   followUserMode?: UserTrackingMode;
 
@@ -244,7 +244,7 @@ export interface NativeCameraProps
   defaultStop?: NativeCameraStop;
 }
 
-const Camera = memo(
+export const Camera = memo(
   forwardRef<CameraRef, CameraProps>(
     (
       {
@@ -488,5 +488,3 @@ const Camera = memo(
 
 const MLRNCamera =
   requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
-
-export default Camera;

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 CircleLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNCircleLayer";
 
@@ -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 FillExtrusionLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNFillExtrusionLayer";
 
@@ -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 FillLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNFillLayer";
 
@@ -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 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;