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

package/src/components/Camera.tsx

@@ -1,6 +1,13 @@
 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";
@@ -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 {
@@ -269,44 +284,11 @@ export 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 @@ export 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 @@ export 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 {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
            * @return {void}
            */
           fitBounds,
@@ -413,8 +395,8 @@ export 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 {Array<number>} coordinates - Coordinates that map camera will jump to
+           *  @param {number=} animationDuration - Duration of camera animation
            *  @return {void}
            */
           flyTo,
@@ -425,8 +407,8 @@ export 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 {Array<number>} coordinates - Coordinates that map camera will move too
+           *  @param {number=} animationDuration - Duration of camera animation
            *  @return {void}
            */
           moveTo,
@@ -437,8 +419,8 @@ export 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 @@ export 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}
         />
       );

package/src/components/MapView.tsx

@@ -355,8 +355,8 @@ export const MapView = memo(
           queryRenderedFeaturesInRect,
           /**
            * Takes snapshot of map with current tiles and returns a URI to the image
-           * @param  {Boolean} writeToDisk If true will create a temp file, otherwise it is in base64
-           * @return {String}
+           * @param  {boolean} writeToDisk If true will create a temp file, otherwise it is in base64
+           * @return {string}
            */
           takeSnap,
           /**
@@ -365,7 +365,7 @@ export const MapView = memo(
            * @example
            * const zoom = await this._map.getZoom();
            *
-           * @return {Number}
+           * @return {number}
            */
           getZoom,
           /**
@@ -374,7 +374,7 @@ export const MapView = memo(
            * @example
            * const center = await this._map.getCenter();
            *
-           * @return {Array<Number>} Coordinates
+           * @return {Array<number>} Coordinates
            */
           getCenter,
           /**
@@ -384,8 +384,8 @@ export const MapView = memo(
            * await this._map.setSourceVisibility(false, 'composite', 'building')
            *
            * @param {boolean} visible - Visibility of the layers
-           * @param {String} sourceId - Identifier of the target source (e.g. 'composite')
-           * @param {String=} sourceLayerId - Identifier of the target source-layer (e.g. 'building')
+           * @param {string} sourceId - Identifier of the target source (e.g. 'composite')
+           * @param {string=} sourceLayerId - Identifier of the target source-layer (e.g. 'building')
            */
           setSourceVisibility,
           /**

package/src/modules/offline/OfflineManager.ts

@@ -109,7 +109,7 @@ class OfflineManager {
    * @example
    * await OfflineManager.invalidatePack('packName')
    *
-   * @param  {String}  name  Name of the offline pack.
+   * @param  {string}  name  Name of the offline pack.
    * @return {void}
    */
   async invalidatePack(name: string): Promise<void> {
@@ -131,7 +131,7 @@ class OfflineManager {
    * @example
    * await OfflineManager.deletePack('packName')
    *
-   * @param  {String}  name  Name of the offline pack.
+   * @param  {string}  name  Name of the offline pack.
    * @return {void}
    */
   async deletePack(name: string): Promise<void> {
@@ -185,7 +185,7 @@ class OfflineManager {
    * @example
    * await OfflineManager.setMaximumAmbientCacheSize(5000000);
    *
-   * @param  {Number}  size  Size of ambient cache.
+   * @param  {number}  size  Size of ambient cache.
    * @return {void}
    */
   async setMaximumAmbientCacheSize(size: number): Promise<void> {
@@ -228,7 +228,7 @@ class OfflineManager {
    * @example
    * const offlinePack = await OfflineManager.getPack();
    *
-   * @param  {String}  name  Name of the offline pack.
+   * @param  {string}  name  Name of the offline pack.
    * @return {OfflinePack}
    */
   async getPack(name: string) {
@@ -242,7 +242,7 @@ class OfflineManager {
    * @example
    * await OfflineManager.mergeOfflineRegions(path);
    *
-   * @param {String} path Path to offline tile db on file system.
+   * @param {string} path Path to offline tile db on file system.
    * @return {void}
    */
   async mergeOfflineRegions(path: string): Promise<void> {
@@ -257,7 +257,7 @@ class OfflineManager {
    * @example
    * OfflineManager.setTileCountLimit(1000);
    *
-   * @param {Number} limit Map tile limit count.
+   * @param {number} limit Map tile limit count.
    * @return {void}
    */
   setTileCountLimit(limit: number): void {
@@ -271,7 +271,7 @@ class OfflineManager {
    * @example
    * OfflineManager.setProgressEventThrottle(500);
    *
-   * @param {Number} throttleValue event throttle value in ms.
+   * @param {number} throttleValue event throttle value in ms.
    * @return {void}
    */
   setProgressEventThrottle(throttleValue: number): void {
@@ -338,7 +338,7 @@ class OfflineManager {
    * @example
    * OfflineManager.unsubscribe('packName')
    *
-   * @param  {String} packName Name of the offline pack.
+   * @param  {string} packName Name of the offline pack.
    * @return {void}
    */
   unsubscribe(packName: string): void {

package/src/plugin/withMapLibre.ts

@@ -0,0 +1,181 @@
+import {
+  type ConfigPlugin,
+  createRunOncePlugin,
+  withDangerousMod,
+  withXcodeProject,
+  type XcodeProject,
+} from "@expo/config-plugins";
+import {
+  mergeContents,
+  removeGeneratedContents,
+} from "@expo/config-plugins/build/utils/generateCode";
+import { promises } from "node:fs";
+import path from "node:path";
+
+let pkg: { name: string; version?: string } = {
+  name: "@maplibre/maplibre-react-native",
+};
+try {
+  pkg = require("@maplibre/maplibre-react-native/package.json");
+} catch {
+  // empty catch block
+}
+
+type InstallerBlockName = "pre" | "post";
+
+/**
+ * Dangerously adds the custom installer hooks to the Podfile.
+ * In the future this should be removed in favor of some custom hooks provided by Expo autolinking.
+ *
+ * https://github.com/maplibre/maplibre-react-native/blob/main/docs/guides/setup/iOS.md
+ */
+const withCocoaPodsInstallerBlocks: ConfigPlugin = (c) => {
+  return withDangerousMod(c, [
+    "ios",
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    async (config) => {
+      const file = path.join(config.modRequest.platformProjectRoot, "Podfile");
+
+      const contents = await promises.readFile(file, "utf8");
+
+      await promises.writeFile(
+        file,
+        applyCocoaPodsModifications(contents),
+        "utf-8",
+      );
+
+      return config;
+    },
+  ]);
+};
+
+// Only the post-install block is required, the post installer block is
+// used for spm (swift package manager) which Expo doesn't currently support.
+export function applyCocoaPodsModifications(contents: string): string {
+  // Ensure installer blocks exist
+  let src = addInstallerBlock(contents, "post");
+  src = addMapLibreInstallerBlock(src, "post");
+
+  return src;
+}
+
+export function addInstallerBlock(
+  src: string,
+  blockName: InstallerBlockName,
+): string {
+  const matchBlock = new RegExp(`${blockName}_install do \\|installer\\|`);
+  const tag = `${blockName}_installer`;
+  for (const line of src.split("\n")) {
+    const contents = line.trim();
+    // Ignore comments
+    if (!contents.startsWith("#")) {
+      // Prevent adding the block if it exists outside of comments.
+      if (contents.match(matchBlock)) {
+        // This helps to still allow revisions, since we enabled the block previously.
+        // Only continue if the generated block exists...
+        const modified = removeGeneratedContents(src, tag);
+        if (!modified) {
+          return src;
+        }
+      }
+    }
+  }
+
+  return mergeContents({
+    tag,
+    src,
+    newSrc: [`  ${blockName}_install do |installer|`, "  end"].join("\n"),
+    anchor: /use_react_native/,
+    // We can't go after the use_react_native block because it might have parameters, causing it to be multi-line (see react-native template).
+    offset: 0,
+    comment: "#",
+  }).contents;
+}
+
+export function addMapLibreInstallerBlock(
+  src: string,
+  blockName: InstallerBlockName,
+): string {
+  return mergeContents({
+    tag: `@maplibre/maplibre-react-native-${blockName}_installer`,
+    src,
+    newSrc: `    $MLRN.${blockName}_install(installer)`,
+    anchor: new RegExp(`${blockName}_install do \\|installer\\|`),
+    offset: 1,
+    comment: "#",
+  }).contents;
+}
+
+/**
+ * Exclude building for arm64 on simulator devices in the pbxproj project.
+ * Without this, production builds targeting simulators will fail.
+ */
+export function setExcludedArchitectures(project: XcodeProject): XcodeProject {
+  const configurations = project.pbxXCBuildConfigurationSection();
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  for (const { name, buildSettings } of Object.values(configurations || {})) {
+    // Guessing that this is the best way to emulate Xcode.
+    // Using `project.addToBuildSettings` modifies too many targets.
+    if (
+      name === "Release" &&
+      typeof buildSettings?.PRODUCT_NAME !== "undefined"
+    ) {
+      buildSettings['"EXCLUDED_ARCHS[sdk=iphonesimulator*]"'] = '"arm64"';
+    }
+  }
+  return project;
+}
+
+const withoutSignatures: ConfigPlugin = (config) => {
+  const shellScript = `
+    echo "Remove signature files (Xcode workaround)";
+    rm -rf "$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature";
+  `;
+  return withXcodeProject(config, async (config) => {
+    const xcodeProject = config.modResults;
+    xcodeProject.addBuildPhase(
+      [],
+      "PBXShellScriptBuildPhase",
+      "Remove signature files (Xcode workaround)",
+      null,
+      {
+        shellPath: "/bin/sh",
+        shellScript,
+      },
+    );
+    return config;
+  });
+};
+
+/**
+ *  Set the Debug Information Format to DWARF with dSYM File during EAS Build for Managed App
+ *  https://github.com/expo/eas-cli/issues/968
+ *  // Set artifactPath in eas.json
+ *  "ios": {
+ *    "artifactPath": "ios/build/*"
+ *  }
+ */
+const withDwarfDsym: ConfigPlugin = (config) => {
+  return withXcodeProject(config, async (config) => {
+    const xcodeProject = config.modResults;
+    xcodeProject.debugInformationFormat = "dwarf-with-dsym";
+    return config;
+  });
+};
+
+const withExcludedSimulatorArchitectures: ConfigPlugin = (c) => {
+  return withXcodeProject(c, (config) => {
+    config.modResults = setExcludedArchitectures(config.modResults);
+    return config;
+  });
+};
+
+const withMapLibre: ConfigPlugin = (config) => {
+  config = withoutSignatures(
+    withDwarfDsym(withExcludedSimulatorArchitectures(config)),
+  );
+  return withCocoaPodsInstallerBlocks(config);
+};
+
+export default createRunOncePlugin(withMapLibre, pkg.name, pkg.version);

package/lib/typescript/commonjs/jest.config.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=jest.config.d.ts.map

package/lib/typescript/commonjs/jest.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"jest.config.d.ts","sourceRoot":"","sources":["../../../jest.config.ts"],"names":[],"mappings":""}

package/lib/typescript/module/jest.config.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=jest.config.d.ts.map

package/lib/typescript/module/jest.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"jest.config.d.ts","sourceRoot":"","sources":["../../../jest.config.ts"],"names":[],"mappings":""}