@maplibre/maplibre-react-native 10.0.0-alpha.6 → 10.0.0-alpha.8

package/javascript/components/Camera.tsx

@@ -1,14 +1,18 @@
-import {toJSONString, existenceChange} from '../utils';
+import {toJSONString} 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';
+import {useNativeRef} from '../hooks/useNativeRef';
+
+import {NativeModules, requireNativeComponent, ViewProps} from 'react-native';
+import React, {
+  memo,
+  RefObject,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useCallback,
+} from 'react';
 
 const MapLibreGL = NativeModules.MLNModule;
 
@@ -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 {
@@ -186,494 +199,424 @@ interface NativeProps extends Omit<CameraProps, 'maxBounds'> {
   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;
-    }
+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 (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 _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],
+      );
 
-    if (existenceChange(!!cC, !!nC)) {
-      return true;
-    }
+      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],
+      );
 
-    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 _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]);
 
-    if (existenceChange(!!cB, !!nB)) {
-      return true;
-    }
+      useEffect(() => {
+        if (!props.allowUpdates) {
+          return;
+        }
 
-    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;
-    }
+        cameraRef.current?.setNativeProps({
+          followUserLocation: props.followUserLocation,
+        });
+      }, [cameraRef.current, props.followUserLocation]);
 
-    if (existenceChange(!!cP, !!nP)) {
-      return true;
-    }
+      useEffect(() => {
+        if (!props.maxBounds || !props.allowUpdates) {
+          return;
+        }
 
-    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;
-    }
+        cameraRef.current?.setNativeProps({
+          maxBounds: _getMaxBounds(),
+        });
+      }, [cameraRef.current, props.maxBounds, _getMaxBounds]);
 
-    if (!prev && !next) {
-      return false;
-    }
-
-    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|Array<Number>=} padding - Padding for the bounds
-   * @param {Number=} animationDuration - Duration of camera animation
-   * @return {void}
-   */
-  fitBounds(
-    northEastCoordinates: number[],
-    southWestCoordinates: number[],
-    padding: number | number[] | null | undefined = 0,
-    animationDuration: number | null | undefined = 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: 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 (
-      <RCTMLNCamera
-        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 RCTMLNCamera = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);