@maplibre/maplibre-react-native 10.0.0-alpha.8 → 10.0.0-beta.1

package/plugin/build/withMapLibre.js

@@ -3,16 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setExcludedArchitectures = exports.addMapLibreInstallerBlock = exports.addInstallerBlock = exports.applyCocoaPodsModifications = void 0;
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
+exports.applyCocoaPodsModifications = applyCocoaPodsModifications;
+exports.addInstallerBlock = addInstallerBlock;
+exports.addMapLibreInstallerBlock = addMapLibreInstallerBlock;
+exports.setExcludedArchitectures = setExcludedArchitectures;
 const config_plugins_1 = require("@expo/config-plugins");
 const generateCode_1 = require("@expo/config-plugins/build/utils/generateCode");
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
 let pkg = {
-    name: '@maplibre/maplibre-react-native',
+    name: "@maplibre/maplibre-react-native",
 };
 try {
-    pkg = require('@maplibre/maplibre-react-native/package.json');
+    pkg = require("@maplibre/maplibre-react-native/package.json");
 }
 catch {
     // empty catch block
@@ -25,14 +28,14 @@ catch {
  * @param config
  * @returns
  */
-const withCocoaPodsInstallerBlocks = c => {
+const withCocoaPodsInstallerBlocks = (c) => {
     return (0, config_plugins_1.withDangerousMod)(c, [
-        'ios',
+        "ios",
         // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
         async (config) => {
-            const file = path_1.default.join(config.modRequest.platformProjectRoot, 'Podfile');
-            const contents = await fs_1.promises.readFile(file, 'utf8');
-            await fs_1.promises.writeFile(file, applyCocoaPodsModifications(contents), 'utf-8');
+            const file = path_1.default.join(config.modRequest.platformProjectRoot, "Podfile");
+            const contents = await fs_1.promises.readFile(file, "utf8");
+            await fs_1.promises.writeFile(file, applyCocoaPodsModifications(contents), "utf-8");
             return config;
         },
     ]);
@@ -42,19 +45,18 @@ const withCocoaPodsInstallerBlocks = c => {
 function applyCocoaPodsModifications(contents) {
     // Ensure installer blocks exist
     // let src = addInstallerBlock(contents, 'pre');
-    let src = addInstallerBlock(contents, 'post');
+    let src = addInstallerBlock(contents, "post");
     // src = addMapLibreInstallerBlock(src, 'pre');
-    src = addMapLibreInstallerBlock(src, 'post');
+    src = addMapLibreInstallerBlock(src, "post");
     return src;
 }
-exports.applyCocoaPodsModifications = applyCocoaPodsModifications;
 function addInstallerBlock(src, blockName) {
     const matchBlock = new RegExp(`${blockName}_install do \\|installer\\|`);
     const tag = `${blockName}_installer`;
-    for (const line of src.split('\n')) {
+    for (const line of src.split("\n")) {
         const contents = line.trim();
         // Ignore comments
-        if (!contents.startsWith('#')) {
+        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.
@@ -69,25 +71,23 @@ function addInstallerBlock(src, blockName) {
     return (0, generateCode_1.mergeContents)({
         tag,
         src,
-        newSrc: [`  ${blockName}_install do |installer|`, '  end'].join('\n'),
+        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: '#',
+        comment: "#",
     }).contents;
 }
-exports.addInstallerBlock = addInstallerBlock;
 function addMapLibreInstallerBlock(src, blockName) {
     return (0, generateCode_1.mergeContents)({
         tag: `@maplibre/maplibre-react-native-${blockName}_installer`,
         src,
-        newSrc: `    $RCTMLN.${blockName}_install(installer)`,
+        newSrc: `    $MLRN.${blockName}_install(installer)`,
         anchor: new RegExp(`${blockName}_install do \\|installer\\|`),
         offset: 1,
-        comment: '#',
+        comment: "#",
     }).contents;
 }
-exports.addMapLibreInstallerBlock = addMapLibreInstallerBlock;
 /**
  * Exclude building for arm64 on simulator devices in the pbxproj project.
  * Without this, production builds targeting simulators will fail.
@@ -99,36 +99,50 @@ function setExcludedArchitectures(project) {
     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') {
+        if (name === "Release" &&
+            typeof buildSettings?.PRODUCT_NAME !== "undefined") {
             buildSettings['"EXCLUDED_ARCHS[sdk=iphonesimulator*]"'] = '"arm64"';
         }
     }
     return project;
 }
-exports.setExcludedArchitectures = setExcludedArchitectures;
-const withoutSignatures = config => {
-    const shellScript = `if [ "$XCODE_VERSION_MAJOR" = "1500" ]; then
-    echo "Remove signature files (Xcode 15 workaround)";
+const withoutSignatures = (config) => {
+    const shellScript = `
+    echo "Remove signature files (Xcode workaround)";
     rm -rf "$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature";
-  fi`;
+  `;
     return (0, config_plugins_1.withXcodeProject)(config, async (config) => {
         const xcodeProject = config.modResults;
-        xcodeProject.addBuildPhase([], 'PBXShellScriptBuildPhase', 'Remove signature files (Xcode 15 workaround)', null, {
-            shellPath: '/bin/sh',
+        xcodeProject.addBuildPhase([], "PBXShellScriptBuildPhase", "Remove signature files (Xcode workaround)", null, {
+            shellPath: "/bin/sh",
             shellScript,
         });
         return config;
     });
 };
-const withExcludedSimulatorArchitectures = c => {
-    return (0, config_plugins_1.withXcodeProject)(c, 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 = (config) => {
+    return (0, config_plugins_1.withXcodeProject)(config, async (config) => {
+        const xcodeProject = config.modResults;
+        xcodeProject.debugInformationFormat = "dwarf-with-dsym";
+        return config;
+    });
+};
+const withExcludedSimulatorArchitectures = (c) => {
+    return (0, config_plugins_1.withXcodeProject)(c, (config) => {
         config.modResults = setExcludedArchitectures(config.modResults);
         return config;
     });
 };
-const withMapLibre = config => {
-    config = withoutSignatures(withExcludedSimulatorArchitectures(config));
+const withMapLibre = (config) => {
+    config = withoutSignatures(withDwarfDsym(withExcludedSimulatorArchitectures(config)));
     return withCocoaPodsInstallerBlocks(config);
 };
 exports.default = (0, config_plugins_1.createRunOncePlugin)(withMapLibre, pkg.name, pkg.version);

package/src/MLRNModule.ts

@@ -0,0 +1,46 @@
+import { NativeModules } from "react-native";
+
+import { CameraMode } from "./types/CameraMode";
+
+interface IMLRNModule {
+  CameraModes: {
+    Flight: CameraMode.Flight;
+    Ease: CameraMode.Ease;
+    Linear: CameraMode.Linear;
+    None: CameraMode.None;
+  };
+  StyleURL: {
+    Default: URL;
+  };
+  OfflinePackDownloadState: {
+    Inactive: string | number;
+    Active: string | number;
+    Complete: string | number;
+    Unknown?: string | number;
+  };
+  LineJoin: {
+    Bevel: string | number;
+    Round: string | number;
+    Miter: string | number;
+  };
+  StyleSource: {
+    DefaultSourceID: string;
+  };
+
+  setAccessToken(accessToken: string | null): Promise<string | null>;
+  getAccessToken(): Promise<string>;
+  setConnected(connected: boolean): void;
+}
+
+const MLRNModule: IMLRNModule = Object.create(NativeModules.MLRNModule);
+
+export const {
+  CameraModes,
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  setAccessToken,
+  getAccessToken,
+  setConnected,
+} = MLRNModule;

package/src/MapLibreRN.ts

@@ -0,0 +1,70 @@
+import { UserTrackingMode } from "./components/Camera";
+
+export * from "./MLRNModule";
+export {
+  default as 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 type { PointAnnotationRef } from "./components/PointAnnotation";
+export { default as Annotation } from "./components/Annotation";
+export { default as Callout } from "./components/Callout";
+export { requestAndroidLocationPermissions } from "./requestAndroidLocationPermissions";
+export {
+  default as 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 type { ShapeSourceRef } from "./components/ShapeSource";
+export { default as RasterSource } from "./components/RasterSource";
+export { default as ImageSource } from "./components/ImageSource";
+export { default as Images } from "./components/Images";
+export { default as FillLayer } from "./components/FillLayer";
+export { default as FillExtrusionLayer } from "./components/FillExtrusionLayer";
+export { default as HeatmapLayer } from "./components/HeatmapLayer";
+export { default as LineLayer } from "./components/LineLayer";
+export { default as CircleLayer } from "./components/CircleLayer";
+export { default as SymbolLayer } from "./components/SymbolLayer";
+export { default as RasterLayer } from "./components/RasterLayer";
+export { default as BackgroundLayer } from "./components/BackgroundLayer";
+export {
+  default as locationManager,
+  type Location,
+} from "./modules/location/locationManager";
+export { default as offlineManager } from "./modules/offline/offlineManager";
+export type {
+  OfflineProgressStatus,
+  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 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 {
+  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";
+
+/** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
+export const UserTrackingModes = UserTrackingMode;

package/src/assets/png.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const content: number;
+  export default content;
+}

package/src/components/Annotation.tsx

@@ -0,0 +1,164 @@
+import {
+  forwardRef,
+  type ReactElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+import { Animated as RNAnimated, Easing } from "react-native";
+
+import SymbolLayer from "./SymbolLayer";
+import { type OnPressEvent } from "../types/OnPressEvent";
+import { type SymbolLayerStyleProps } from "../utils/MapLibreRNStyles";
+import { AnimatedShapeSource } from "../utils/animated/Animated";
+import AnimatedMapPoint from "../utils/animated/AnimatedPoint";
+
+interface AnnotationProps {
+  id: string;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?(x: number): number;
+  coordinates?: number[];
+  onPress?(event: OnPressEvent): void;
+  children?: ReactElement | ReactElement[];
+  style?: object;
+  icon?: string | number | object;
+}
+
+type Shape = AnimatedMapPoint | GeoJSON.Point;
+
+function getShapeFromProps(props: Partial<AnnotationProps> = {}): Shape {
+  const lng = props.coordinates?.[0] || 0;
+  const lat = props.coordinates?.[1] || 0;
+  const point: GeoJSON.Point = { type: "Point", coordinates: [lng, lat] };
+
+  if (props.animated) {
+    return new AnimatedMapPoint(point);
+  }
+
+  return point;
+}
+
+function isShapeAnimated(shape: Shape): shape is AnimatedMapPoint {
+  return shape instanceof AnimatedMapPoint;
+}
+
+interface AnnotationRef {
+  onPress(event: OnPressEvent): void;
+  symbolStyle: SymbolLayerStyleProps | undefined;
+}
+
+const Annotation = forwardRef<AnnotationRef, AnnotationProps>(
+  (
+    {
+      animated = false,
+      animationDuration = 1000,
+      animationEasingFunction = Easing.linear,
+      ...otherProps
+    }: AnnotationProps,
+    ref,
+  ) => {
+    const props = {
+      ...otherProps,
+      animated,
+      animationDuration,
+      animationEasingFunction,
+    };
+
+    useImperativeHandle(
+      ref,
+      (): AnnotationRef => ({
+        onPress,
+        symbolStyle,
+      }),
+    );
+
+    const [shape, setShape] = useState<Shape | null>(getShapeFromProps(props));
+
+    // this will run useEffect only when actual coordinates values change
+    const coordinateDeps = props.coordinates?.join(",");
+
+    useEffect(() => {
+      if (!Array.isArray(props.coordinates)) {
+        setShape(null);
+        return;
+      }
+
+      if (shape && isShapeAnimated(shape)) {
+        shape.stopAnimation();
+
+        shape
+          .timing({
+            coordinates: props.coordinates,
+            easing: animationEasingFunction,
+            duration: animationDuration,
+          })
+          .start();
+
+        return;
+      }
+
+      if (!shape || !isShapeAnimated(shape)) {
+        const newShape = getShapeFromProps(props);
+        setShape(newShape);
+      }
+    }, [coordinateDeps]);
+
+    const onPressProp = props.onPress;
+
+    const _onPress = useCallback(
+      (event: OnPressEvent) => {
+        if (onPressProp) {
+          onPressProp(event);
+        }
+      },
+      [onPressProp],
+    );
+
+    // This function is needed to correctly generate Annotation.md doc
+    function onPress(event: OnPressEvent): void {
+      _onPress(event);
+    }
+
+    if (!props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+    const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
+      ? {
+          ...props.style,
+          iconImage: typeof props.icon === "string" ? props.icon : undefined,
+        }
+      : undefined;
+
+    if (symbolStyle) {
+      children.push(
+        <SymbolLayer id={`${props.id}-symbol`} style={symbolStyle} />,
+      );
+    }
+
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        children.push(...props.children);
+      } else {
+        children.push(props.children);
+      }
+    }
+
+    return (
+      <AnimatedShapeSource
+        id={props.id}
+        onPress={_onPress}
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
+        {children}
+      </AnimatedShapeSource>
+    );
+  },
+);
+
+Annotation.displayName = "Annotation";
+
+export default Annotation;

package/src/components/BackgroundLayer.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractLayer, {
+  type BaseLayerProps,
+  type NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import { type BaseProps } from "../types/BaseProps";
+import { type BackgroundLayerStyleProps } from "../utils/MapLibreRNStyles";
+
+const MapLibreRN = NativeModules.MLRNModule;
+
+export const NATIVE_MODULE_NAME = "MLRNBackgroundLayer";
+
+export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: BackgroundLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<BackgroundLayerProps, "style">,
+    NativeBaseProps {}
+
+const MLRNBackgroundLayer =
+  requireNativeComponent<BackgroundLayerProps>(NATIVE_MODULE_NAME);
+
+const BackgroundLayer: React.FC<BackgroundLayerProps> = ({
+  sourceID = MapLibreRN.StyleSource.DefaultSourceID,
+  ...props
+}: BackgroundLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    BackgroundLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return (
+    <MLRNBackgroundLayer
+      testID="mlrnBackgroundLayer"
+      ref={setNativeLayer}
+      {...baseProps}
+    />
+  );
+};
+
+export default BackgroundLayer;

package/src/components/Callout.tsx

@@ -0,0 +1,141 @@
+import { Children, type ReactElement } from "react";
+import {
+  View,
+  Text,
+  Animated,
+  requireNativeComponent,
+  StyleSheet,
+  type ViewStyle,
+  type ViewProps,
+  type StyleProp,
+} from "react-native";
+
+export const NATIVE_MODULE_NAME = "MLRNCallout";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 180,
+    zIndex: 9999999,
+  },
+  content: {
+    backgroundColor: "white",
+    borderColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: 3,
+    borderWidth: 1,
+    flex: 1,
+    padding: 8,
+    position: "relative",
+  },
+  tip: {
+    backgroundColor: "transparent",
+    borderBottomColor: "transparent",
+    borderBottomWidth: 0,
+    borderLeftColor: "transparent",
+    borderLeftWidth: 8,
+    borderRightColor: "transparent",
+    borderRightWidth: 8,
+    borderTopColor: "white",
+    borderTopWidth: 16,
+    elevation: 0,
+    marginTop: -2,
+    zIndex: 1000,
+  },
+  title: {
+    color: "black",
+    textAlign: "center",
+  },
+});
+
+interface CalloutProps extends Omit<ViewProps, "style"> {
+  /**
+   * String that get's displayed in the default callout.
+   */
+  title?: string;
+  /**
+   * Style property for the Animated.View wrapper, apply animations to this
+   */
+  style?: ViewStyle;
+  /**
+   * Style property for the native MLRNCallout container, set at your own risk.
+   */
+  containerStyle?: ViewStyle;
+  /**
+   * Style property for the content bubble.
+   */
+  contentStyle?: ViewStyle;
+  /**
+   * Style property for the triangle tip under the content.
+   */
+  tipStyle?: ViewStyle;
+  /**
+   * Style property for the title in the content bubble.
+   */
+  textStyle?: ViewStyle;
+}
+
+interface NativeProps extends Omit<CalloutProps, "style"> {
+  style: StyleProp<ViewStyle>;
+}
+
+/**
+ *  Callout that displays information about a selected annotation near the annotation.
+ */
+const Callout = (props: CalloutProps): ReactElement => {
+  const {
+    title,
+    style,
+    containerStyle,
+    contentStyle,
+    tipStyle,
+    textStyle,
+    children,
+  } = props;
+
+  const _containerStyle: ViewStyle[] = [
+    {
+      position: "absolute",
+      zIndex: 999,
+      backgroundColor: "transparent",
+      ...containerStyle,
+    } as ViewStyle,
+  ];
+
+  const _hasChildren = Children.count(children) > 0;
+
+  const _renderDefaultCallout = (): ReactElement => {
+    return (
+      <Animated.View testID="container" style={[styles.container, style]}>
+        <View testID="wrapper" style={[styles.content, contentStyle]}>
+          <Text testID="title" style={[styles.title, textStyle]}>
+            {title}
+          </Text>
+        </View>
+        <View testID="tip" style={[styles.tip, tipStyle]} />
+      </Animated.View>
+    );
+  };
+
+  const _renderCustomCallout = (): ReactElement => {
+    return (
+      <Animated.View testID="container" {...props} style={style}>
+        {children}
+      </Animated.View>
+    );
+  };
+
+  const calloutContent = _hasChildren
+    ? _renderCustomCallout()
+    : _renderDefaultCallout();
+
+  return (
+    <MLRNCallout testID="callout" style={_containerStyle}>
+      {calloutContent}
+    </MLRNCallout>
+  );
+};
+
+const MLRNCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default Callout;