@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.10

package/javascript/utils/StyleValue.ts

@@ -0,0 +1,49 @@
+import { Image, processColor } from "react-native";
+
+import BridgeValue, {
+  type RawValueType,
+  type StyleValueJSON,
+} from "./BridgeValue";
+import { AllLayerStyleProps } from "./MaplibreStyles";
+import { getStyleType } from "./styleMap";
+
+export type StyleValue = {
+  styletype: string;
+  stylevalue: StyleValueJSON;
+};
+
+export function transformStyle(
+  style: AllLayerStyleProps | undefined,
+): undefined | { [key: string]: StyleValue } {
+  if (!style) {
+    return;
+  }
+
+  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(`RNMaplibre: Invalid color value: ${rawStyle} using red`);
+        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/javascript/utils/animated/AbstractAnimatedCoordinates.ts

@@ -0,0 +1,134 @@
+import { Animated } from "react-native";
+
+// see
+// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+if (__DEV__) {
+  if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
+    console.error(
+      "AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class",
+    );
+  }
+}
+
+export type AnimatedCoordinates = [number, number];
+
+const defaultConfig = {
+  useNativeDriver: false,
+};
+
+abstract class AbstractAnimatedCoordinates<State> extends AnimatedWithChildren {
+  constructor(coords: AnimatedCoordinates[]) {
+    super();
+
+    this.state = this.onInitialState(coords);
+  }
+
+  /**
+   * Subclasses can override to calculate initial state
+   *
+   * @param {AnimatedCoordinates} coordinatesArray - to value from animate
+   * @returns {object} - the state object
+   */
+  abstract onInitialState(coords: AnimatedCoordinates[]): State;
+  /**
+   * 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
+   */
+  abstract onCalculate(state: State, progress: number): State;
+
+  animate(
+    progressValue: Animated.Value,
+    progressAnimation: Animated.CompositeAnimation,
+    config: (
+      | Animated.TimingAnimationConfig
+      | Animated.SpringAnimationConfig
+      | Animated.DecayAnimationConfig
+    ) & { toValue: AnimatedCoordinates[] },
+  ): Animated.CompositeAnimation {
+    const onAnimationStart = (animation: Animated.CompositeAnimation): void => {
+      if (this.animation) {
+        // there was a started but not finsihed animation
+        const actProgress = this.progressValue.__getValue();
+        this.animation.stop();
+        this.state = this.onCalculate(this.state, actProgress);
+        this.progressValue.__removeChild(this);
+        this.progressValue = null;
+        this.animation = null;
+      }
+
+      this.progressValue = progressValue;
+      this.progressValue.__addChild(this);
+      this.animation = animation;
+      this.state = this.onStart(this.state, config.toValue);
+    };
+
+    const origAnimationStart = progressAnimation.start;
+    const newAnimation = progressAnimation;
+    newAnimation.start = function start(...args): void {
+      onAnimationStart(progressAnimation);
+      origAnimationStart(...args);
+    };
+    return newAnimation;
+  }
+
+  timing(
+    config: Animated.TimingAnimationConfig & {
+      toValue: AnimatedCoordinates[];
+    },
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.timing(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  spring(
+    config: Animated.SpringAnimationConfig & { toValue: AnimatedCoordinates[] },
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.spring(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  decay(
+    config: Animated.DecayAnimationConfig & { toValue: AnimatedCoordinates[] },
+  ): Animated.CompositeAnimation {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.decay(this.progressValue, {
+        ...defaultConfig,
+        ...config,
+      }),
+      config,
+    );
+  }
+
+  __getValue(): AnimatedCoordinates[] {
+    if (!this.progressValue) {
+      return this.onGetValue(this.state);
+    }
+    return this.onGetValue(
+      this.onCalculate(this.state, this.progressValue.__getValue()),
+    );
+  }
+}
+
+export default AbstractAnimatedCoordinates;

package/javascript/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, {
+  ShapeSourceProps,
+  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/javascript/utils/animated/AnimatedCoordinatesArray.ts

@@ -0,0 +1,108 @@
+import AbstractAnimatedCoordinates, {
+  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((coord) => [coord[0], coord[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((origCoord, i): [number, number] => [
+        origCoord[0] * origF + targetCoords[i][0] * newF,
+        origCoord[1] * origF + targetCoords[i][1] * newF,
+      ]);
+
+    if (targetCoords.length > coords.length) {
+      // only in new (adding)
+      const addingOrig =
+        coords.length > 0 ? coords[coords.length - 1] : targetCoords[0];
+      const adding = targetCoords
+        .slice(commonLen, targetCoords.length)
+        .map((newCoord): [number, number] => [
+          addingOrig[0] * origF + newCoord[0] * newF,
+          addingOrig[1] * origF + newCoord[1] * newF,
+        ]);
+      return { coords: [...common, ...adding], targetCoords };
+    }
+
+    if (coords.length > targetCoords.length) {
+      // only in orig (dissapearing)
+      const dissapearingNew =
+        targetCoords.length > 0
+          ? targetCoords[targetCoords.length - 1]
+          : coords[0];
+      const dissapearing = coords
+        .slice(commonLen, coords.length)
+        .map((origCoord): [number, number] => [
+          origCoord[0] * origF + dissapearingNew[0] * newF,
+          origCoord[1] * origF + dissapearingNew[1] * newF,
+        ]);
+      return { coords: [...common, ...dissapearing], targetCoords };
+    }
+
+    return { coords: common, targetCoords };
+  }
+
+  /**
+   * 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: CoordinatesState,
+    toValue: AnimatedCoordinates[],
+  ): CoordinatesState {
+    const targetCoords = toValue.map(
+      (coord): AnimatedCoordinates => [coord[0], coord[1]],
+    );
+    return {
+      ...state,
+      targetCoords,
+    };
+  }
+}
+
+export default AnimatedCoordinatesArray;

package/javascript/utils/animated/{AnimatedExtractCoordinateFromArray.js → AnimatedExtractCoordinateFromArray.ts}

@@ -1,28 +1,28 @@
-import {Animated} from 'react-native';
+import { Animated } from "react-native";
 
 // see
 // https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
 if (__DEV__) {
-  if (AnimatedWithChildren.name !== 'AnimatedWithChildren') {
+  if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
     console.error(
-      'AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class',
+      "AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class",
     );
   }
 }
 
 export default class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
-  _array = null;
+  _array: AnimatedExtractCoordinateFromArray;
 
   _index = 0;
 
-  constructor(array, index) {
+  constructor(array: AnimatedExtractCoordinateFromArray, index: number) {
     super();
     this._array = array;
     this._index = index;
   }
 
-  __getValue() {
+  __getValue(): AnimatedExtractCoordinateFromArray {
     const actArray = this._array.__getValue();
     let index = this._index;
 
@@ -32,11 +32,11 @@ export default class AnimatedExtractCoordinateFromArray extends AnimatedWithChil
     return actArray[index];
   }
 
-  __attach() {
+  __attach(): void {
     this._array.__addChild(this);
   }
 
-  __detach() {
+  __detach(): void {
     this._array.__removeChild(this);
     super.__detach();
   }

package/javascript/utils/animated/{AnimatedPoint.js → AnimatedPoint.ts}

@@ -1,11 +1,11 @@
-import {Animated} from 'react-native';
+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};
+const DEFAULT_POINT = { type: "Point", coordinates: DEFAULT_COORD };
 
 let uniqueID = 0;
 
@@ -27,36 +27,36 @@ export class AnimatedPoint extends AnimatedWithChildren {
     this._listeners = {};
   }
 
-  setValue(point = DEFAULT_POINT) {
+  setValue(point = DEFAULT_POINT): void {
     this.longitude.setValue(point.coordinates[0]);
     this.latitude.setValue(point.coordinates[1]);
   }
 
-  setOffset(point = DEFAULT_POINT) {
+  setOffset(point = DEFAULT_POINT): void {
     this.longitude.setOffset(point.coordinates[0]);
     this.latitude.setOffset(point.coordinates[1]);
   }
 
-  flattenOffset() {
+  flattenOffset(): void {
     this.longitude.flattenOffset();
     this.latitude.flattenOffset();
   }
 
-  stopAnimation(cb) {
+  stopAnimation(cb?: (value: GeoJSON.Point) => void): void {
     this.longitude.stopAnimation();
     this.latitude.stopAnimation();
 
-    if (typeof cb === 'function') {
+    if (typeof cb === "function") {
       cb(this.__getValue());
     }
   }
 
-  addListener(cb) {
+  addListener(cb?: (value: GeoJSON.Point) => void): string {
     uniqueID += 1;
     const id = `${String(uniqueID)}-${String(Date.now())}`;
 
-    const completeCB = () => {
-      if (typeof cb === 'function') {
+    const completeCB = (): void => {
+      if (typeof cb === "function") {
         cb(this.__getValue());
       }
     };
@@ -69,13 +69,17 @@ export class AnimatedPoint extends AnimatedWithChildren {
     return id;
   }
 
-  removeListener(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 = {coordinates: DEFAULT_COORD}) {
+  spring(
+    config: Partial<Animated.TimingAnimationConfig> & {
+      coordinates: GeoJSON.Position;
+    } = { coordinates: DEFAULT_COORD },
+  ): Animated.CompositeAnimation {
     return Animated.parallel([
       Animated.spring(this.longitude, {
         ...config,
@@ -90,7 +94,11 @@ export class AnimatedPoint extends AnimatedWithChildren {
     ]);
   }
 
-  timing(config = {coordinates: DEFAULT_COORD}) {
+  timing(
+    config: Partial<Animated.TimingAnimationConfig> & {
+      coordinates: GeoJSON.Position;
+    } = { coordinates: DEFAULT_COORD },
+  ): Animated.CompositeAnimation {
     return Animated.parallel([
       Animated.timing(this.longitude, {
         ...config,
@@ -105,19 +113,19 @@ export class AnimatedPoint extends AnimatedWithChildren {
     ]);
   }
 
-  __getValue() {
+  __getValue(): GeoJSON.Point {
     return {
-      type: 'Point',
+      type: "Point",
       coordinates: [this.longitude.__getValue(), this.latitude.__getValue()],
     };
   }
 
-  __attach() {
+  __attach(): void {
     this.longitude.__addChild(this);
     this.latitude.__addChild(this);
   }
 
-  __detach() {
+  __detach(): void {
     this.longitude.__removeChild(this);
     this.latitude.__removeChild(this);
   }

package/javascript/utils/animated/{AnimatedRouteCoordinatesArray.js → AnimatedRouteCoordinatesArray.ts}

@@ -1,21 +1,37 @@
-import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+import distance from "@turf/distance";
+import { lineString, point, convertLength, Coord, Units } from "@turf/helpers";
+import length from "@turf/length";
+import nearestPointOnLine from "@turf/nearest-point-on-line";
 
-import {lineString, point, convertLength} from '@turf/helpers';
-import distance from '@turf/distance';
-import nearestPointOnLine from '@turf/nearest-point-on-line';
-import length from '@turf/length';
+import AbstractAnimatedCoordinates, {
+  AnimatedCoordinates,
+} from "./AbstractAnimatedCoordinates";
 
-export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
+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) {
+  onInitialState(coordinatesArray: AnimatedCoordinates[]): AnimatedRouteState {
     return {
-      fullRoute: coordinatesArray.map(coord => [coord[0], coord[1]]),
-      end: {from: 0},
+      fullRoute: coordinatesArray.map(
+        (coord): AnimatedCoordinates => [coord[0], coord[1]],
+      ),
+      end: { from: 0, to: 0 },
     };
   }
 
@@ -25,7 +41,9 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
    * @param {object} state - either state from initialState and/or from calculate
    * @returns {object}
    */
-  onGetValue(state) {
+  onGetValue(
+    state: AnimatedRouteState,
+  ): AnimatedRouteState | AnimatedCoordinates[] {
     return state.actRoute || state.fullRoute;
   }
 
@@ -36,8 +54,8 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
    * @param {number} progress - value between 0 and 1
    * @returns {object} next state
    */
-  onCalculate(state, progress) {
-    const {fullRoute, end} = state;
+  onCalculate(state: AnimatedRouteState, progress: number): AnimatedRouteState {
+    const { fullRoute, end } = state;
     const currentEnd = end.from * (1.0 - progress) + progress * end.to;
 
     let prevsum = 0;
@@ -54,7 +72,7 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
     }
     if (actsum <= currentEnd) {
       const actRoute = [...fullRoute.slice(0, i + 1)];
-      return {fullRoute, end: {...end, current: currentEnd}, actRoute};
+      return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
     }
     const r = (currentEnd - prevsum) / (actsum - prevsum);
     const or = 1.0 - r;
@@ -64,9 +82,9 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
       [
         fullRoute[i][0] * r + fullRoute[i + 1][0] * or,
         fullRoute[i][1] * r + fullRoute[i + 1][1] * or,
-      ],
+      ] as AnimatedCoordinates,
     ];
-    return {fullRoute, end: {...end, current: currentEnd}, actRoute};
+    return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
   }
 
   /**
@@ -76,16 +94,19 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
    * @param {*} actCoords - the current coordinates array to start from
    * @returns {object} The state
    */
-  onStart(state, toValue) {
-    const {fullRoute, end} = state;
-    let toDist;
+  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',
+        "RouteCoordinatesArray: toValue should have end with either along or point",
       );
     }
-    if (toValue.end.along != null) {
-      const {units} = toValue;
+    if (toValue.end.along) {
+      const { units } = toValue;
       const ls = lineString(fullRoute);
       toDist = convertLength(toValue.end.along, units);
       toDist = length(ls) - toDist;
@@ -93,17 +114,17 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
     if (toDist != null) {
       if (toValue.end.point) {
         console.warn(
-          'RouteCoordinatesArray: toValue.end: has both along and point, point is ignored',
+          "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;
+      toDist = length(ls) - nearest.properties.location!;
     } else {
       console.warn(
-        'RouteCoordinatesArray: toValue.end: should have either along or point',
+        "RouteCoordinatesArray: toValue.end: should have either along or point",
       );
     }
 
@@ -118,7 +139,7 @@ export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesAr
     return result;
   }
 
-  get originalRoute() {
+  get originalRoute(): AnimatedCoordinates[] {
     return this.state.fullRoute;
   }
 }