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

package/javascript/components/Camera.tsx

@@ -1,28 +1,32 @@
-import {toJSONString, existenceChange} from '../utils';
-import * as geoUtils from '../utils/geoUtils';
-import {MaplibreGLEvent} from '../types';
-
-import {
-  NativeMethods,
-  NativeModules,
-  requireNativeComponent,
-  ViewProps,
-} from 'react-native';
-import React, {Component, MutableRefObject, ReactElement} from 'react';
-
-const MapLibreGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
+import React, {
+  memo,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useCallback,
+} from "react";
+import { NativeModules, requireNativeComponent, ViewProps } from "react-native";
+
+import { useNativeRef } from "../hooks/useNativeRef";
+import { MaplibreGLEvent } from "../types";
+import { toJSONString } from "../utils";
+import * as geoUtils from "../utils/geoUtils";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNCamera";
 
 export enum UserTrackingMode {
-  Follow = 'normal',
-  FollowWithHeading = 'compass',
-  FollowWithCourse = 'course',
+  Follow = "normal",
+  FollowWithHeading = "compass",
+  FollowWithCourse = "course",
 }
 
 export type UserTrackingModeChangeCallback = (
   event: MaplibreGLEvent<
-    'usertrackingmodechange',
+    "usertrackingmodechange",
     {
       followUserLocation: boolean;
       followUserMode: UserTrackingMode | null;
@@ -47,6 +51,15 @@ export interface CameraRef {
     animationDuration?: number,
   ) => void;
   zoomTo: (zoomLevel: number, animationDuration?: number) => void;
+
+  _defaultCamera: RefObject<NativeCameraStop | null>;
+  _getMaxBounds: () => string | null;
+  _getNativeCameraMode: (config: CameraStop) => NativeAnimationMode;
+  _createStopConfig: (
+    config: CameraStop,
+    ignoreFollowUserLocation?: boolean,
+  ) => NativeCameraStop | null;
+  _createDefaultCamera: () => NativeCameraStop | null;
 }
 
 export interface CameraPadding {
@@ -83,8 +96,8 @@ interface CameraBoundsWithPadding
   extends CameraBounds,
     Partial<CameraPadding> {}
 
-type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
-export type CameraAnimationMode = 'flyTo' | 'easeTo' | 'linearTo' | 'moveTo';
+type NativeAnimationMode = "flight" | "ease" | "linear" | "none" | "move";
+export type CameraAnimationMode = "flyTo" | "easeTo" | "linearTo" | "moveTo";
 
 export interface NativeCameraStop extends Required<CameraPadding> {
   mode: NativeAnimationMode;
@@ -120,7 +133,7 @@ export type CameraStops = {
   stops: CameraStop[];
 };
 
-interface CameraProps extends Omit<ViewProps, 'style'>, CameraStop {
+interface CameraProps extends Omit<ViewProps, "style">, CameraStop {
   /**
    * If false, the camera will not send any props to the native module. Intended to be used to prevent unnecessary tile fetching and improve performance when the map is not visible. Defaults to true.
    */
@@ -180,501 +193,431 @@ interface CameraProps extends Omit<ViewProps, 'style'>, CameraStop {
   onUserTrackingModeChange?: UserTrackingModeChangeCallback;
 }
 
-interface NativeProps extends Omit<CameraProps, 'maxBounds'> {
+interface NativeProps extends Omit<CameraProps, "maxBounds"> {
   maxBounds: string | null;
   stop: NativeCameraStop | null;
   defaultStop: NativeCameraStop | null;
 }
 
-class Camera extends React.Component<CameraProps> {
-  static defaultProps = {
-    allowUpdates: true,
-    animationMode: 'easeTo',
-    animationDuration: 2000,
-  };
-
-  defaultCamera: NativeCameraStop | null = null;
-  cameraRef: MutableRefObject<
-    (Component<NativeProps> & Readonly<NativeMethods>) | null
-  >;
-
-  constructor(props: CameraProps) {
-    super(props);
-    this.cameraRef = React.createRef<
-      Component<NativeProps> & Readonly<NativeMethods>
-    >();
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: CameraProps): void {
-    this._handleCameraChange(this.props, nextProps);
-  }
-
-  shouldComponentUpdate(): boolean {
-    return false;
-  }
-
-  _handleCameraChange(
-    currentCamera: CameraProps,
-    nextCamera: CameraProps,
-  ): void {
-    const c = currentCamera;
-    const n = nextCamera;
-
-    if (!n.allowUpdates) {
-      return;
-    }
-
-    const hasCameraChanged = this._hasCameraChanged(c, n);
-    if (!hasCameraChanged) {
-      return;
-    }
-
-    if (c.followUserLocation && !n.followUserLocation) {
-      this.cameraRef.current?.setNativeProps({followUserLocation: false});
-      return;
-    }
-    if (!c.followUserLocation && n.followUserLocation) {
-      this.cameraRef.current?.setNativeProps({followUserLocation: true});
-    }
-
-    if (n.followUserLocation) {
-      this.cameraRef.current?.setNativeProps({
-        followUserMode: n.followUserMode,
-        followPitch: n.followPitch || n.pitch,
-        followHeading: n.followHeading || n.heading,
-        followZoomLevel: n.followZoomLevel || n.zoomLevel,
-      });
-      return;
-    }
-
-    if (n.maxBounds) {
-      this.cameraRef.current?.setNativeProps({
-        maxBounds: this._getMaxBounds(),
-      });
-    }
-    if (n.minZoomLevel) {
-      this.cameraRef.current?.setNativeProps({
-        minZoomLevel: this.props.minZoomLevel,
-      });
-    }
-    if (n.maxZoomLevel) {
-      this.cameraRef.current?.setNativeProps({
-        maxZoomLevel: this.props.maxZoomLevel,
-      });
-    }
-
-    const cameraConfig: CameraStop = {
-      bounds: undefined,
-      centerCoordinate: undefined,
-      padding: n.padding,
-      zoomLevel: n.zoomLevel,
-      pitch: n.pitch,
-      heading: n.heading,
-      animationMode: n.animationMode,
-      animationDuration: n.animationDuration,
-    };
-
-    const boundsChanged = this._hasBoundsChanged(c.bounds, n.bounds);
-    const centerCoordinateChanged = this._hasCenterCoordinateChanged(
-      c.centerCoordinate,
-      n.centerCoordinate,
-    );
-    const paddingChanged = this._hasPaddingChanged(c.padding, n.padding);
-    const zoomChanged = this._hasNumberChanged(c.zoomLevel, n.zoomLevel);
-    const pitchChanged = this._hasNumberChanged(c.pitch, n.pitch);
-    const headingChanged = this._hasNumberChanged(c.heading, n.heading);
-
-    let shouldUpdate = false;
-
-    if (n.bounds && boundsChanged) {
-      cameraConfig.bounds = n.bounds;
-      shouldUpdate = true;
-    } else if (n.centerCoordinate && centerCoordinateChanged) {
-      cameraConfig.centerCoordinate = n.centerCoordinate;
-      shouldUpdate = true;
-    }
-
-    if (paddingChanged || zoomChanged || pitchChanged || headingChanged) {
-      shouldUpdate = true;
-    }
-
-    if (shouldUpdate) {
-      this._setCamera(cameraConfig);
-    }
-  }
-
-  _hasCameraChanged(
-    currentCamera: CameraProps,
-    nextCamera: CameraProps,
-  ): boolean {
-    const c = currentCamera;
-    const n = nextCamera;
-
-    const hasDefaultPropsChanged =
-      c.heading !== n.heading ||
-      this._hasCenterCoordinateChanged(
-        c?.centerCoordinate,
-        n?.centerCoordinate,
-      ) ||
-      this._hasBoundsChanged(c.bounds, n.bounds) ||
-      this._hasPaddingChanged(c.padding, n.padding) ||
-      c.pitch !== n.pitch ||
-      c.zoomLevel !== n.zoomLevel ||
-      c.triggerKey !== n.triggerKey;
-
-    const hasFollowPropsChanged =
-      c.followUserLocation !== n.followUserLocation ||
-      c.followUserMode !== n.followUserMode ||
-      c.followZoomLevel !== n.followZoomLevel ||
-      c.followHeading !== n.followHeading ||
-      c.followPitch !== n.followPitch;
-
-    const hasAnimationPropsChanged =
-      c.animationMode !== n.animationMode ||
-      c.animationDuration !== n.animationDuration;
-
-    const hasNavigationConstraintsPropsChanged =
-      this._hasBoundsChanged(c.maxBounds, n.maxBounds) ||
-      c.minZoomLevel !== n.minZoomLevel ||
-      c.maxZoomLevel !== n.maxZoomLevel;
-
-    return (
-      hasDefaultPropsChanged ||
-      hasFollowPropsChanged ||
-      hasAnimationPropsChanged ||
-      hasNavigationConstraintsPropsChanged
-    );
-  }
-
-  _hasCenterCoordinateChanged(
-    cC?: GeoJSON.Position,
-    nC?: GeoJSON.Position,
-  ): boolean {
-    if (!cC && !nC) {
-      return false;
-    }
+const Camera = memo(
+  React.forwardRef<CameraRef, CameraProps>(
+    (
+      {
+        allowUpdates = true,
+        animationMode = "easeTo",
+        animationDuration = 2000,
+        ...rest
+      }: CameraProps,
+      ref,
+    ) => {
+      const props = useMemo(() => {
+        return {
+          allowUpdates,
+          animationMode,
+          animationDuration,
+          ...rest,
+        };
+      }, [allowUpdates, animationMode, animationDuration, rest]);
+
+      useImperativeHandle(
+        ref,
+        (): CameraRef => ({
+          /**
+           * Map camera transitions to fit provided bounds
+           *
+           * @example
+           * this.camera.fitBounds([lng, lat], [lng, lat])
+           * this.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
+           * this.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
+           * this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
+           *
+           * @param {Array<Number>} northEastCoordinates - North east coordinate of bound
+           * @param {Array<Number>} southWestCoordinates - South west coordinate of bound
+           * @param {Number|Array<Number>|undefined} padding - Padding for the bounds
+           * @param {Number=} animationDuration - Duration of camera animation
+           * @return {void}
+           */
+          fitBounds,
+          /**
+           * Map camera will fly to new coordinate
+           *
+           * @example
+           * this.camera.flyTo([lng, lat])
+           * this.camera.flyTo([lng, lat], 12000)
+           *
+           *  @param {Array<Number>} coordinates - Coordinates that map camera will jump too
+           *  @param {Number=} animationDuration - Duration of camera animation
+           *  @return {void}
+           */
+          flyTo,
+          /**
+           * Map camera will move to new coordinate at the same zoom level
+           *
+           * @example
+           * this.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
+           * this.camera.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
+           *  @return {void}
+           */
+          moveTo,
+          /**
+           * Map camera will zoom to specified level
+           *
+           * @example
+           * this.camera.zoomTo(16)
+           * this.camera.zoomTo(16, 100)
+           *
+           * @param {Number} zoomLevel - Zoom level that the map camera will animate too
+           * @param {Number=} animationDuration - Duration of camera animation
+           * @return {void}
+           */
+          zoomTo,
+          /**
+           * Map camera will perform updates based on provided config. Advanced use only!
+           *
+           * @example
+           * this.camera.setCamera({
+           *   centerCoordinate: [lng, lat],
+           *   zoomLevel: 16,
+           *   animationDuration: 2000,
+           * })
+           *
+           * this.camera.setCamera({
+           *   stops: [
+           *     { pitch: 45, animationDuration: 200 },
+           *     { heading: 180, animationDuration: 300 },
+           *   ]
+           * })
+           *
+           *  @param {Object} config - Camera configuration
+           */
+          setCamera,
+          _defaultCamera,
+          _getMaxBounds,
+          _getNativeCameraMode,
+          _createStopConfig,
+          _createDefaultCamera,
+        }),
+      );
 
-    if (existenceChange(!!cC, !!nC)) {
-      return true;
-    }
+      const _defaultCamera = useRef<NativeCameraStop | null>(null);
+
+      const cameraRef = useNativeRef<NativeProps>();
+
+      const _createStopConfig = useCallback(
+        (
+          config: CameraStop = {},
+          ignoreFollowUserLocation = false,
+        ): NativeCameraStop | null => {
+          if (props.followUserLocation && !ignoreFollowUserLocation) {
+            return null;
+          }
+
+          const stopConfig: NativeCameraStop = {
+            mode: _getNativeCameraMode(config),
+            pitch: config.pitch,
+            heading: config.heading,
+            duration: config.animationDuration || 0,
+            zoom: config.zoomLevel,
+            paddingTop:
+              config.padding?.paddingTop || config.bounds?.paddingTop || 0,
+            paddingRight:
+              config.padding?.paddingRight || config.bounds?.paddingRight || 0,
+            paddingBottom:
+              config.padding?.paddingBottom ||
+              config.bounds?.paddingBottom ||
+              0,
+            paddingLeft:
+              config.padding?.paddingLeft || config.bounds?.paddingLeft || 0,
+          };
+
+          if (config.centerCoordinate) {
+            stopConfig.centerCoordinate = toJSONString(
+              geoUtils.makePoint(config.centerCoordinate),
+            );
+          }
+
+          if (config.bounds && config.bounds.ne && config.bounds.sw) {
+            const { ne, sw } = config.bounds;
+            stopConfig.bounds = toJSONString(geoUtils.makeLatLngBounds(ne, sw));
+          }
+
+          return stopConfig;
+        },
+        [props.followUserLocation],
+      );
 
-    const isLngDiff = cC?.[0] !== nC?.[0];
-    const isLatDiff = cC?.[1] !== nC?.[1];
-    return isLngDiff || isLatDiff;
-  }
-
-  _hasBoundsChanged(
-    cB?: CameraBoundsWithPadding,
-    nB?: CameraBoundsWithPadding,
-  ): boolean {
-    if (!cB && !nB) {
-      return false;
-    }
+      const _setCamera = useCallback(
+        (config: CameraStop | CameraStops = {}): void => {
+          if ("stops" in config) {
+            let nativeStops: NativeCameraStop[] = [];
+
+            for (const stop of config.stops) {
+              const nativeStop = _createStopConfig(stop);
+              if (nativeStop) {
+                nativeStops = [...nativeStops, nativeStop];
+              }
+            }
+            cameraRef.current?.setNativeProps({ stop: { stops: nativeStops } });
+          } else {
+            const nativeStop = _createStopConfig(config);
+
+            if (nativeStop) {
+              cameraRef.current?.setNativeProps({ stop: nativeStop });
+            }
+          }
+        },
+        [cameraRef.current, _createStopConfig],
+      );
 
-    if (existenceChange(!!cB, !!nB)) {
-      return true;
-    }
+      const _getMaxBounds = useCallback((): string | null => {
+        const bounds = props.maxBounds;
+        if (!bounds || !bounds.ne || !bounds.sw) {
+          return null;
+        }
+        return toJSONString(geoUtils.makeLatLngBounds(bounds.ne, bounds.sw));
+      }, [props.maxBounds]);
 
-    return (
-      cB?.ne[0] !== nB?.ne[0] ||
-      cB?.ne[1] !== nB?.ne[1] ||
-      cB?.sw[0] !== nB?.sw[0] ||
-      cB?.sw[1] !== nB?.sw[1] ||
-      cB?.paddingTop !== nB?.paddingTop ||
-      cB?.paddingLeft !== nB?.paddingLeft ||
-      cB?.paddingRight !== nB?.paddingRight ||
-      cB?.paddingBottom !== nB?.paddingBottom
-    );
-  }
-
-  _hasPaddingChanged(cP?: CameraPadding, nP?: CameraPadding): boolean {
-    if (!cP && !nP) {
-      return false;
-    }
+      useEffect(() => {
+        if (!props.allowUpdates) {
+          return;
+        }
 
-    if (existenceChange(!!cP, !!nP)) {
-      return true;
-    }
+        cameraRef.current?.setNativeProps({
+          followUserLocation: props.followUserLocation,
+        });
+      }, [cameraRef.current, props.followUserLocation]);
 
-    return (
-      cP?.paddingTop !== nP?.paddingTop ||
-      cP?.paddingLeft !== nP?.paddingLeft ||
-      cP?.paddingRight !== nP?.paddingRight ||
-      cP?.paddingBottom !== nP?.paddingBottom
-    );
-  }
-
-  _hasNumberChanged(prev?: number, next?: number): boolean {
-    if (existenceChange(!!prev, !!next)) {
-      return true;
-    }
+      useEffect(() => {
+        if (!props.maxBounds || !props.allowUpdates) {
+          return;
+        }
 
-    if (!prev && !next) {
-      return false;
-    }
+        cameraRef.current?.setNativeProps({
+          maxBounds: _getMaxBounds(),
+        });
+      }, [cameraRef.current, props.maxBounds, _getMaxBounds]);
 
-    return prev !== next;
-  }
+      useEffect(() => {
+        if (!props.minZoomLevel || !props.allowUpdates) {
+          return;
+        }
 
-  /**
-   * Map camera transitions to fit provided bounds
-   *
-   * @example
-   * this.camera.fitBounds([lng, lat], [lng, lat])
-   * this.camera.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides
-   * this.camera.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000)
-   * this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000)
-   *
-   * @param {Array<Number>} northEastCoordinates - North east coordinate of bound
-   * @param {Array<Number>} southWestCoordinates - South west coordinate of bound
-   * @param {Number=} padding - Camera padding for bound
-   * @param {Number=} animationDuration - Duration of camera animation
-   * @return {void}
-   */
-  fitBounds(
-    northEastCoordinates: number[],
-    southWestCoordinates: number[],
-    padding = 0,
-    animationDuration = 0.0,
-  ): void {
-    const pad = {
-      paddingLeft: 0,
-      paddingRight: 0,
-      paddingTop: 0,
-      paddingBottom: 0,
-    };
-
-    if (Array.isArray(padding)) {
-      if (padding.length === 2) {
-        pad.paddingTop = padding[0];
-        pad.paddingBottom = padding[0];
-        pad.paddingLeft = padding[1];
-        pad.paddingRight = padding[1];
-      } else if (padding.length === 4) {
-        pad.paddingTop = padding[0];
-        pad.paddingRight = padding[1];
-        pad.paddingBottom = padding[2];
-        pad.paddingLeft = padding[3];
-      }
-    } else {
-      pad.paddingLeft = padding;
-      pad.paddingRight = padding;
-      pad.paddingTop = padding;
-      pad.paddingBottom = padding;
-    }
+        cameraRef.current?.setNativeProps({
+          minZoomLevel: props.minZoomLevel,
+        });
+      }, [cameraRef.current, props.minZoomLevel]);
 
-    this.setCamera({
-      bounds: {
-        ne: northEastCoordinates,
-        sw: southWestCoordinates,
-      },
-      padding: pad,
-      animationDuration,
-      animationMode: 'easeTo',
-    });
-  }
+      useEffect(() => {
+        if (!props.maxZoomLevel || !props.allowUpdates) {
+          return;
+        }
 
-  /**
-   * Map camera will fly to new coordinate
-   *
-   * @example
-   * this.camera.flyTo([lng, lat])
-   * this.camera.flyTo([lng, lat], 12000)
-   *
-   *  @param {Array<Number>} coordinates - Coordinates that map camera will jump too
-   *  @param {Number=} animationDuration - Duration of camera animation
-   *  @return {void}
-   */
-  flyTo(coordinates: GeoJSON.Position, animationDuration = 2000): void {
-    this.setCamera({
-      centerCoordinate: coordinates,
-      animationDuration,
-      animationMode: 'flyTo',
-    });
-  }
+        cameraRef.current?.setNativeProps({
+          maxZoomLevel: props.maxZoomLevel,
+        });
+      }, [cameraRef.current, props.maxZoomLevel]);
 
-  /**
-   * Map camera will move to new coordinate at the same zoom level
-   *
-   * @example
-   * this.camera.moveTo([lng, lat], 200) // eases camera to new location based on duration
-   * this.camera.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
-   *  @return {void}
-   */
-  moveTo(coordinates: GeoJSON.Position, animationDuration = 0): void {
-    this.setCamera({
-      centerCoordinate: coordinates,
-      animationDuration,
-    });
-  }
+      useEffect(() => {
+        if (!props.allowUpdates) {
+          return;
+        }
 
-  /**
-   * Map camera will zoom to specified level
-   *
-   * @example
-   * this.camera.zoomTo(16)
-   * this.camera.zoomTo(16, 100)
-   *
-   * @param {Number} zoomLevel - Zoom level that the map camera will animate too
-   * @param {Number=} animationDuration - Duration of camera animation
-   * @return {void}
-   */
-  zoomTo(zoomLevel: number, animationDuration = 2000): void {
-    this.setCamera({
-      zoomLevel,
-      animationDuration,
-      animationMode: 'flyTo',
-    });
-  }
+        if (!props.followUserLocation) {
+          return;
+        }
 
-  /**
-   * Map camera will perform updates based on provided config. Advanced use only!
-   *
-   * @example
-   * this.camera.setCamera({
-   *   centerCoordinate: [lng, lat],
-   *   zoomLevel: 16,
-   *   animationDuration: 2000,
-   * })
-   *
-   * this.camera.setCamera({
-   *   stops: [
-   *     { pitch: 45, animationDuration: 200 },
-   *     { heading: 180, animationDuration: 300 },
-   *   ]
-   * })
-   *
-   *  @param {Object} config - Camera configuration
-   */
-  setCamera(config: CameraStop | CameraStops = {}): void {
-    this._setCamera(config);
-  }
-
-  _setCamera(config: CameraStop | CameraStops = {}): void {
-    if ('stops' in config) {
-      let nativeStops: NativeCameraStop[] = [];
-
-      for (const stop of config.stops) {
-        const nativeStop = this._createStopConfig(stop);
-        if (nativeStop) {
-          nativeStops = [...nativeStops, nativeStop];
+        cameraRef.current?.setNativeProps({
+          followUserMode: props.followUserMode,
+          followPitch: props.followPitch || props.pitch,
+          followHeading: props.followHeading || props.heading,
+          followZoomLevel: props.followZoomLevel || props.zoomLevel,
+        });
+      }, [
+        cameraRef.current,
+        props.allowUpdates,
+        props.followUserLocation,
+        props.followUserMode,
+        props.followPitch,
+        props.pitch,
+        props.followHeading,
+        props.heading,
+        props.followZoomLevel,
+        props.zoomLevel,
+      ]);
+
+      const cameraConfig: CameraStop = useMemo(() => {
+        return {
+          bounds: props.bounds,
+          centerCoordinate: props.centerCoordinate,
+          padding: props.padding,
+          zoomLevel: props.zoomLevel,
+          minZoomLevel: props.minZoomLevel,
+          maxZoomLevel: props.maxZoomLevel,
+          pitch: props.pitch,
+          heading: props.heading,
+          animationMode: props.animationMode,
+          animationDuration: props.animationDuration,
+        };
+      }, [
+        props.bounds,
+        props.centerCoordinate,
+        props.padding,
+        props.zoomLevel,
+        props.minZoomLevel,
+        props.maxZoomLevel,
+        props.pitch,
+        props.heading,
+        props.animationMode,
+        props.animationDuration,
+      ]);
+
+      useEffect(() => {
+        if (!props.allowUpdates) {
+          return;
         }
-      }
-      this.cameraRef.current?.setNativeProps({stop: {stops: nativeStops}});
-    } else {
-      const nativeStop = this._createStopConfig(config);
-      if (nativeStop) {
-        this.cameraRef.current?.setNativeProps({stop: nativeStop});
-      }
-    }
-  }
 
-  _createDefaultCamera(): NativeCameraStop | null {
-    if (this.defaultCamera) {
-      return this.defaultCamera;
-    }
-    if (!this.props.defaultSettings) {
-      return null;
-    }
+        _setCamera(cameraConfig);
+      }, [_setCamera, cameraConfig]);
+
+      const fitBounds = (
+        northEastCoordinates: GeoJSON.Position,
+        southWestCoordinates: GeoJSON.Position,
+        padding: number | number[] = 0,
+        animationDuration: number = 0.0,
+      ): void => {
+        const pad = {
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+        };
+
+        if (Array.isArray(padding)) {
+          if (padding.length === 2) {
+            pad.paddingTop = padding[0];
+            pad.paddingBottom = padding[0];
+            pad.paddingLeft = padding[1];
+            pad.paddingRight = padding[1];
+          } else if (padding.length === 4) {
+            pad.paddingTop = padding[0];
+            pad.paddingRight = padding[1];
+            pad.paddingBottom = padding[2];
+            pad.paddingLeft = padding[3];
+          }
+        } else {
+          pad.paddingLeft = padding;
+          pad.paddingRight = padding;
+          pad.paddingTop = padding;
+          pad.paddingBottom = padding;
+        }
 
-    this.defaultCamera = this._createStopConfig(
-      {
-        ...this.props.defaultSettings,
-        animationMode: 'moveTo',
-      },
-      true,
-    );
-    return this.defaultCamera;
-  }
-
-  _createStopConfig(
-    config: CameraStop = {},
-    ignoreFollowUserLocation = false,
-  ): NativeCameraStop | null {
-    if (this.props.followUserLocation && !ignoreFollowUserLocation) {
-      return null;
-    }
+        setCamera({
+          bounds: {
+            ne: northEastCoordinates,
+            sw: southWestCoordinates,
+          },
+          padding: pad,
+          animationDuration,
+          animationMode: "easeTo",
+        });
+      };
+
+      const flyTo = (
+        coordinates: GeoJSON.Position,
+        animationDuration = 2000,
+      ): void => {
+        setCamera({
+          centerCoordinate: coordinates,
+          animationDuration,
+          animationMode: "flyTo",
+        });
+      };
+
+      const moveTo = (
+        coordinates: GeoJSON.Position,
+        animationDuration = 0,
+      ): void => {
+        setCamera({
+          centerCoordinate: coordinates,
+          animationDuration,
+        });
+      };
+
+      const zoomTo = (zoomLevel: number, animationDuration = 2000): void => {
+        setCamera({
+          zoomLevel,
+          animationDuration,
+          animationMode: "flyTo",
+        });
+      };
+
+      const setCamera = (config: CameraStop | CameraStops = {}): void => {
+        _setCamera(config);
+      };
+
+      const _createDefaultCamera = (): NativeCameraStop | null => {
+        if (_defaultCamera.current) {
+          return _defaultCamera.current;
+        }
+        if (!props.defaultSettings) {
+          return null;
+        }
 
-    const stopConfig: NativeCameraStop = {
-      mode: this._getNativeCameraMode(config),
-      pitch: config.pitch,
-      heading: config.heading,
-      duration: config.animationDuration || 0,
-      zoom: config.zoomLevel,
-      paddingTop: config.padding?.paddingTop || config.bounds?.paddingTop || 0,
-      paddingRight:
-        config.padding?.paddingRight || config.bounds?.paddingRight || 0,
-      paddingBottom:
-        config.padding?.paddingBottom || config.bounds?.paddingBottom || 0,
-      paddingLeft:
-        config.padding?.paddingLeft || config.bounds?.paddingLeft || 0,
-    };
-
-    if (config.centerCoordinate) {
-      stopConfig.centerCoordinate = toJSONString(
-        geoUtils.makePoint(config.centerCoordinate),
+        _defaultCamera.current = _createStopConfig(
+          {
+            ...props.defaultSettings,
+            animationMode: "moveTo",
+          },
+          true,
+        );
+        return _defaultCamera.current;
+      };
+
+      const _getNativeCameraMode = (
+        config: CameraStop,
+      ): NativeAnimationMode => {
+        switch (config.animationMode) {
+          case "flyTo":
+            return MapLibreGL.CameraModes.Flight;
+          case "moveTo":
+            return MapLibreGL.CameraModes.None;
+          case "linearTo":
+            return MapLibreGL.CameraModes.Linear;
+          default:
+            return MapLibreGL.CameraModes.Ease;
+        }
+      };
+
+      const nativeProps = Object.assign({}, props);
+
+      const callbacks = {
+        onUserTrackingModeChange: nativeProps.onUserTrackingModeChange,
+      };
+
+      return (
+        <RCTMLNCamera
+          testID="Camera"
+          ref={cameraRef}
+          followUserLocation={props.followUserLocation}
+          followUserMode={props.followUserMode}
+          followPitch={props.followPitch}
+          followHeading={props.followHeading}
+          followZoomLevel={props.followZoomLevel}
+          stop={_createStopConfig(nativeProps)}
+          maxZoomLevel={props.maxZoomLevel}
+          minZoomLevel={props.minZoomLevel}
+          maxBounds={_getMaxBounds()}
+          defaultStop={_createDefaultCamera()}
+          {...callbacks}
+        />
       );
-    }
-
-    if (config.bounds && config.bounds.ne && config.bounds.sw) {
-      const {ne, sw} = config.bounds;
-      stopConfig.bounds = toJSONString(geoUtils.makeLatLngBounds(ne, sw));
-    }
-
-    return stopConfig;
-  }
-
-  _getNativeCameraMode(config: CameraStop): NativeAnimationMode {
-    switch (config.animationMode) {
-      case 'flyTo':
-        return MapLibreGL.CameraModes.Flight;
-      case 'moveTo':
-        return MapLibreGL.CameraModes.None;
-      case 'linearTo':
-        return MapLibreGL.CameraModes.Linear;
-      default:
-        return MapLibreGL.CameraModes.Ease;
-    }
-  }
-
-  _getMaxBounds(): string | null {
-    const bounds = this.props.maxBounds;
-    if (!bounds || !bounds.ne || !bounds.sw) {
-      return null;
-    }
-    return toJSONString(geoUtils.makeLatLngBounds(bounds.ne, bounds.sw));
-  }
-
-  render(): ReactElement {
-    const props = Object.assign({}, this.props);
-
-    const callbacks = {
-      onUserTrackingModeChange: props.onUserTrackingModeChange,
-    };
-
-    return (
-      <RCTMGLCamera
-        testID="Camera"
-        ref={this.cameraRef}
-        followUserLocation={this.props.followUserLocation}
-        followUserMode={this.props.followUserMode}
-        followPitch={this.props.followPitch}
-        followHeading={this.props.followHeading}
-        followZoomLevel={this.props.followZoomLevel}
-        stop={this._createStopConfig(props)}
-        maxZoomLevel={this.props.maxZoomLevel}
-        minZoomLevel={this.props.minZoomLevel}
-        maxBounds={this._getMaxBounds()}
-        defaultStop={this._createDefaultCamera()}
-        {...callbacks}
-      />
-    );
-  }
-}
+    },
+  ),
+);
 
-const RCTMGLCamera = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RCTMLNCamera = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Camera;