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

package/ios/install.md

@@ -26,7 +26,7 @@ You are good to go!
 
 ## Note on iOS Simulator issues
 
-MapLibre GL Native has some issues on iOS Simulators in many
+MapLibre Native has some issues on iOS Simulators in many
 environments. The map either does not render at all or appears garbled when panning and zooming.
 It is best to test on a real device if at all possible at this time
 until this is fixed upstream. iOS devs can open the workspace in Xcode and run from there.

package/javascript/components/Camera.tsx

@@ -1,18 +1,18 @@
+import { point } from "@turf/helpers";
 import React, {
   memo,
   RefObject,
+  useCallback,
   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";
+import { makeNativeBounds } from "../utils/makeNativeBounds";
 
 const MapLibreGL = NativeModules.MLNModule;
 
@@ -165,7 +165,7 @@ interface CameraProps extends Omit<ViewProps, "style">, CameraStop {
   followUserLocation?: boolean;
 
   /**
-   * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapLibreGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](../example/src/examples/Camera/SetUserTrackingModes.js)
+   * The mode used to track the user location on the map. One of; "normal", "compass", "course". Each mode string is also available as a member on the `MapLibreGL.UserTrackingModes` object. `Follow` (normal), `FollowWithHeading` (compass), `FollowWithCourse` (course). NOTE: `followUserLocation` must be set to `true` for any of the modes to take effect. [Example](/packages/examples/src/examples/Camera/SetUserTrackingModes.js)
    */
   followUserMode?: UserTrackingMode;
 
@@ -334,14 +334,14 @@ const Camera = memo(
           };
 
           if (config.centerCoordinate) {
-            stopConfig.centerCoordinate = toJSONString(
-              geoUtils.makePoint(config.centerCoordinate),
+            stopConfig.centerCoordinate = JSON.stringify(
+              point(config.centerCoordinate),
             );
           }
 
           if (config.bounds && config.bounds.ne && config.bounds.sw) {
             const { ne, sw } = config.bounds;
-            stopConfig.bounds = toJSONString(geoUtils.makeLatLngBounds(ne, sw));
+            stopConfig.bounds = makeNativeBounds(ne, sw);
           }
 
           return stopConfig;
@@ -377,7 +377,7 @@ const Camera = memo(
         if (!bounds || !bounds.ne || !bounds.sw) {
           return null;
         }
-        return toJSONString(geoUtils.makeLatLngBounds(bounds.ne, bounds.sw));
+        return makeNativeBounds(bounds.ne, bounds.sw);
       }, [props.maxBounds]);
 
       useEffect(() => {

package/javascript/components/MapView.tsx

@@ -33,7 +33,7 @@ import { getFilter } from "../utils/filterUtils";
 const MapLibreGL = NativeModules.MLNModule;
 if (MapLibreGL == null) {
   console.error(
-    "Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.",
+    "Native module of @maplibre/maplibre-react-native library was not registered properly, please consult the docs: https://github.com/maplibre/maplibre-react-native",
   );
 }
 
@@ -281,9 +281,8 @@ export interface MapViewRef {
 }
 
 /**
- * MapView backed by MapLibre GL Native
+ * MapView backed by MapLibre Native
  */
-
 const MapView = memo(
   React.forwardRef<MapViewRef, MapViewProps>(
     (
@@ -760,7 +759,7 @@ const MapView = memo(
       };
 
       const contentInsetValue = useMemo(() => {
-        if (!props.contentInset) {
+        if (props.contentInset === undefined) {
           return;
         }
 
@@ -812,7 +811,7 @@ const MapView = memo(
           surfaceView,
           regionWillChangeDebounceTime,
           regionDidChangeDebounceTime,
-          contentInsetValue,
+          contentInset: contentInsetValue,
           style: styles.matchParent,
         };
       }, [
@@ -825,7 +824,6 @@ const MapView = memo(
         surfaceView,
         regionWillChangeDebounceTime,
         regionDidChangeDebounceTime,
-        contentInsetValue,
         props,
         contentInsetValue,
       ]);

package/javascript/components/MarkerView.tsx

@@ -1,9 +1,9 @@
+import { point } from "@turf/helpers";
 import React, { ReactElement, useMemo } from "react";
 import { Platform, requireNativeComponent, ViewProps } from "react-native";
 
 import PointAnnotation from "./PointAnnotation";
 import { toJSONString } from "../utils";
-import { makePoint } from "../utils/geoUtils";
 
 export const NATIVE_MODULE_NAME = "RCTMLNMarkerView";
 
@@ -61,7 +61,7 @@ const MarkerView = ({
 }: MarkerViewProps): ReactElement => {
   const props = { anchor, allowOverlap, isSelected, ...rest };
   const coordinate = props.coordinate
-    ? toJSONString(makePoint(props.coordinate))
+    ? toJSONString(point(props.coordinate))
     : undefined;
 
   const idForPointAnnotation = useMemo(() => {

package/javascript/components/PointAnnotation.tsx

@@ -1,3 +1,4 @@
+import { point } from "@turf/helpers";
 import React, {
   Component,
   SyntheticEvent,
@@ -15,7 +16,6 @@ import {
 
 import useNativeBridge, { RNMLEvent } from "../hooks/useNativeBridge";
 import { isFunction, toJSONString } from "../utils";
-import { makePoint } from "../utils/geoUtils";
 
 export const NATIVE_MODULE_NAME = "RCTMLNPointAnnotation";
 
@@ -200,7 +200,7 @@ const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
       if (!props.coordinate) {
         return undefined;
       }
-      return toJSONString(makePoint(props.coordinate));
+      return toJSONString(point(props.coordinate));
     }
 
     const _setNativeRef = (nativeRef: Component<NativeProps> | null): void => {

package/javascript/components/ShapeSource.tsx

@@ -1,4 +1,3 @@
-import { Feature, FeatureCollection } from "@turf/helpers";
 import React, {
   Component,
   ReactElement,
@@ -137,14 +136,16 @@ export interface ShapeSourceProps extends BaseProps {
 }
 
 export interface ShapeSourceRef {
-  features(filter?: FilterExpression): Promise<FeatureCollection>;
-  getClusterExpansionZoom(feature: Feature): Promise<number>;
+  features(filter?: FilterExpression): Promise<GeoJSON.FeatureCollection>;
+  getClusterExpansionZoom(feature: GeoJSON.Feature): Promise<number>;
   getClusterLeaves(
-    feature: Feature,
+    feature: GeoJSON.Feature,
     limit: number,
     offset: number,
-  ): Promise<FeatureCollection>;
-  getClusterChildren(feature: Feature): Promise<FeatureCollection>;
+  ): Promise<GeoJSON.FeatureCollection>;
+  getClusterChildren(
+    feature: GeoJSON.Feature,
+  ): Promise<GeoJSON.FeatureCollection>;
   setNativeProps: (props: NativeProps) => void;
   onPress: (event: NativeSyntheticEvent<{ payload: OnPressEvent }>) => void;
 
@@ -176,7 +177,7 @@ const ShapeSource = memo(
            * shapeSource.features()
            *
            * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-           * @return {FeatureCollection}
+           * @return {GeoJSON.FeatureCollection}
            */
           features,
           /**
@@ -185,7 +186,7 @@ const ShapeSource = memo(
            * @example
            * const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
            *
-           * @param  {Feature} feature - The feature cluster to expand.
+           * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
            * @return {number}
            */
           getClusterExpansionZoom,
@@ -195,10 +196,10 @@ const ShapeSource = memo(
            * @example
            * const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
            *
-           * @param  {Feature} feature - The feature cluster to expand.
+           * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
            * @param  {number} limit - The number of points to return.
            * @param  {number} offset - The amount of points to skip (for pagination).
-           * @return {FeatureCollection}
+           * @return {GeoJSON.FeatureCollection}
            */
           getClusterLeaves,
           /**
@@ -207,8 +208,8 @@ const ShapeSource = memo(
            * @example
            * const collection = await shapeSource.getClusterChildren(clusterId);
            *
-           * @param  {Feature} feature - The feature cluster to expand.
-           * @return {FeatureCollection}
+           * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
+           * @return {GeoJSON.FeatureCollection}
            */
           getClusterChildren,
           setNativeProps,
@@ -232,8 +233,8 @@ const ShapeSource = memo(
 
       async function features(
         filter?: FilterExpression,
-      ): Promise<FeatureCollection> {
-        const res: { data: string | FeatureCollection } =
+      ): Promise<GeoJSON.FeatureCollection> {
+        const res: { data: string | GeoJSON.FeatureCollection } =
           await _runNativeCommand("features", _nativeRef.current, [
             getFilter(filter),
           ]);
@@ -242,11 +243,11 @@ const ShapeSource = memo(
           return JSON.parse(res.data as string);
         }
 
-        return res.data as FeatureCollection;
+        return res.data as GeoJSON.FeatureCollection;
       }
 
       async function getClusterExpansionZoom(
-        feature: Feature,
+        feature: GeoJSON.Feature,
       ): Promise<number> {
         if (typeof feature === "number") {
           console.warn(
@@ -269,15 +270,15 @@ const ShapeSource = memo(
       }
 
       async function getClusterLeaves(
-        feature: Feature,
+        feature: GeoJSON.Feature,
         limit: number,
         offset: number,
-      ): Promise<FeatureCollection> {
+      ): Promise<GeoJSON.FeatureCollection> {
         if (typeof feature === "number") {
           console.warn(
             "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: { data: string | FeatureCollection } =
+          const res: { data: string | GeoJSON.FeatureCollection } =
             await _runNativeCommand(
               "getClusterLeavesById",
               _nativeRef.current,
@@ -288,10 +289,10 @@ const ShapeSource = memo(
             return JSON.parse(res.data as string);
           }
 
-          return res.data as FeatureCollection;
+          return res.data as GeoJSON.FeatureCollection;
         }
 
-        const res: { data: string | FeatureCollection } =
+        const res: { data: string | GeoJSON.FeatureCollection } =
           await _runNativeCommand("getClusterLeaves", _nativeRef.current, [
             JSON.stringify(feature),
             limit,
@@ -302,17 +303,17 @@ const ShapeSource = memo(
           return JSON.parse(res.data as string);
         }
 
-        return res.data as FeatureCollection;
+        return res.data as GeoJSON.FeatureCollection;
       }
 
       async function getClusterChildren(
-        feature: Feature,
-      ): Promise<FeatureCollection> {
+        feature: GeoJSON.Feature,
+      ): Promise<GeoJSON.FeatureCollection> {
         if (typeof feature === "number") {
           console.warn(
             "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: { data: string | FeatureCollection } =
+          const res: { data: string | GeoJSON.FeatureCollection } =
             await _runNativeCommand(
               "getClusterChildrenById",
               _nativeRef.current,
@@ -323,10 +324,10 @@ const ShapeSource = memo(
             return JSON.parse(res.data as string);
           }
 
-          return res.data as FeatureCollection;
+          return res.data as GeoJSON.FeatureCollection;
         }
 
-        const res: { data: string | FeatureCollection } =
+        const res: { data: string | GeoJSON.FeatureCollection } =
           await _runNativeCommand("getClusterChildren", _nativeRef.current, [
             JSON.stringify(feature),
           ]);
@@ -335,7 +336,7 @@ const ShapeSource = memo(
           return JSON.parse(res.data as string);
         }
 
-        return res.data as FeatureCollection;
+        return res.data as GeoJSON.FeatureCollection;
       }
 
       function setNativeProps(nativeProps: NativeProps): void {

package/javascript/components/Style.tsx

@@ -281,7 +281,7 @@ function asSourceComponent(
       return getShapeSource(id, source);
   }
 
-  console.warn(`Maplibre source type '${source.type}' is not supported`);
+  console.warn(`MapLibre source type '${source.type}' is not supported`);
 
   return null;
 }

package/javascript/modules/offline/OfflineCreatePackOptions.ts

@@ -1,5 +1,4 @@
-import { toJSONString } from "../../utils";
-import { makeLatLngBounds } from "../../utils/geoUtils";
+import { makeNativeBounds } from "../../utils/makeNativeBounds";
 
 export interface OfflineCreatePackInputOptions {
   name: string;
@@ -23,7 +22,7 @@ class OfflineCreatePackOptions {
 
     this.name = options.name;
     this.styleURL = options.styleURL;
-    this.bounds = this._makeLatLngBounds(options.bounds);
+    this.bounds = makeNativeBounds(...options.bounds);
     this.minZoom = options.minZoom;
     this.maxZoom = options.maxZoom;
     this.metadata = this._makeMetadata(options.metadata);
@@ -45,12 +44,6 @@ class OfflineCreatePackOptions {
     }
   }
 
-  _makeLatLngBounds(bounds: [GeoJSON.Position, GeoJSON.Position]): string {
-    const ne = bounds[0];
-    const sw = bounds[1];
-    return toJSONString(makeLatLngBounds(ne, sw));
-  }
-
   _makeMetadata(metadata?: Record<string, any>): string {
     return JSON.stringify({
       ...metadata,

package/javascript/modules/snapshot/SnapshotOptions.ts

@@ -1,7 +1,7 @@
+import { featureCollection, point } from "@turf/helpers";
 import { NativeModules } from "react-native";
 
 import { toJSONString } from "../../utils";
-import { makePoint, makeFeatureCollection } from "../../utils/geoUtils";
 
 const MapLibreGL = NativeModules.MLNModule;
 
@@ -86,18 +86,17 @@ export class SnapshotOptions {
   }
 
   _createCenterCoordPoint(centerCoordinate: GeoJSON.Position): string {
-    const point = makePoint(centerCoordinate);
-    return toJSONString(point);
+    return toJSONString(point(centerCoordinate));
   }
 
   _createBoundsCollection(bounds: GeoJSON.Position[]): string {
     const features = [];
 
     for (const bound of bounds) {
-      features.push(makePoint(bound));
+      features.push(point(bound));
     }
 
-    return toJSONString(makeFeatureCollection(features));
+    return toJSONString(featureCollection(features));
   }
 }
 

package/javascript/utils/StyleValue.ts

@@ -28,7 +28,9 @@ export function transformStyle(
     if (styleType === "color" && typeof rawStyle === "string") {
       const color = processColor(rawStyle);
       if (color === null || color === undefined || typeof color === "symbol") {
-        console.error(`RNMaplibre: Invalid color value: ${rawStyle} using red`);
+        console.error(
+          `@maplibre/maplibre-react-native: Invalid color value ${rawStyle}, using #ff0000 (red) instead`,
+        );
         rawStyle = "ff0000";
       } else {
         rawStyle = color;

package/javascript/utils/makeNativeBounds.ts

@@ -0,0 +1,5 @@
+import { featureCollection, point } from "@turf/helpers";
+
+export function makeNativeBounds(ne: GeoJSON.Position, sw: GeoJSON.Position) {
+  return JSON.stringify(featureCollection([point(ne), point(sw)]));
+}

package/jest-setup.ts

@@ -0,0 +1,113 @@
+/* eslint-disable no-undef, import/no-extraneous-dependencies */
+import "@testing-library/react-native/extend-expect";
+import { NativeModules } from "react-native";
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+
+function keyMirror(keys: string[]) {
+  const obj: Record<string, string> = {};
+  keys.forEach((key) => (obj[key] = key));
+  return obj;
+}
+
+// Mock of what the native code puts on the JS object
+NativeModules.MLNModule = {
+  // constants
+  UserTrackingModes: keyMirror([
+    "None",
+    "Follow",
+    "FollowWithCourse",
+    "FollowWithHeading",
+  ]),
+  StyleURL: keyMirror(["Default"]),
+  EventTypes: keyMirror([
+    "MapClick",
+    "MapLongClick",
+    "RegionWillChange",
+    "RegionIsChanging",
+    "RegionDidChange",
+    "WillStartLoadingMap",
+    "DidFinishLoadingMap",
+    "DidFailLoadingMap",
+    "WillStartRenderingFrame",
+    "DidFinishRenderingFrame",
+    "DidFinishRenderingFrameFully",
+    "DidFinishLoadingStyle",
+    "SetCameraComplete",
+  ]),
+  CameraModes: keyMirror(["Flight", "Ease", "None"]),
+  StyleSource: keyMirror(["DefaultSourceID"]),
+  InterpolationMode: keyMirror([
+    "Exponential",
+    "Categorical",
+    "Interval",
+    "Identity",
+  ]),
+  LineJoin: keyMirror(["Bevel", "Round", "Miter"]),
+  LineCap: keyMirror(["Butt", "Round", "Square"]),
+  LineTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  CirclePitchScale: keyMirror(["Map", "Viewport"]),
+  CircleTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  FillExtrusionTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  FillTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  IconRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  IconTextFit: keyMirror(["None", "Width", "Height", "Both"]),
+  IconTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  SymbolPlacement: keyMirror(["Line", "Point"]),
+  TextAnchor: keyMirror([
+    "Center",
+    "Left",
+    "Right",
+    "Top",
+    "Bottom",
+    "TopLeft",
+    "TopRight",
+    "BottomLeft",
+    "BottomRight",
+  ]),
+  TextJustify: keyMirror(["Center", "Left", "Right"]),
+  TextPitchAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  TextRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  TextTransform: keyMirror(["None", "Lowercase", "Uppercase"]),
+  TextTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  LightAnchor: keyMirror(["Map", "Viewport"]),
+  OfflinePackDownloadState: keyMirror(["Inactive", "Active", "Complete"]),
+  OfflineCallbackName: keyMirror(["Progress", "Error"]),
+
+  // methods
+  setAccessToken: jest.fn(),
+  getAccessToken: () => Promise.resolve("test-token"),
+  setConnected: jest.fn(),
+};
+
+NativeModules.MLNOfflineModule = {
+  createPack: (packOptions: any) => {
+    return Promise.resolve({
+      bounds: packOptions.bounds,
+      metadata: JSON.stringify({ name: packOptions.name }),
+    });
+  },
+  getPacks: () => Promise.resolve([]),
+  deletePack: () => Promise.resolve(),
+  getPackStatus: () => Promise.resolve({}),
+  pausePackDownload: () => Promise.resolve(),
+  resumePackDownload: () => Promise.resolve(),
+  setPackObserver: () => Promise.resolve(),
+  setTileCountLimit: jest.fn(),
+  setProgressEventThrottle: jest.fn(),
+};
+
+NativeModules.MLNSnapshotModule = {
+  takeSnap: () => {
+    return Promise.resolve("file://test.png");
+  },
+};
+
+NativeModules.MLNLocationModule = {
+  getLastKnownLocation: jest.fn(),
+  setMinDisplacement: jest.fn(),
+  start: jest.fn(),
+  stop: jest.fn(),
+  pause: jest.fn(),
+};

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  preset: "@testing-library/react-native",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+  setupFilesAfterEnv: ["./jest-setup.ts"],
+  setupFiles: ["./__tests__/__mocks__/react-native.mock.js"],
+  modulePathIgnorePatterns: ["__tests__/__mocks__", "fixtures"],
+  collectCoverageFrom: ["javascript/**/*.{ts,tsx,js,jsx}"],
+};

package/maplibre-react-native.podspec

@@ -61,14 +61,14 @@ def $RCTMLN.post_install(installer)
 end
 
 Pod::Spec.new do |s|
-  s.name		= "maplibre-react-native"
-  s.summary		= "React Native Component for Maplibre Native"
+  s.name		  = "maplibre-react-native"
+  s.summary		= "React Native library for creating maps with MapLibre Native"
   s.version		= package['version']
-  s.authors		= { "Ian Wagner" => "ian.wagner@stadiamaps.com" }  # TODO: MapLibre email?
-  s.homepage    	= "https://github.com/maplibre/maplibre-react-native"
-  s.source      	= { :git => "https://github.com/maplibre/maplibre-react-native.git" }
-  s.license     	= "MIT"
-  s.platform    	= :ios, "8.0"
+  s.authors   = { "MapLibre" => "" }
+  s.homepage  = "https://github.com/maplibre/maplibre-react-native"
+  s.source    = { :git => "https://github.com/maplibre/maplibre-react-native.git" }
+  s.license   = "MIT"
+  s.platform  = :ios, "8.0"
 
   s.dependency 'React-Core'
   s.dependency 'React'