@maplibre/maplibre-react-native 10.0.0-alpha.9 → 10.0.0-beta.2

package/src/utils/StyleValue.ts

@@ -0,0 +1,51 @@
+import { Image, processColor } from "react-native";
+
+import BridgeValue, {
+  type RawValueType,
+  type StyleValueJSON,
+} from "./BridgeValue";
+import { type AllLayerStyleProps } from "./MapLibreRNStyles";
+import { getStyleType } from "./styleMap";
+
+export type StyleValue = {
+  styletype: string;
+  stylevalue: StyleValueJSON;
+};
+
+export function transformStyle(
+  style: AllLayerStyleProps | undefined,
+): undefined | { [key: string]: StyleValue } {
+  if (!style) {
+    return undefined;
+  }
+
+  const nativeStyle: { [key: string]: StyleValue } = {};
+  const styleProps = Object.keys(style) as (keyof typeof style)[];
+  for (const styleProp of styleProps) {
+    const styleType = getStyleType(styleProp);
+    let rawStyle: RawValueType | undefined = style[styleProp];
+
+    if (styleType === "color" && typeof rawStyle === "string") {
+      const color = processColor(rawStyle);
+      if (color === null || color === undefined || typeof color === "symbol") {
+        console.error(
+          `@maplibre/maplibre-react-native: Invalid color value ${rawStyle}, using #ff0000 (red) instead`,
+        );
+        rawStyle = "ff0000";
+      } else {
+        rawStyle = color;
+      }
+    } else if (styleType === "image" && typeof rawStyle === "number") {
+      rawStyle =
+        (Image.resolveAssetSource(rawStyle) as unknown as RawValueType) || {};
+    }
+
+    const bridgeValue = new BridgeValue(rawStyle);
+    nativeStyle[styleProp] = {
+      styletype: styleType,
+      stylevalue: bridgeValue.toJSON(),
+    };
+  }
+
+  return nativeStyle;
+}

package/src/utils/animated/Animated.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { Animated as RNAnimated } from "react-native";
+
+import AnimatedCoordinatesArray from "./AnimatedCoordinatesArray";
+import AnimatedExtractCoordinateFromArray from "./AnimatedExtractCoordinateFromArray";
+import AnimatedRouteCoordinatesArray from "./AnimatedRouteCoordinatesArray";
+import AnimatedShape from "./AnimatedShape";
+import BackgroundLayer from "../../components/BackgroundLayer";
+import CircleLayer from "../../components/CircleLayer";
+import FillExtrusionLayer from "../../components/FillExtrusionLayer";
+import FillLayer from "../../components/FillLayer";
+import ImageSource from "../../components/ImageSource";
+import LineLayer from "../../components/LineLayer";
+import RasterLayer from "../../components/RasterLayer";
+import ShapeSource, {
+  type ShapeSourceProps,
+  type ShapeSourceRef,
+} from "../../components/ShapeSource";
+import SymbolLayer from "../../components/SymbolLayer";
+
+const Animated = {
+  // sources
+  ShapeSource: RNAnimated.createAnimatedComponent(ShapeSource),
+  ImageSource: RNAnimated.createAnimatedComponent(ImageSource),
+
+  // layers
+  FillLayer: RNAnimated.createAnimatedComponent(FillLayer),
+  FillExtrusionLayer: RNAnimated.createAnimatedComponent(FillExtrusionLayer),
+  LineLayer: RNAnimated.createAnimatedComponent(LineLayer),
+  CircleLayer: RNAnimated.createAnimatedComponent(CircleLayer),
+  SymbolLayer: RNAnimated.createAnimatedComponent(SymbolLayer),
+  RasterLayer: RNAnimated.createAnimatedComponent(RasterLayer),
+  BackgroundLayer: RNAnimated.createAnimatedComponent(BackgroundLayer),
+
+  // values
+  CoordinatesArray: AnimatedCoordinatesArray,
+  RouteCoordinatesArray: AnimatedRouteCoordinatesArray,
+  Shape: AnimatedShape,
+  ExtractCoordinateFromArray: AnimatedExtractCoordinateFromArray,
+};
+
+type ShapeSourcePropsWithRef = ShapeSourceProps &
+  React.RefAttributes<ShapeSourceRef>;
+
+type BaseShapeSourceComponent =
+  React.ForwardRefExoticComponent<ShapeSourcePropsWithRef>;
+
+type AnimatedShapeSourceType =
+  RNAnimated.AnimatedComponent<BaseShapeSourceComponent> &
+    React.MemoExoticComponent<BaseShapeSourceComponent>;
+
+/**
+ * Manual typing is required for AnimatedShapeSource because the
+ * following error:
+ * `Type instantiation is excessively deep and possibly infinite.ts(2589)`
+ */
+export const AnimatedShapeSource = RNAnimated.createAnimatedComponent(
+  ShapeSource,
+) as AnimatedShapeSourceType;
+
+export default Animated;

package/src/utils/animated/AnimatedCoordinatesArray.ts

@@ -0,0 +1,113 @@
+import AbstractAnimatedCoordinates, {
+  type AnimatedCoordinates,
+} from "./AbstractAnimatedCoordinates";
+
+interface CoordinatesState {
+  coords: AnimatedCoordinates[];
+  targetCoords: AnimatedCoordinates[];
+}
+
+class AnimatedCoordinatesArray extends AbstractAnimatedCoordinates<CoordinatesState> {
+  /**
+   * Subclasses can override to calculate initial state
+   *
+   * @param {AnimatedCoordinates} coordinatesArray - to value from animate
+   * @returns {object} - the state object
+   */
+  onInitialState(coordinatesArray: AnimatedCoordinates[]): CoordinatesState {
+    return {
+      coords: coordinatesArray.map((coordinates) => [
+        coordinates[0],
+        coordinates[1],
+      ]),
+      targetCoords: [],
+    };
+  }
+
+  /**
+   * Subclasses can override getValue to calculate value from state.
+   * Value is typically coordinates array, but can be anything
+   *
+   * @param {object} state - either state from initialState and/or from calculate
+   * @returns {object}
+   */
+  onGetValue(state: CoordinatesState): CoordinatesState["coords"] {
+    return state.coords;
+  }
+
+  /**
+   * Calculates state based on startingState and progress, returns a new state
+   *
+   * @param {object} state - state object from initialState and/or from calculate
+   * @param {number} progress - value between 0 and 1
+   * @returns {object} next state
+   */
+  onCalculate(state: CoordinatesState, progress: number): CoordinatesState {
+    const { coords, targetCoords } = state;
+    const newF = progress;
+    const origF = 1.0 - newF;
+
+    // common
+    const commonLen = Math.min(coords.length, targetCoords.length);
+    const common = coords
+      .slice(0, commonLen)
+      .map((originalCoordinates, i): [number, number] => [
+        originalCoordinates[0] * origF + (targetCoords[i]?.[0] ?? 0) * newF,
+        originalCoordinates[1] * origF + (targetCoords[i]?.[1] ?? 0) * newF,
+      ]);
+
+    if (targetCoords.length > coords.length) {
+      // only in new (adding)
+      const addingOriginal =
+        coords.length > 0 ? coords[coords.length - 1] : targetCoords[0];
+
+      const adding = targetCoords
+        .slice(commonLen, targetCoords.length)
+        .map((newCoordinates): [number, number] => [
+          (addingOriginal?.[0] ?? 0) * origF + newCoordinates[0] * newF,
+          (addingOriginal?.[1] ?? 0) * origF + newCoordinates[1] * newF,
+        ]);
+
+      return { coords: [...common, ...adding], targetCoords };
+    }
+
+    if (coords.length > targetCoords.length) {
+      // only in orig (disappearing)
+      const disappearingNew =
+        targetCoords.length > 0
+          ? targetCoords[targetCoords.length - 1]
+          : coords[0];
+      const disappearing = coords
+        .slice(commonLen, coords.length)
+        .map((originalCoordinates): [number, number] => [
+          originalCoordinates[0] * origF + (disappearingNew?.[0] ?? 0) * newF,
+          originalCoordinates[1] * origF + (disappearingNew?.[1] ?? 0) * newF,
+        ]);
+      return { coords: [...common, ...disappearing], targetCoords };
+    }
+
+    return { coords: common, targetCoords };
+  }
+
+  /**
+   * Subclasses can override to start a new animation
+   *
+   * @param {*} state - to value from animate
+   * @param {*} toValue - the current coordinates array to start from
+   * @returns {object} The state
+   */
+  onStart(
+    state: CoordinatesState,
+    toValue: AnimatedCoordinates[],
+  ): CoordinatesState {
+    const targetCoords = toValue.map(
+      (coordinates): AnimatedCoordinates => [coordinates[0], coordinates[1]],
+    );
+    return {
+      ...state,
+      targetCoords,
+    };
+  }
+}
+
+export default AnimatedCoordinatesArray;

package/src/utils/animated/AnimatedPoint.ts

@@ -0,0 +1,134 @@
+import { Animated } from "react-native";
+
+// Used react-native-maps as a reference
+// https://github.com/react-community/react-native-maps/blob/master/lib/components/AnimatedRegion.js
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
+const DEFAULT_COORD = [0, 0];
+const DEFAULT_POINT = { type: "Point", coordinates: DEFAULT_COORD };
+
+let uniqueID = 0;
+
+export class AnimatedPoint extends AnimatedWithChildren {
+  constructor(point = DEFAULT_POINT) {
+    super();
+
+    this.longitude = point.coordinates[0] || 0;
+    this.latitude = point.coordinates[1] || 0;
+
+    if (!(this.longitude instanceof Animated.Value)) {
+      this.longitude = new Animated.Value(this.longitude);
+    }
+
+    if (!(this.latitude instanceof Animated.Value)) {
+      this.latitude = new Animated.Value(this.latitude);
+    }
+
+    this._listeners = {};
+  }
+
+  setValue(point = DEFAULT_POINT): void {
+    this.longitude.setValue(point.coordinates[0]);
+    this.latitude.setValue(point.coordinates[1]);
+  }
+
+  setOffset(point = DEFAULT_POINT): void {
+    this.longitude.setOffset(point.coordinates[0]);
+    this.latitude.setOffset(point.coordinates[1]);
+  }
+
+  flattenOffset(): void {
+    this.longitude.flattenOffset();
+    this.latitude.flattenOffset();
+  }
+
+  stopAnimation(cb?: (value: GeoJSON.Point) => void): void {
+    this.longitude.stopAnimation();
+    this.latitude.stopAnimation();
+
+    if (typeof cb === "function") {
+      cb(this.__getValue());
+    }
+  }
+
+  addListener(cb?: (value: GeoJSON.Point) => void): string {
+    uniqueID += 1;
+    const id = `${String(uniqueID)}-${String(Date.now())}`;
+
+    const completeCB = (): void => {
+      if (typeof cb === "function") {
+        cb(this.__getValue());
+      }
+    };
+
+    this._listeners[id] = {
+      longitude: this.longitude.addListener(completeCB),
+      latitude: this.latitude.addListener(completeCB),
+    };
+
+    return id;
+  }
+
+  removeListener(id: string): void {
+    this.longitude.removeListener(this._listeners[id].longitude);
+    this.latitude.removeListener(this._listeners[id].latitude);
+    delete this._listeners[id];
+  }
+
+  spring(
+    config: Partial<Animated.TimingAnimationConfig> & {
+      coordinates: GeoJSON.Position;
+    } = { coordinates: DEFAULT_COORD },
+  ): Animated.CompositeAnimation {
+    return Animated.parallel([
+      Animated.spring(this.longitude, {
+        ...config,
+        toValue: config.coordinates[0]!,
+        useNativeDriver: false,
+      }),
+      Animated.spring(this.latitude, {
+        ...config,
+        toValue: config.coordinates[1]!,
+        useNativeDriver: false,
+      }),
+    ]);
+  }
+
+  timing(
+    config: Partial<Animated.TimingAnimationConfig> & {
+      coordinates: GeoJSON.Position;
+    } = { coordinates: DEFAULT_COORD },
+  ): Animated.CompositeAnimation {
+    return Animated.parallel([
+      Animated.timing(this.longitude, {
+        ...config,
+        toValue: config.coordinates[0]!,
+        useNativeDriver: false,
+      }),
+      Animated.timing(this.latitude, {
+        ...config,
+        toValue: config.coordinates[1]!,
+        useNativeDriver: false,
+      }),
+    ]);
+  }
+
+  __getValue(): GeoJSON.Point {
+    return {
+      type: "Point",
+      coordinates: [this.longitude.__getValue(), this.latitude.__getValue()],
+    };
+  }
+
+  __attach(): void {
+    this.longitude.__addChild(this);
+    this.latitude.__addChild(this);
+  }
+
+  __detach(): void {
+    this.longitude.__removeChild(this);
+    this.latitude.__removeChild(this);
+  }
+}
+
+export default AnimatedPoint;

package/src/utils/animated/AnimatedRouteCoordinatesArray.ts

@@ -0,0 +1,150 @@
+import distance from "@turf/distance";
+import {
+  lineString,
+  point,
+  convertLength,
+  type Coord,
+  type Units,
+} from "@turf/helpers";
+import length from "@turf/length";
+import nearestPointOnLine from "@turf/nearest-point-on-line";
+
+import AbstractAnimatedCoordinates, {
+  type AnimatedCoordinates,
+} from "./AbstractAnimatedCoordinates";
+
+interface AnimatedRouteState {
+  actRoute?: AnimatedCoordinates[];
+  fullRoute: AnimatedCoordinates[];
+  end: {
+    from: number;
+    current?: number;
+    to: number;
+    point?: Coord;
+    along?: Coord;
+  };
+}
+
+export default class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<AnimatedRouteState> {
+  /**
+   * Calculate initial state
+   *
+   * @param {*} args - to value from animate
+   * @returns {object} - the state object
+   */
+  onInitialState(coordinatesArray: AnimatedCoordinates[]): AnimatedRouteState {
+    return {
+      fullRoute: coordinatesArray.map(
+        (coord): AnimatedCoordinates => [coord[0], coord[1]],
+      ),
+      end: { from: 0, to: 0 },
+    };
+  }
+
+  /**
+   * Calculate value from state.
+   *
+   * @param {object} state - either state from initialState and/or from calculate
+   * @returns {object}
+   */
+  onGetValue(
+    state: AnimatedRouteState,
+  ): AnimatedRouteState | AnimatedCoordinates[] {
+    return state.actRoute || state.fullRoute;
+  }
+
+  /**
+   * Calculates state based on startingState and progress, returns a new state
+   *
+   * @param {object} state - state object from initialState and/or from calculate
+   * @param {number} progress - value between 0 and 1
+   * @returns {object} next state
+   */
+  onCalculate(state: AnimatedRouteState, progress: number): AnimatedRouteState {
+    const { fullRoute, end } = state;
+    const currentEnd = end.from * (1.0 - progress) + progress * end.to;
+
+    let prevsum = 0;
+    let actsum = 0;
+    let i = fullRoute.length - 1;
+    while (actsum < currentEnd && i > 0) {
+      prevsum = actsum;
+      const start = fullRoute[i];
+      const end = fullRoute[i - 1];
+      actsum +=
+        start && end ? distance(point(start), point(end), this.distconf) : 0;
+      i -= 1;
+    }
+    if (actsum <= currentEnd) {
+      const actRoute = [...fullRoute.slice(0, i + 1)];
+      return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
+    }
+    const r = (currentEnd - prevsum) / (actsum - prevsum);
+    const or = 1.0 - r;
+
+    const actRoute = [
+      ...fullRoute.slice(0, i + 1),
+      [
+        (fullRoute[i]?.[0] ?? 0) * r + (fullRoute[i + 1]?.[0] ?? 0) * or,
+        (fullRoute[i]?.[1] ?? 0) * r + (fullRoute[i + 1]?.[1] ?? 0) * or,
+      ] as AnimatedCoordinates,
+    ];
+    return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
+  }
+
+  /**
+   * Subclasses can override to start a new animation
+   *
+   * @param {*} toValue - to value from animate
+   * @param {*} actCoords - the current coordinates array to start from
+   * @returns {object} The state
+   */
+  onStart(
+    state: AnimatedRouteState,
+    toValue: { end: { point?: Coord; along?: number }; units?: Units },
+  ): AnimatedRouteState {
+    const { fullRoute, end } = state;
+    let toDist = 0;
+    if (!toValue.end) {
+      console.error(
+        "RouteCoordinatesArray: toValue should have end with either along or point",
+      );
+    }
+    if (toValue.end.along) {
+      const { units } = toValue;
+      const ls = lineString(fullRoute);
+      toDist = convertLength(toValue.end.along, units);
+      toDist = length(ls) - toDist;
+    }
+    if (toDist != null) {
+      if (toValue.end.point) {
+        console.warn(
+          "RouteCoordinatesArray: toValue.end: has both along and point, point is ignored",
+        );
+      }
+    } else if (toValue.end.point) {
+      const ls = lineString(fullRoute);
+
+      const nearest = nearestPointOnLine(ls, toValue.end.point);
+      toDist = length(ls) - nearest.properties.location!;
+    } else {
+      console.warn(
+        "RouteCoordinatesArray: toValue.end: should have either along or point",
+      );
+    }
+
+    const result = {
+      fullRoute,
+      end: {
+        ...end,
+        from: end.current != null ? end.current : end.from,
+        to: toDist,
+      },
+    };
+    return result;
+  }
+
+  get originalRoute(): AnimatedCoordinates[] {
+    return this.state.fullRoute;
+  }
+}

package/src/utils/filterUtils.ts

@@ -0,0 +1,9 @@
+import { type FilterExpression } from "./MapLibreRNStyles";
+
+export function getFilter(filter: FilterExpression | undefined): string[] {
+  if (!Array.isArray(filter) || filter.length === 0) {
+    return [];
+  }
+
+  return filter;
+}

package/src/utils/index.ts

@@ -0,0 +1,118 @@
+import { Children, cloneElement, Component, type ReactElement } from "react";
+import {
+  Image,
+  NativeModules,
+  findNodeHandle,
+  Platform,
+  type ImageSourcePropType,
+  UIManager,
+} from "react-native";
+
+export function isAndroid(): boolean {
+  return Platform.OS === "android";
+}
+
+export function existenceChange(cur: boolean, next: boolean): boolean {
+  if (!cur && !next) {
+    return false;
+  }
+  return (!cur && next) || (cur && !next);
+}
+
+export function isFunction(fn: unknown): fn is boolean {
+  return typeof fn === "function";
+}
+
+export function isNumber(num: unknown): num is number {
+  return typeof num === "number" && !Number.isNaN(num);
+}
+
+export function isUndefined(obj: unknown): obj is undefined {
+  return typeof obj === "undefined";
+}
+
+export function isString(str: unknown): str is string {
+  return typeof str === "string";
+}
+
+export function isBoolean(bool: unknown): bool is boolean {
+  return typeof bool === "boolean";
+}
+
+export function isPrimitive(
+  value: unknown,
+): value is string | number | boolean {
+  return isString(value) || isNumber(value) || isBoolean(value);
+}
+
+export type NativeArg =
+  | string
+  | number
+  | boolean
+  | null
+  | { [k: string]: NativeArg }
+  | NativeArg[];
+
+export function runNativeCommand<ReturnType = NativeArg>(
+  module: string,
+  name: string,
+  nativeRef: Component,
+  args: NativeArg[] = [],
+): ReturnType {
+  const handle = findNodeHandle(nativeRef);
+  if (!handle) {
+    throw new Error(`Could not find handle for native ref ${module}.${name}`);
+  }
+
+  const managerInstance = isAndroid()
+    ? UIManager.getViewManagerConfig(module)
+    : NativeModules[module];
+
+  if (!managerInstance) {
+    throw new Error(`Could not find ${module}`);
+  }
+
+  if (isAndroid()) {
+    UIManager.dispatchViewManagerCommand(
+      handle,
+      managerInstance.Commands[name],
+      args,
+    );
+
+    // Android uses callback instead of return
+    return null as ReturnType;
+  }
+
+  return managerInstance[name](handle, ...args);
+}
+
+export function cloneReactChildrenWithProps(
+  children: Parameters<typeof Children.map>[0],
+  propsToAdd: { [key: string]: string } = {},
+): ReactElement[] | undefined {
+  if (!children) {
+    return undefined;
+  }
+
+  let foundChildren = null;
+
+  if (!Array.isArray(children)) {
+    foundChildren = [children];
+  } else {
+    foundChildren = children;
+  }
+
+  const filteredChildren = foundChildren.filter((child) => !!child); // filter out falsy children, since some can be null
+  return Children.map(filteredChildren, (child) =>
+    cloneElement(child, propsToAdd),
+  );
+}
+
+export function resolveImagePath(imageRef: ImageSourcePropType): string {
+  const res = Image.resolveAssetSource(imageRef);
+  return res.uri;
+}
+
+export function toJSONString(json: object | string = ""): string {
+  return JSON.stringify(json);
+}

package/src/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)]));
+}