@maplibre/maplibre-react-native 10.0.0-alpha.6 → 10.0.0-alpha.8

package/javascript/components/annotations/Annotation.tsx

@@ -4,7 +4,12 @@ import AnimatedMapPoint from '../../utils/animated/AnimatedPoint';
 import OnPressEvent from '../../types/OnPressEvent';
 import {SymbolLayerStyleProps} from '../../utils/MaplibreStyles';
 
-import React, {ReactElement} from 'react';
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+} from 'react';
 import {Animated as RNAnimated, Easing} from 'react-native';
 
 interface AnnotationProps {
@@ -19,116 +24,137 @@ interface AnnotationProps {
   icon?: string | number | object;
 }
 
-type AnnotationState = {
-  shape: AnimatedMapPoint | GeoJSON.Point | null;
-};
+type Shape = AnimatedMapPoint | GeoJSON.Point;
 
-class Annotation extends React.Component<AnnotationProps, AnnotationState> {
-  static defaultProps = {
-    animated: false,
-    animationDuration: 1000,
-    animationEasingFunction: Easing.linear,
-  };
+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]};
 
-  constructor(props: AnnotationProps) {
-    super(props);
+  if (props.animated) {
+    return new AnimatedMapPoint(point);
+  }
+
+  return point;
+}
 
-    const shape = this._getShapeFromProps(props);
+function isShapeAnimated(shape: Shape): shape is AnimatedMapPoint {
+  return shape instanceof AnimatedMapPoint;
+}
 
-    this.state = {
-      shape: props.animated ? new AnimatedMapPoint(shape) : shape,
+interface AnnotationRef {
+  onPress(event: OnPressEvent): void;
+  symbolStyle: SymbolLayerStyleProps | undefined;
+}
+
+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]);
+
+    const onPressProp = props.onPress;
 
-  get symbolStyle(): SymbolLayerStyleProps | undefined {
-    if (!this.props.icon) {
-      return undefined;
+    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>
-        }>
+        id={props.id}
+        onPress={_onPress}
+        shape={shape as RNAnimated.WithAnimatedObject<GeoJSON.Point>}>
         {children}
       </Animated.ShapeSource>
     );
-  }
-}
+  },
+);
+
+Annotation.displayName = 'Annotation';
 
 export default Annotation;

package/javascript/{components/AbstractLayer.tsx → hooks/useAbstractLayer.ts}

@@ -1,10 +1,14 @@
-/* eslint react/prop-types:0  */
 import {StyleValue, transformStyle} from '../utils/StyleValue';
 import {getFilter} from '../utils/filterUtils';
-import {AllLayerStyleProps, FilterExpression} from '../utils/MaplibreStyles';
+import {
+  AllLayerStyleProps,
+  ExpressionField,
+  ExpressionName,
+  FilterExpression,
+} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
 
-import React from 'react';
+import React, {useMemo, useRef} from 'react';
 import {processColor, NativeMethods} from 'react-native';
 
 export interface BaseLayerProps {
@@ -56,52 +60,65 @@ export interface NativeBaseProps {
   reactStyle?: {[key: string]: StyleValue};
 }
 
-class AbstractLayer<
+export default function useAbstractLayer<
   Props extends BaseProps,
   NativeProps extends NativeBaseProps,
-> extends React.PureComponent<Props & BaseLayerProps> {
-  get baseProps(): Props {
+>(
+  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 {
-      ...this.props,
-      id: this.props.id,
-      sourceID: this.props.sourceID,
-      reactStyle: this.getStyle(),
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      aboveLayerID: this.props.aboveLayerID,
-      belowLayerID: this.props.belowLayerID,
-      layerIndex: this.props.layerIndex,
-      filter: getFilter(this.props.filter),
+      ...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,
     };
-  }
-
-  nativeLayer: (React.Component<NativeProps> & Readonly<NativeMethods>) | null =
-    null;
+  }, [props]);
 
-  setNativeLayer = (
+  const setNativeLayer = (
     instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
   ): void => {
-    this.nativeLayer = instance;
+    nativeLayer.current = instance;
   };
 
-  getStyleTypeFormatter(styleType: string): typeof processColor | undefined {
+  const getStyleTypeFormatter = (
+    styleType: string,
+  ): typeof processColor | undefined => {
     return styleType === 'color' ? processColor : undefined;
-  }
-
-  getStyle(): {[key: string]: StyleValue} | undefined {
-    return transformStyle(this.props.style);
-  }
+  };
 
-  setNativeProps(props: {[key: string]: unknown}): void {
-    if (this.nativeLayer) {
-      let propsToPass = props;
-      if (props.style) {
-        propsToPass = {...props, reactStyle: this.getStyle()};
+  const setNativeProps = (nativeProps: {[key: string]: unknown}): void => {
+    if (nativeLayer.current) {
+      let propsToPass = nativeProps;
+      if (nativeProps.style) {
+        propsToPass = {...nativeProps, reactStyle: transformStyle(props.style)};
       }
-      this.nativeLayer.setNativeProps(propsToPass);
+      nativeLayer.current.setNativeProps(propsToPass);
     }
-  }
-}
+  };
 
-export default AbstractLayer;
+  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 {runNativeCommand, isAndroid, NativeArg} from '../utils';
+
+import React, {Component, SyntheticEvent, useRef} from 'react';
+
+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/utils/Logger.ts

@@ -120,11 +120,11 @@ class Logger {
       const {message} = log;
       const level = this.effectiveLevel(log);
       if (level === 'error') {
-        console.error('Mapbox error', message, log);
+        console.error('MapLibre error', message, log);
       } else if (level === 'warning') {
-        console.warn('Mapbox warning', message, log);
+        console.warn('MapLibre warning', message, log);
       } else {
-        console.log(`Mapbox [${level}]`, message, log);
+        console.log(`MapLibre [${level}]`, message, log);
       }
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "A MapLibre GL Native plugin for creating maps in React Native",
-  "version": "10.0.0-alpha.6",
+  "version": "10.0.0-alpha.8",
   "publishConfig": {
     "access": "public"
   },
@@ -28,6 +28,7 @@
     "unittest:single": "jest --testNamePattern",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "lint:single": "eslint",
     "prepack": "pinst --disable && yarn build:plugin",
     "test:plugin": "jest plugin",
     "build:plugin": "tsc --build plugin",

package/scripts/templates/RCTMLNStyleFactory.java.ejs

@@ -6,20 +6,20 @@
 
 package com.maplibre.rctmln.components.styles;
 
-import com.mapbox.mapboxsdk.style.layers.BackgroundLayer;
-import com.mapbox.mapboxsdk.style.layers.CircleLayer;
-import com.mapbox.mapboxsdk.style.layers.FillExtrusionLayer;
-import com.mapbox.mapboxsdk.style.layers.FillLayer;
-import com.mapbox.mapboxsdk.style.layers.LineLayer;
-import com.mapbox.mapboxsdk.style.layers.PropertyFactory;
-import com.mapbox.mapboxsdk.style.layers.PropertyValue;
-import com.mapbox.mapboxsdk.style.layers.RasterLayer;
-import com.mapbox.mapboxsdk.style.layers.SymbolLayer;
-import com.mapbox.mapboxsdk.style.layers.HeatmapLayer;
-import com.mapbox.mapboxsdk.style.layers.HillshadeLayer;
-import com.mapbox.mapboxsdk.style.layers.TransitionOptions;
-import com.mapbox.mapboxsdk.style.light.Light;
-import com.mapbox.mapboxsdk.style.light.Position;
+import org.maplibre.android.style.layers.BackgroundLayer;
+import org.maplibre.android.style.layers.CircleLayer;
+import org.maplibre.android.style.layers.FillExtrusionLayer;
+import org.maplibre.android.style.layers.FillLayer;
+import org.maplibre.android.style.layers.LineLayer;
+import org.maplibre.android.style.layers.PropertyFactory;
+import org.maplibre.android.style.layers.PropertyValue;
+import org.maplibre.android.style.layers.RasterLayer;
+import org.maplibre.android.style.layers.SymbolLayer;
+import org.maplibre.android.style.layers.HeatmapLayer;
+import org.maplibre.android.style.layers.HillshadeLayer;
+import org.maplibre.android.style.layers.TransitionOptions;
+import org.maplibre.android.style.light.Light;
+import org.maplibre.android.style.light.Position;
 import com.maplibre.rctmln.utils.DownloadMapImageTask;
 
 import java.util.List;

package/javascript/components/AbstractSource.tsx

@@ -1,27 +0,0 @@
-import BaseProps from '../types/BaseProps';
-
-import React from 'react';
-import {NativeMethods} from 'react-native';
-
-class AbstractSource<
-  PropsType extends BaseProps,
-  NativePropsType extends object,
-> extends React.PureComponent<PropsType> {
-  _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
-
-  setNativeProps(props: NativePropsType): void {
-    if (this._nativeRef) {
-      this._nativeRef.setNativeProps(props);
-    }
-  }
-
-  setNativeRef: (
-    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
-  ) => void = (
-    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
-  ) => {
-    this._nativeRef = instance;
-  };
-}
-
-export default AbstractSource;