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

package/src/MapLibreRN.ts

@@ -1,70 +1,87 @@
-import { UserTrackingMode } from "./components/Camera";
-
 export * from "./MLRNModule";
 export {
-  default as Camera,
+  Camera,
   UserTrackingMode,
   type CameraPadding,
   type CameraAnimationMode,
   type CameraBounds,
   type CameraRef,
 } from "./components/Camera";
-export { default as MapView, type MapViewRef } from "./components/MapView";
-export { default as Light } from "./components/Light";
-export { default as PointAnnotation } from "./components/PointAnnotation";
+export {
+  MapView,
+  type MapViewRef,
+  type RegionPayload,
+} from "./components/MapView";
+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 { 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 {
-  OfflineProgressStatus,
-  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 { default as MarkerView } from "./components/MarkerView";
-export { default as Animated } from "./utils/animated/Animated";
-export { default as Style } from "./components/Style";
-export { default as Logger, type LogLevel } from "./utils/Logger";
+
+export type { MapLibreRNEvent } from "./types/MapLibreRNEvent";
+
+export { Animated } from "./utils/animated/Animated";
+export { Logger, type LogLevel } from "./utils/Logger";
 export type {
-  FillLayerStyleProps as FillLayerStyle,
-  LineLayerStyleProps as LineLayerStyle,
-  SymbolLayerStyleProps as SymbolLayerStyle,
-  CircleLayerStyleProps as CircleLayerStyle,
-  HeatmapLayerStyleProps as HeatmapLayerStyle,
-  FillExtrusionLayerStyleProps as FillExtrusionLayerStyle,
-  RasterLayerStyleProps as RasterLayerStyle,
-  HillshadeLayerStyleProps as HillshadeLayerStyle,
-  BackgroundLayerStyleProps as BackgroundLayerStyle,
-  LightLayerStyleProps as LightLayerStyle,
-} from "./utils/MapLibreRNStyles";
+  FillLayerStyle,
+  LineLayerStyle,
+  SymbolLayerStyle,
+  CircleLayerStyle,
+  HeatmapLayerStyle,
+  FillExtrusionLayerStyle,
+  RasterLayerStyle,
+  HillshadeLayerStyle,
+  BackgroundLayerStyle,
+  LightLayerStyle,
+} from "./types/MapLibreRNStyles";
 
-/** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
-export const UserTrackingModes = UserTrackingMode;
+export type { MapLibrePluginProps } from "./plugin/MapLibrePluginProps";

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 { type SymbolLayerStyleProps } from "../utils/MapLibreRNStyles";
 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,22 +34,22 @@ 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 {
   onPress(event: OnPressEvent): void;
-  symbolStyle: SymbolLayerStyleProps | undefined;
+  symbolStyle: SymbolLayerStyle | undefined;
 }
 
-const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
+export const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
   (
     {
       animated = false,
@@ -126,7 +126,7 @@ const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
     }
 
     const children = [];
-    const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
+    const symbolStyle: SymbolLayerStyle | undefined = props.icon
       ? {
           ...props.style,
           iconImage: typeof props.icon === "string" ? props.icon : undefined,
@@ -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 BackgroundLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { type BackgroundLayerStyle } from "../types/MapLibreRNStyles";
 
-const MapLibreRN = NativeModules.MLRNModule;
+const MLRNModule = NativeModules.MLRNModule;
 
 export const NATIVE_MODULE_NAME = "MLRNBackgroundLayer";
 
@@ -16,7 +16,7 @@ export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
-  style?: BackgroundLayerStyleProps;
+  style?: BackgroundLayerStyle;
 }
 
 interface NativeProps
@@ -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

@@ -1,12 +1,19 @@
 import { point } from "@turf/helpers";
-import { forwardRef, memo, useImperativeHandle, useMemo } from "react";
-import { requireNativeComponent, type ViewProps } from "react-native";
+import {
+  forwardRef,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
+import { Platform, requireNativeComponent, type ViewProps } from "react-native";
 
 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";
@@ -47,54 +54,62 @@ function makeNativeCameraStop(stop?: CameraStop): NativeCameraStop | undefined {
     return undefined;
   }
 
-  const nativeStop: NativeCameraStop = {};
+  const newNativeStop: NativeCameraStop = {};
 
   if (stop.animationDuration !== undefined) {
-    nativeStop.duration = stop.animationDuration;
+    newNativeStop.duration = stop.animationDuration;
   }
   if (stop.animationMode !== undefined) {
-    nativeStop.mode = getNativeCameraMode(stop.animationMode);
+    newNativeStop.mode = getNativeCameraMode(stop.animationMode);
   }
   if (stop.centerCoordinate) {
-    nativeStop.centerCoordinate = JSON.stringify(point(stop.centerCoordinate));
+    newNativeStop.centerCoordinate = JSON.stringify(
+      point(stop.centerCoordinate),
+    );
   }
   if (stop.heading !== undefined) {
-    nativeStop.heading = stop.heading;
+    newNativeStop.heading = stop.heading;
   }
   if (stop.pitch !== undefined) {
-    nativeStop.pitch = stop.pitch;
+    newNativeStop.pitch = stop.pitch;
   }
   if (stop.zoomLevel !== undefined) {
-    nativeStop.zoom = stop.zoomLevel;
+    newNativeStop.zoom = stop.zoomLevel;
   }
 
   if (stop.bounds && stop.bounds.ne && stop.bounds.sw) {
     const { ne, sw } = stop.bounds;
-    nativeStop.bounds = makeNativeBounds(ne, sw);
+    newNativeStop.bounds = makeNativeBounds(ne, sw);
   }
 
   const paddingTop = stop.padding?.paddingTop ?? stop.bounds?.paddingTop;
   if (paddingTop !== undefined) {
-    nativeStop.paddingTop = paddingTop;
+    newNativeStop.paddingTop = paddingTop;
   }
 
   const paddingRight = stop.padding?.paddingRight ?? stop.bounds?.paddingRight;
   if (paddingRight !== undefined) {
-    nativeStop.paddingRight = paddingRight;
+    newNativeStop.paddingRight = paddingRight;
   }
 
   const paddingBottom =
     stop.padding?.paddingBottom ?? stop.bounds?.paddingBottom;
   if (paddingBottom !== undefined) {
-    nativeStop.paddingBottom = paddingBottom;
+    newNativeStop.paddingBottom = paddingBottom;
   }
 
   const paddingLeft = stop.padding?.paddingLeft ?? stop.bounds?.paddingLeft;
   if (paddingLeft !== undefined) {
-    nativeStop.paddingLeft = paddingLeft;
+    newNativeStop.paddingLeft = paddingLeft;
   }
 
-  return nativeStop;
+  if (newNativeStop.centerCoordinate && newNativeStop.bounds) {
+    throw new Error(
+      "Create a camera stop with bounds and centerCoordinate – this is not possible.",
+    );
+  }
+
+  return newNativeStop;
 }
 
 export interface CameraRef {
@@ -211,7 +226,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.UserTrackingModes` 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/SetUserTrackingModes.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.
    */
   followUserMode?: UserTrackingMode;
 
@@ -244,7 +259,7 @@ export interface NativeCameraProps
   defaultStop?: NativeCameraStop;
 }
 
-const Camera = memo(
+export const Camera = memo(
   forwardRef<CameraRef, CameraProps>(
     (
       {
@@ -269,44 +284,11 @@ const Camera = memo(
       }: CameraProps,
       ref,
     ) => {
-      const nativeCamera = useNativeRef<NativeCameraProps>();
-
-      const nativeStop = useMemo(() => {
-        return makeNativeCameraStop({
-          animationDuration,
-          animationMode,
-          bounds,
-          centerCoordinate,
-          heading,
-          padding,
-          pitch,
-          zoomLevel,
-        });
-      }, [
-        animationDuration,
-        animationMode,
-        bounds,
-        centerCoordinate,
-        heading,
-        padding,
-        pitch,
-        zoomLevel,
-      ]);
-
-      const nativeDefaultStop = useMemo(() => {
-        return makeNativeCameraStop(defaultSettings);
-      }, [defaultSettings]);
-
-      const nativeMaxBounds = useMemo(() => {
-        if (!maxBounds?.ne || !maxBounds?.sw) {
-          return undefined;
-        }
-        return makeNativeBounds(maxBounds.ne, maxBounds.sw);
-      }, [maxBounds]);
+      const nativeCameraRef = useNativeRef<NativeCameraProps>();
 
       const setCamera = (config: CameraStop | CameraStops = {}): void => {
         if ("stops" in config) {
-          nativeCamera.current?.setNativeProps({
+          nativeCameraRef.current?.setNativeProps({
             stop: {
               stops: config.stops
                 .map((stopItem) => makeNativeCameraStop(stopItem))
@@ -314,10 +296,10 @@ const Camera = memo(
             },
           });
         } else {
-          const nativeStop = makeNativeCameraStop(config);
+          const stop = makeNativeCameraStop(config);
 
-          if (nativeStop) {
-            nativeCamera.current?.setNativeProps({ stop: nativeStop });
+          if (stop) {
+            nativeCameraRef.current?.setNativeProps({ stop });
           }
         }
       };
@@ -399,10 +381,10 @@ const Camera = memo(
            * cameraRef.current?.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
            * cameraRef.current?.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
            *
-           * @param {Array<Number>} ne - North east coordinate of bound
-           * @param {Array<Number>} sw - South west coordinate of bound
-           * @param {Number|Array<Number>|undefined} padding - Padding for the bounds
-           * @param {Number=} animationDuration - Duration of camera animation
+           * @param {number[]} ne - North east coordinate of bound
+           * @param {number[]} sw - South west coordinate of bound
+           * @param {number|number[]|undefined} padding - Padding for the bounds
+           * @param {number=} animationDuration - Duration of camera animation
            * @return {void}
            */
           fitBounds,
@@ -413,8 +395,8 @@ const Camera = memo(
            * cameraRef.current?.flyTo([lng, lat])
            * cameraRef.current?.flyTo([lng, lat], 12000)
            *
-           *  @param {Array<Number>} coordinates - Coordinates that map camera will jump to
-           *  @param {Number=} animationDuration - Duration of camera animation
+           *  @param {number[]} coordinates - Coordinates that map camera will jump to
+           *  @param {number=} animationDuration - Duration of camera animation
            *  @return {void}
            */
           flyTo,
@@ -425,8 +407,8 @@ const Camera = memo(
            * cameraRef.current?.moveTo([lng, lat], 200) // eases camera to new location based on duration
            * cameraRef.current?.moveTo([lng, lat]) // snaps camera to new location without any easing
            *
-           *  @param {Array<Number>} coordinates - Coordinates that map camera will move too
-           *  @param {Number=} animationDuration - Duration of camera animation
+           *  @param {number[]} coordinates - Coordinates that map camera will move too
+           *  @param {number=} animationDuration - Duration of camera animation
            *  @return {void}
            */
           moveTo,
@@ -437,8 +419,8 @@ const Camera = memo(
            * cameraRef.current?.zoomTo(16)
            * cameraRef.current?.zoomTo(16, 100)
            *
-           * @param {Number} zoomLevel - Zoom level that the map camera will animate too
-           * @param {Number=} animationDuration - Duration of camera animation
+           * @param {number} zoomLevel - Zoom level that the map camera will animate too
+           * @param {number=} animationDuration - Duration of camera animation
            * @return {void}
            */
           zoomTo,
@@ -465,20 +447,116 @@ const Camera = memo(
         }),
       );
 
+      const followProps = useMemo(() => {
+        return {
+          followUserMode,
+          followPitch: followPitch ?? pitch,
+          followHeading: followHeading ?? heading,
+          followZoomLevel: followZoomLevel ?? zoomLevel,
+        };
+      }, [
+        followUserMode,
+        followPitch,
+        pitch,
+        followHeading,
+        heading,
+        followZoomLevel,
+        zoomLevel,
+      ]);
+
+      useEffect(() => {
+        if (followUserLocation) {
+          if (Platform.OS === "android") {
+            nativeCameraRef.current?.setNativeProps({
+              ...followProps,
+              followUserLocation,
+            });
+          } else {
+            nativeCameraRef.current?.setNativeProps({
+              ...followProps,
+            });
+            nativeCameraRef.current?.setNativeProps({
+              followUserLocation,
+            });
+          }
+        } else {
+          nativeCameraRef.current?.setNativeProps({
+            followUserLocation,
+          });
+        }
+      }, [followUserLocation, followProps]);
+
+      const nativeMaxBounds = useMemo(() => {
+        if (!maxBounds?.ne || !maxBounds?.sw) {
+          return undefined;
+        }
+
+        return makeNativeBounds(maxBounds.ne, maxBounds.sw);
+      }, [maxBounds]);
+
+      useEffect(() => {
+        if (!followUserLocation) {
+          nativeCameraRef.current?.setNativeProps({
+            maxBounds: nativeMaxBounds,
+          });
+        }
+      }, [followUserLocation, nativeMaxBounds]);
+
+      useEffect(() => {
+        if (!followUserLocation) {
+          nativeCameraRef.current?.setNativeProps({
+            minZoomLevel,
+          });
+        }
+      }, [followUserLocation, minZoomLevel]);
+
+      useEffect(() => {
+        if (!followUserLocation) {
+          nativeCameraRef.current?.setNativeProps({
+            maxZoomLevel,
+          });
+        }
+      }, [followUserLocation, maxZoomLevel]);
+
+      const nativeStop = useMemo(() => {
+        return makeNativeCameraStop({
+          animationDuration,
+          animationMode,
+          bounds,
+          centerCoordinate,
+          heading,
+          padding,
+          pitch,
+          zoomLevel,
+        });
+      }, [
+        animationDuration,
+        animationMode,
+        bounds,
+        centerCoordinate,
+        heading,
+        padding,
+        pitch,
+        zoomLevel,
+      ]);
+
+      useEffect(() => {
+        if (!followUserLocation) {
+          nativeCameraRef.current?.setNativeProps({
+            stop: nativeStop,
+          });
+        }
+      }, [followUserLocation, nativeStop]);
+
+      const [nativeDefaultStop] = useState(
+        makeNativeCameraStop(defaultSettings),
+      );
+
       return (
         <MLRNCamera
           testID="Camera"
-          ref={nativeCamera}
-          stop={nativeStop}
+          ref={nativeCameraRef}
           defaultStop={nativeDefaultStop}
-          maxBounds={nativeMaxBounds}
-          followUserLocation={followUserLocation}
-          followHeading={followHeading}
-          followPitch={followPitch}
-          followUserMode={followUserMode}
-          followZoomLevel={followZoomLevel}
-          maxZoomLevel={maxZoomLevel}
-          minZoomLevel={minZoomLevel}
           onUserTrackingModeChange={onUserTrackingModeChange}
         />
       );
@@ -488,5 +566,3 @@ const Camera = memo(
 
 const MLRNCamera =
   requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
-
-export default Camera;