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

package/javascript/components/annotations/Annotation.tsx

@@ -1,11 +1,16 @@
-import SymbolLayer from '../SymbolLayer';
-import Animated from '../../utils/animated/Animated';
-import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
-import OnPressEvent from '../../types/OnPressEvent';
-import {SymbolLayerStyleProps} from '../../utils/MaplibreStyles';
-
-import React, {ReactElement} from 'react';
-import {Animated as RNAnimated, Easing} from 'react-native';
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+} from "react";
+import { Animated as RNAnimated, Easing } from "react-native";
+
+import OnPressEvent from "../../types/OnPressEvent";
+import { SymbolLayerStyleProps } from "../../utils/MaplibreStyles";
+import { AnimatedShapeSource } from "../../utils/animated/Animated";
+import AnimatedMapPoint from "../../utils/animated/AnimatedPoint";
+import SymbolLayer from "../SymbolLayer";
 
 interface AnnotationProps {
   id: string;
@@ -19,116 +24,138 @@ interface AnnotationProps {
   icon?: string | number | object;
 }
 
-type AnnotationState = {
-  shape: AnimatedMapPoint | GeoJSON.Point | null;
-};
+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] };
 
-class Annotation extends React.Component<AnnotationProps, AnnotationState> {
-  static defaultProps = {
-    animated: false,
-    animationDuration: 1000,
-    animationEasingFunction: Easing.linear,
-  };
+  if (props.animated) {
+    return new AnimatedMapPoint(point);
+  }
 
-  constructor(props: AnnotationProps) {
-    super(props);
+  return point;
+}
 
-    const shape = this._getShapeFromProps(props);
+function isShapeAnimated(shape: Shape): shape is AnimatedMapPoint {
+  return shape instanceof AnimatedMapPoint;
+}
+
+interface AnnotationRef {
+  onPress(event: OnPressEvent): void;
+  symbolStyle: SymbolLayerStyleProps | undefined;
+}
 
-    this.state = {
-      shape: props.animated ? new AnimatedMapPoint(shape) : shape,
+const Annotation = React.forwardRef<AnnotationRef, AnnotationProps>(
+  (
+    {
+      animated = false,
+      animationDuration = 1000,
+      animationEasingFunction = Easing.linear,
+      ...otherProps
+    }: AnnotationProps,
+    ref,
+  ) => {
+    const props = {
+      ...otherProps,
+      animated,
+      animationDuration,
+      animationEasingFunction,
     };
 
-    this.onPress = this.onPress.bind(this);
-  }
+    useImperativeHandle(
+      ref,
+      (): AnnotationRef => ({
+        onPress,
+        symbolStyle,
+      }),
+    );
 
-  componentDidUpdate(prevProps: AnnotationProps): void {
-    if (!Array.isArray(this.props.coordinates)) {
-      this.setState({shape: null});
-      return;
-    }
+    const [shape, setShape] = React.useState<Shape | null>(
+      getShapeFromProps(props),
+    );
 
-    const hasCoordChanged =
-      prevProps.coordinates?.[0] !== this.props.coordinates?.[0] ||
-      prevProps.coordinates?.[1] !== this.props.coordinates?.[1];
+    // this will run useEffect only when actual coordinates values change
+    const coordinateDeps = props.coordinates?.join(",");
 
-    if (!hasCoordChanged) {
-      return;
-    }
+    useEffect(() => {
+      if (!Array.isArray(props.coordinates)) {
+        setShape(null);
+        return;
+      }
 
-    if (this.props.animated && this.state.shape) {
-      // flush current animations
-      (this.state.shape as AnimatedMapPoint).stopAnimation();
-
-      (this.state.shape as AnimatedMapPoint)
-        .timing({
-          coordinates: this.props.coordinates,
-          easing: this.props.animationEasingFunction,
-          duration: this.props.animationDuration,
-        })
-        .start();
-    } else if (!this.state.shape || !this.props.animated) {
-      const shape = this._getShapeFromProps();
-
-      this.setState({
-        shape: this.props.animated ? new AnimatedMapPoint(shape) : shape,
-      });
-    }
-  }
+      if (shape && isShapeAnimated(shape)) {
+        shape.stopAnimation();
 
-  onPress(event: OnPressEvent): void {
-    if (this.props.onPress) {
-      this.props.onPress(event);
-    }
-  }
+        shape
+          .timing({
+            coordinates: props.coordinates,
+            easing: animationEasingFunction,
+            duration: animationDuration,
+          })
+          .start();
 
-  _getShapeFromProps(props: Partial<AnnotationProps> = {}): GeoJSON.Point {
-    const lng = props.coordinates?.[0] || 0;
-    const lat = props.coordinates?.[1] || 0;
-    return {type: 'Point', coordinates: [lng, lat]};
-  }
+        return;
+      }
+
+      if (!shape || !isShapeAnimated(shape)) {
+        const newShape = getShapeFromProps(props);
+        setShape(newShape);
+      }
+    }, [coordinateDeps]);
 
-  get symbolStyle(): SymbolLayerStyleProps | undefined {
-    if (!this.props.icon) {
-      return undefined;
+    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);
     }
-    return Object.assign({}, this.props.style, {
-      iconImage: this.props.icon,
-    });
-  }
 
-  render(): ReactElement | null {
-    if (!this.props.coordinates) {
+    if (!props.coordinates) {
       return null;
     }
 
     const children = [];
+    const symbolStyle: SymbolLayerStyleProps | undefined = props.icon
+      ? { ...props.style, iconImage: props.icon }
+      : undefined;
 
-    if (this.symbolStyle) {
+    if (symbolStyle) {
       children.push(
-        <SymbolLayer id={`${this.props.id}-symbol`} style={this.symbolStyle} />,
+        <SymbolLayer id={`${props.id}-symbol`} style={symbolStyle} />,
       );
     }
 
-    if (this.props.children) {
-      if (Array.isArray(this.props.children)) {
-        children.push(...this.props.children);
+    if (props.children) {
+      if (Array.isArray(props.children)) {
+        children.push(...props.children);
       } else {
-        children.push(this.props.children);
+        children.push(props.children);
       }
     }
 
     return (
-      <Animated.ShapeSource
-        id={this.props.id}
-        onPress={this.onPress}
-        shape={
-          this.state.shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>
-        }>
+      <AnimatedShapeSource
+        id={props.id}
+        onPress={_onPress}
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}
+      >
         {children}
-      </Animated.ShapeSource>
+      </AnimatedShapeSource>
     );
-  }
-}
+  },
+);
+
+Annotation.displayName = "Annotation";
 
 export default Annotation;

package/javascript/hooks/useAbstractLayer.ts

@@ -0,0 +1,127 @@
+import React, { useMemo, useRef } from "react";
+import { processColor, NativeMethods } from "react-native";
+
+import BaseProps from "../types/BaseProps";
+import {
+  AllLayerStyleProps,
+  ExpressionField,
+  ExpressionName,
+  FilterExpression,
+} from "../utils/MaplibreStyles";
+import { StyleValue, transformStyle } from "../utils/StyleValue";
+import { getFilter } from "../utils/filterUtils";
+
+export interface BaseLayerProps {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+  filter?: FilterExpression;
+  /**
+   * Customizable style attributes
+   */
+  style?: AllLayerStyleProps;
+}
+
+export interface NativeBaseProps {
+  reactStyle?: { [key: string]: StyleValue };
+}
+
+export default function useAbstractLayer<
+  Props extends BaseProps,
+  NativeProps extends NativeBaseProps,
+>(
+  props: Props & BaseLayerProps,
+): {
+  baseProps: Props & BaseLayerProps;
+  setNativeLayer: (
+    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ) => void;
+  getStyleTypeFormatter: (styleType: string) => typeof processColor | undefined;
+  setNativeProps: (nativeProps: { [key: string]: unknown }) => void;
+} {
+  const nativeLayer = useRef<
+    (React.Component<NativeProps> & Readonly<NativeMethods>) | null
+  >(null);
+
+  const baseProps = useMemo(() => {
+    return {
+      ...props,
+      id: props.id,
+      sourceID: props.sourceID,
+      reactStyle: transformStyle(props.style),
+      minZoomLevel: props.minZoomLevel,
+      maxZoomLevel: props.maxZoomLevel,
+      aboveLayerID: props.aboveLayerID,
+      belowLayerID: props.belowLayerID,
+      layerIndex: props.layerIndex,
+      filter: getFilter(props.filter) as [ExpressionName, ...ExpressionField[]],
+      style: undefined,
+    };
+  }, [props]);
+
+  const setNativeLayer = (
+    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ): void => {
+    nativeLayer.current = instance;
+  };
+
+  const getStyleTypeFormatter = (
+    styleType: string,
+  ): typeof processColor | undefined => {
+    return styleType === "color" ? processColor : undefined;
+  };
+
+  const setNativeProps = (nativeProps: { [key: string]: unknown }): void => {
+    if (nativeLayer.current) {
+      let propsToPass = nativeProps;
+      if (nativeProps.style) {
+        propsToPass = {
+          ...nativeProps,
+          reactStyle: transformStyle(props.style),
+        };
+      }
+      nativeLayer.current.setNativeProps(propsToPass);
+    }
+  };
+
+  return {
+    baseProps,
+    setNativeLayer,
+    getStyleTypeFormatter,
+    setNativeProps,
+  };
+}

package/javascript/hooks/useAbstractSource.ts

@@ -0,0 +1,34 @@
+import React, { useRef } from "react";
+import { NativeMethods } from "react-native";
+
+export default function useAbstractSource<NativePropsType extends object>(): {
+  _nativeRef:
+    | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+    | undefined;
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void;
+  setNativeProps: (nativeProps: NativePropsType) => void;
+} {
+  const _nativeRef = useRef<
+    (React.Component<NativePropsType> & Readonly<NativeMethods>) | undefined
+  >(undefined);
+
+  const setNativeRef = (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ): void => {
+    _nativeRef.current = instance;
+  };
+
+  const setNativeProps = (newProps: NativePropsType): void => {
+    if (_nativeRef.current) {
+      _nativeRef.current.setNativeProps(newProps);
+    }
+  };
+
+  return {
+    _nativeRef: _nativeRef.current,
+    setNativeRef,
+    setNativeProps,
+  };
+}

package/javascript/hooks/useNativeBridge.ts

@@ -0,0 +1,125 @@
+import React, { Component, SyntheticEvent, useRef } from "react";
+
+import { runNativeCommand, isAndroid, NativeArg } from "../utils";
+
+export type RNMLEvent<PayloadType = { [key: string]: string }> = {
+  payload: PayloadType;
+  type: string;
+};
+
+let callbackIncrement = 0;
+
+type UseNativeBridge = {
+  _nativeModuleName: string;
+  _onAndroidCallback: (e: SyntheticEvent<Element, RNMLEvent>) => void;
+  _callbackMap: React.MutableRefObject<Map<string, any>>;
+  _preRefMapMethodQueue: React.MutableRefObject<any[]>;
+  _addAddAndroidCallback: <ReturnType>(
+    id: string,
+    resolve: (value: ReturnType) => void,
+    reject: (error: Error) => void,
+  ) => void;
+  _removeAndroidCallback: (id: string) => void;
+  _runPendingNativeCommands: <RefType extends Component>(
+    nativeRef: RefType | null | undefined,
+  ) => Promise<void>;
+  _runNativeCommand: <RefType extends Component, ReturnType = NativeArg>(
+    methodName: string,
+    nativeRef: RefType | undefined | null,
+    args?: NativeArg[],
+  ) => Promise<ReturnType>;
+};
+
+const useNativeBridge: (moduleName: string) => UseNativeBridge = (
+  _nativeModuleName: string,
+) => {
+  const _callbackMap = useRef<Map<string, any>>(new Map());
+  const _preRefMapMethodQueue = useRef<any[]>([]);
+
+  const _addAddAndroidCallback = <ReturnType>(
+    id: string,
+    resolve: (value: ReturnType) => void,
+    reject: (error: Error) => void,
+  ): void => {
+    _callbackMap.current.set(id, { resolve, reject });
+  };
+
+  const _removeAndroidCallback = (id: string): void => {
+    _callbackMap.current.delete(id);
+  };
+
+  const _onAndroidCallback = (e: SyntheticEvent<Element, RNMLEvent>): void => {
+    const callbackID = e.nativeEvent.type;
+    const callback = _callbackMap.current.get(callbackID);
+
+    if (!callback) {
+      return;
+    }
+
+    _callbackMap.current.delete(callbackID);
+    const { payload } = e.nativeEvent;
+    if (payload.error) {
+      callback.reject.call(null, new Error(payload.error));
+    } else {
+      callback.resolve.call(null, payload);
+    }
+  };
+
+  const _runPendingNativeCommands = async <RefType extends Component>(
+    nativeRef: RefType | null | undefined,
+  ): Promise<void> => {
+    if (nativeRef) {
+      while (_preRefMapMethodQueue.current.length > 0) {
+        const item = _preRefMapMethodQueue.current.pop();
+
+        if (item && item.method && item.resolver) {
+          const res = await _runNativeCommand(
+            item.method.name,
+            nativeRef,
+            item.method.args,
+          );
+          item.resolver(res);
+        }
+      }
+    }
+  };
+
+  const _runNativeCommand = <RefType extends Component, ReturnType = NativeArg>(
+    methodName: string,
+    nativeRef: RefType | undefined | null,
+    args: NativeArg[] = [],
+  ): Promise<ReturnType> => {
+    if (!nativeRef) {
+      return new Promise((resolve) => {
+        _preRefMapMethodQueue.current.push({
+          method: { name: methodName, args },
+          resolver: resolve,
+        });
+      });
+    }
+
+    if (isAndroid()) {
+      return new Promise((resolve, reject) => {
+        callbackIncrement += 1;
+        const callbackID = `${methodName}_${callbackIncrement}`;
+        _addAddAndroidCallback(callbackID, resolve, reject);
+        args.unshift(callbackID);
+        runNativeCommand(_nativeModuleName, methodName, nativeRef, args);
+      });
+    }
+    return runNativeCommand(_nativeModuleName, methodName, nativeRef, args);
+  };
+
+  return {
+    _nativeModuleName,
+    _onAndroidCallback,
+    _callbackMap,
+    _preRefMapMethodQueue,
+    _addAddAndroidCallback,
+    _removeAndroidCallback,
+    _runPendingNativeCommands,
+    _runNativeCommand,
+  };
+};
+
+export default useNativeBridge;

package/javascript/hooks/useNativeRef.ts

@@ -0,0 +1,13 @@
+import React, { Component, useRef } from "react";
+import { NativeMethods } from "react-native";
+
+type NativeRef<NativeProps> = Component<NativeProps> & Readonly<NativeMethods>;
+
+/**
+ * Separate  module which allows to be mocked in tests.
+ */
+export function useNativeRef<NativeProps = object>(): React.RefObject<
+  NativeRef<NativeProps>
+> {
+  return useRef<NativeRef<NativeProps>>(null);
+}

package/javascript/hooks/useOnce.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+
+const useOnce: (callback: () => void) => void = (callback: () => void) => {
+  const once = useRef(false);
+
+  if (!once.current) {
+    once.current = true;
+    callback();
+  }
+};
+
+export default useOnce;

package/javascript/index.ts

@@ -1,4 +1,4 @@
-export * from './Maplibre';
-import * as Maplibre from './Maplibre';
+import * as Maplibre from "./Maplibre";
+export * from "./Maplibre";
 
 export default Maplibre;

package/javascript/modules/location/locationManager.ts

@@ -2,10 +2,10 @@ import {
   NativeModules,
   NativeEventEmitter,
   EmitterSubscription,
-} from 'react-native';
+} from "react-native";
 
-const MapLibreGL = NativeModules.MGLModule;
-const MapLibreGLLocationManager = NativeModules.MGLLocationModule;
+const MapLibreGL = NativeModules.MLNModule;
+const MapLibreGLLocationManager = NativeModules.MLNLocationModule;
 
 export const LocationModuleEventEmitter = new NativeEventEmitter(
   MapLibreGLLocationManager,
@@ -89,7 +89,7 @@ class LocationManager {
         lastKnownLocation =
           await MapLibreGLLocationManager.getLastKnownLocation();
       } catch (error) {
-        console.log('locationManager Error: ', error);
+        console.log("locationManager Error: ", error);
       }
 
       if (!this._lastKnownLocation && lastKnownLocation) {
@@ -114,7 +114,7 @@ class LocationManager {
   }
 
   removeListener(listener: (location: Location) => void): void {
-    this._listeners = this._listeners.filter(l => l !== listener);
+    this._listeners = this._listeners.filter((l) => l !== listener);
     if (this._listeners.length === 0) {
       this.stop();
     }
@@ -155,7 +155,7 @@ class LocationManager {
   onUpdate(location: Location): void {
     this._lastKnownLocation = location;
 
-    this._listeners.forEach(l => l(location));
+    this._listeners.forEach((l) => l(location));
   }
 }
 

package/javascript/modules/offline/OfflineCreatePackOptions.ts

@@ -1,5 +1,5 @@
-import {makeLatLngBounds} from '../../utils/geoUtils';
-import {toJSONString} from '../../utils';
+import { toJSONString } from "../../utils";
+import { makeLatLngBounds } from "../../utils/geoUtils";
 
 export interface OfflineCreatePackInputOptions {
   name: string;
@@ -32,16 +32,16 @@ class OfflineCreatePackOptions {
   _assert(options: OfflineCreatePackInputOptions): void {
     if (!options.styleURL) {
       throw new Error(
-        'Style URL must be provided for creating an offline pack',
+        "Style URL must be provided for creating an offline pack",
       );
     }
 
     if (!options.name) {
-      throw new Error('Name must be provided for creating an offline pack');
+      throw new Error("Name must be provided for creating an offline pack");
     }
 
     if (!options.bounds) {
-      throw new Error('Bounds must be provided for creating an offline pack');
+      throw new Error("Bounds must be provided for creating an offline pack");
     }
   }
 

package/javascript/modules/offline/OfflinePack.ts

@@ -1,8 +1,8 @@
-import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+import { NativeModules } from "react-native";
 
-import {NativeModules} from 'react-native';
+import OfflineCreatePackOptions from "./OfflineCreatePackOptions";
 
-const MapLibreGLOfflineManager = NativeModules.MGLOfflineModule;
+const MapLibreGLOfflineManager = NativeModules.MLNOfflineModule;
 
 type OfflinePackStatus = {
   name: string;
@@ -25,7 +25,7 @@ class OfflinePack {
   }
 
   get name(): string | null {
-    const {metadata} = this;
+    const { metadata } = this;
     return metadata && metadata.name;
   }