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

package/javascript/components/MarkerView.tsx

@@ -1,12 +1,11 @@
-import {toJSONString} from '../utils';
-import {makePoint} from '../utils/geoUtils';
+import React, { ReactElement, useMemo } from "react";
+import { Platform, requireNativeComponent, ViewProps } from "react-native";
 
-import PointAnnotation from './PointAnnotation';
+import PointAnnotation from "./PointAnnotation";
+import { toJSONString } from "../utils";
+import { makePoint } from "../utils/geoUtils";
 
-import React, {ReactElement} from 'react';
-import {Platform, requireNativeComponent, ViewProps} from 'react-native';
-
-export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
+export const NATIVE_MODULE_NAME = "RCTMLNMarkerView";
 
 interface MarkerViewProps extends ViewProps {
   /**
@@ -21,7 +20,7 @@ interface MarkerViewProps extends ViewProps {
    * Note this is only for custom annotations not the default pin view.
    * Defaults to the center of the view.
    */
-  anchor: {
+  anchor?: {
     /**
      * `x` of anchor
      */
@@ -31,8 +30,8 @@ interface MarkerViewProps extends ViewProps {
      */
     y: number;
   };
-  allowOverlap: boolean;
-  isSelected: boolean;
+  allowOverlap?: boolean;
+  isSelected?: boolean;
   /**
    * Expects one child - can be container with multiple elements
    */
@@ -41,7 +40,7 @@ interface MarkerViewProps extends ViewProps {
 
 interface NativeProps extends ViewProps {
   coordinate: string | undefined;
-  anchor: {x: number; y: number};
+  anchor: { x: number; y: number };
   allowOverlap: boolean;
   isSelected: boolean;
 }
@@ -54,51 +53,37 @@ interface NativeProps extends ViewProps {
  * This is based on [MakerView plugin](https://docs.mapbox.com/android/plugins/overview/markerview/) on Android
  * and PointAnnotation on iOS.
  */
-class MarkerView extends React.PureComponent<MarkerViewProps> {
-  static defaultProps = {
-    anchor: {x: 0.5, y: 0.5},
-    allowOverlap: false,
-    isSelected: false,
-  };
+const MarkerView = ({
+  anchor = { x: 0.5, y: 0.5 },
+  allowOverlap = false,
+  isSelected = false,
+  ...rest
+}: MarkerViewProps): ReactElement => {
+  const props = { anchor, allowOverlap, isSelected, ...rest };
+  const coordinate = props.coordinate
+    ? toJSONString(makePoint(props.coordinate))
+    : undefined;
 
-  static lastId = 0;
-  __idForPointAnnotation?: string;
+  const idForPointAnnotation = useMemo(() => {
+    lastId = lastId + 1;
+    return `MV-${lastId}`;
+  }, []);
 
-  _idForPointAnnotation(): string {
-    if (this.__idForPointAnnotation === undefined) {
-      MarkerView.lastId = MarkerView.lastId + 1;
-      this.__idForPointAnnotation = `MV-${MarkerView.lastId}`;
-    }
-    return this.__idForPointAnnotation;
+  if (Platform.OS === "ios") {
+    return <PointAnnotation id={idForPointAnnotation} {...props} />;
   }
 
-  _getCoordinate(): string | undefined {
-    if (!this.props.coordinate) {
-      return undefined;
-    }
-    return toJSONString(makePoint(this.props.coordinate));
-  }
-
-  render(): ReactElement {
-    if (Platform.OS === 'ios') {
-      return (
-        <PointAnnotation id={this._idForPointAnnotation()} {...this.props} />
-      );
-    }
+  const propsToSend = {
+    ...props,
+    coordinate,
+  };
 
-    const props = {
-      ...this.props,
-      anchor: this.props.anchor,
-      coordinate: this._getCoordinate(),
-    };
+  return <RCTMLNMarkerView {...propsToSend}>{props.children}</RCTMLNMarkerView>;
+};
 
-    return (
-      <RCTMGLMarkerView {...props}>{this.props.children}</RCTMGLMarkerView>
-    );
-  }
-}
+let lastId = 0;
 
-const RCTMGLMarkerView =
+const RCTMLNMarkerView =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default MarkerView;

package/javascript/components/NativeUserLocation.tsx

@@ -1,7 +1,7 @@
-import React, {ReactElement} from 'react';
-import {requireNativeComponent} from 'react-native';
+import React, { ReactElement } from "react";
+import { requireNativeComponent } from "react-native";
 
-const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
+const NATIVE_MODULE_NAME = "RCTMLNNativeUserLocation";
 
 interface NativeUserLocationProps {
   /**
@@ -13,21 +13,23 @@ interface NativeUserLocationProps {
    *
    * @platform android
    */
-  androidRenderMode?: 'normal' | 'compass' | 'gps';
+  androidRenderMode?: "normal" | "compass" | "gps";
   /**
    * iOS only. A Boolean value indicating whether the user location annotation may display a permanent heading indicator.
    *
    * @platform ios
    */
   iosShowsUserHeadingIndicator?: boolean;
+  /**
+   * Android only. Set max FPS at which location animators can output updates. Use this setting to limit animation rate of the location puck on higher zoom levels to decrease the stress on the device's CPU which can directly improve battery life, without sacrificing UX.
+   */
+  androidPreferredFramesPerSecond?: number;
 }
 
-class NativeUserLocation extends React.Component<NativeUserLocationProps> {
-  render(): ReactElement {
-    return <RCTMGLNativeUserLocation {...this.props} />;
-  }
-}
+const NativeUserLocation = (props: NativeUserLocationProps): ReactElement => {
+  return <RCTMLNNativeUserLocation {...props} />;
+};
 
-const RCTMGLNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
+const RCTMLNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
 
 export default NativeUserLocation;

package/javascript/components/PointAnnotation.tsx

@@ -1,23 +1,29 @@
-import {toJSONString, isFunction} from '../utils';
-import {makePoint} from '../utils/geoUtils';
-
-import NativeBridgeComponent, {RNMLEvent} from './NativeBridgeComponent';
-
-import React, {Component, ReactElement, SyntheticEvent} from 'react';
+import React, {
+  Component,
+  SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  ReactElement,
+} from "react";
 import {
-  requireNativeComponent,
-  StyleSheet,
   Platform,
+  StyleSheet,
   ViewProps,
-} from 'react-native';
+  requireNativeComponent,
+} from "react-native";
+
+import useNativeBridge, { RNMLEvent } from "../hooks/useNativeBridge";
+import { isFunction, toJSONString } from "../utils";
+import { makePoint } from "../utils/geoUtils";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
+export const NATIVE_MODULE_NAME = "RCTMLNPointAnnotation";
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
   },
 });
 
@@ -29,7 +35,7 @@ type FeaturePayload = GeoJSON.Feature<
   }
 >;
 
-interface PointAnnotationProps {
+export interface PointAnnotationProps {
   /**
    * A string that uniquely identifies the annotation
    */
@@ -98,7 +104,15 @@ interface PointAnnotationProps {
    */
   children: React.ReactElement | [React.ReactElement, React.ReactElement];
 
-  style?: ViewProps['style'];
+  style?: ViewProps["style"];
+}
+
+interface NativeProps extends Omit<PointAnnotationProps, "coordinate"> {
+  coordinate?: string;
+}
+
+export interface PointAnnotationRef {
+  refresh(): void;
 }
 
 /**
@@ -111,111 +125,121 @@ interface PointAnnotationProps {
  * If you need interctive views please use MarkerView,
  * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
  */
-class PointAnnotation extends NativeBridgeComponent(
-  React.PureComponent<PointAnnotationProps>,
-  NATIVE_MODULE_NAME,
-) {
-  static defaultProps = {
-    anchor: {x: 0.5, y: 0.5},
-    draggable: false,
-  };
-
-  _nativeRef: Component<NativeProps> | null = null;
+const PointAnnotation = forwardRef<PointAnnotationRef, PointAnnotationProps>(
+  (
+    {
+      anchor = { x: 0.5, y: 0.5 },
+      draggable = false,
+      ...props
+    }: PointAnnotationProps,
+    ref,
+  ): ReactElement => {
+    useImperativeHandle(
+      ref,
+      (): PointAnnotationRef => ({
+        /**
+         * On android point annotation is rendered offscreen with a canvas into an image.
+         * To rerender the image from the current state of the view call refresh.
+         * Call this for example from Image#onLoad.
+         */
+        refresh,
+      }),
+    );
 
-  constructor(props: PointAnnotationProps) {
-    super(props);
-    this._onSelected = this._onSelected.bind(this);
-    this._onDeselected = this._onDeselected.bind(this);
-    this._onDragStart = this._onDragStart.bind(this);
-    this._onDrag = this._onDrag.bind(this);
-    this._onDragEnd = this._onDragEnd.bind(this);
-  }
+    const { _runNativeCommand, _runPendingNativeCommands } =
+      useNativeBridge(NATIVE_MODULE_NAME);
+    const _nativeRef = useRef<Component<NativeProps> | null>();
 
-  _onSelected(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
-    if (isFunction(this.props.onSelected)) {
-      this.props.onSelected(e.nativeEvent.payload);
+    function refresh(): void {
+      if (Platform.OS === "android") {
+        _runNativeCommand("refresh", _nativeRef.current, []);
+      }
     }
-  }
 
-  _onDeselected(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
-    if (isFunction(this.props.onDeselected)) {
-      this.props.onDeselected(e.nativeEvent.payload);
+    function _onSelected(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onSelected)) {
+        props.onSelected(e.nativeEvent.payload);
+      }
     }
-  }
 
-  _onDragStart(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
-    if (isFunction(this.props.onDragStart)) {
-      this.props.onDragStart(e.nativeEvent.payload);
+    function _onDeselected(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDeselected)) {
+        props.onDeselected(e.nativeEvent.payload);
+      }
     }
-  }
 
-  _onDrag(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
-    if (isFunction(this.props.onDrag)) {
-      this.props.onDrag(e.nativeEvent.payload);
+    function _onDragStart(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDragStart)) {
+        props.onDragStart(e.nativeEvent.payload);
+      }
     }
-  }
 
-  _onDragEnd(e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>): void {
-    if (isFunction(this.props.onDragEnd)) {
-      this.props.onDragEnd(e.nativeEvent.payload);
+    function _onDrag(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDrag)) {
+        props.onDrag(e.nativeEvent.payload);
+      }
     }
-  }
 
-  _getCoordinate(): string | undefined {
-    if (!this.props.coordinate) {
-      return undefined;
+    function _onDragEnd(
+      e: SyntheticEvent<Element, RNMLEvent<FeaturePayload>>,
+    ): void {
+      if (isFunction(props.onDragEnd)) {
+        props.onDragEnd(e.nativeEvent.payload);
+      }
     }
-    return toJSONString(makePoint(this.props.coordinate));
-  }
 
-  /**
-   * On android point annotation is rendered offscreen with a canvas into an image.
-   * To rerender the image from the current state of the view call refresh.
-   * Call this for example from Image#onLoad.
-   */
-  refresh(): void {
-    if (Platform.OS === 'android') {
-      this._runNativeCommand('refresh', this._nativeRef, []);
+    function _getCoordinate(): string | undefined {
+      if (!props.coordinate) {
+        return undefined;
+      }
+      return toJSONString(makePoint(props.coordinate));
     }
-  }
 
-  _setNativeRef(nativeRef: Component<NativeProps> | null): void {
-    this._nativeRef = nativeRef;
-    super._runPendingNativeCommands(nativeRef);
-  }
+    const _setNativeRef = (nativeRef: Component<NativeProps> | null): void => {
+      _nativeRef.current = nativeRef;
+      _runPendingNativeCommands(nativeRef);
+    };
 
-  render(): ReactElement {
-    const props = {
-      ...this.props,
+    const nativeProps = {
+      ...props,
+      anchor,
+      draggable,
       ref: (nativeRef: Component<NativeProps> | null) =>
-        this._setNativeRef(nativeRef),
-      id: this.props.id,
-      title: this.props.title,
-      snippet: this.props.snippet,
-      anchor: this.props.anchor,
-      selected: this.props.selected,
-      draggable: this.props.draggable,
-      style: [this.props.style, styles.container],
-      onMapboxPointAnnotationSelected: this._onSelected,
-      onMapboxPointAnnotationDeselected: this._onDeselected,
-      onMapboxPointAnnotationDragStart: this._onDragStart,
-      onMapboxPointAnnotationDrag: this._onDrag,
-      onMapboxPointAnnotationDragEnd: this._onDragEnd,
-      coordinate: this._getCoordinate(),
+        _setNativeRef(nativeRef),
+      id: props.id,
+      title: props.title,
+      snippet: props.snippet,
+      selected: props.selected,
+      style: [props.style, styles.container],
+      onMapboxPointAnnotationSelected: _onSelected,
+      onMapboxPointAnnotationDeselected: _onDeselected,
+      onMapboxPointAnnotationDragStart: _onDragStart,
+      onMapboxPointAnnotationDrag: _onDrag,
+      onMapboxPointAnnotationDragEnd: _onDragEnd,
+      coordinate: _getCoordinate(),
     };
+
     return (
-      <RCTMGLPointAnnotation {...props}>
-        {this.props.children}
-      </RCTMGLPointAnnotation>
+      <RCTMLNPointAnnotation {...nativeProps}>
+        {props.children}
+      </RCTMLNPointAnnotation>
     );
-  }
-}
+  },
+);
 
-interface NativeProps extends Omit<PointAnnotationProps, 'coordinate'> {
-  coordinate?: string;
-}
+// eslint complains about it
+// not sure why only in this component
+PointAnnotation.displayName = "PointAnnotation";
 
-const RCTMGLPointAnnotation =
+const RCTMLNPointAnnotation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default PointAnnotation;

package/javascript/components/RasterLayer.tsx

@@ -1,16 +1,18 @@
-import {RasterLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { RasterLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactElement} from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNRasterLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
-
-interface RasterLayerProps extends BaseProps, BaseLayerProps {
+export interface RasterLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -18,24 +20,25 @@ interface RasterLayerProps extends BaseProps, BaseLayerProps {
 }
 
 interface NativeProps
-  extends Omit<RasterLayerProps, 'style'>,
+  extends Omit<RasterLayerProps, "style">,
     NativeBaseProps {}
 
-class RasterLayer extends AbstractLayer<RasterLayerProps, NativeProps> {
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  render(): ReactElement {
-    const props = {
-      ...this.baseProps,
-      sourceLayerID: this.props.sourceLayerID,
-    };
-    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
-const RCTMGLRasterLayer =
+const RCTMLNRasterLayer =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
+const RasterLayer: React.FC<RasterLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: RasterLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    RasterLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return <RCTMLNRasterLayer ref={setNativeLayer} {...baseProps} />;
+};
+
 export default RasterLayer;

package/javascript/components/RasterSource.tsx

@@ -1,18 +1,18 @@
-import {cloneReactChildrenWithProps} from '../utils';
-import BaseProps from '../types/BaseProps';
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
 
-import AbstractSource from './AbstractSource';
+import useAbstractSource from "../hooks/useAbstractSource";
+import useOnce from "../hooks/useOnce";
+import BaseProps from "../types/BaseProps";
+import { cloneReactChildrenWithProps } from "../utils";
 
-import {NativeModules, requireNativeComponent} from 'react-native';
-import React, {ReactElement} from 'react';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterSource';
+export const NATIVE_MODULE_NAME = "RCTMLNRasterSource";
 
 const isTileTemplateUrl = (url?: string): url is string =>
   !!url &&
-  (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
+  (url.includes("{z}") || url.includes("{bbox-") || url.includes("{quadkey}"));
 
 interface RasterSourceProps extends BaseProps {
   /**
@@ -60,58 +60,55 @@ interface RasterSourceProps extends BaseProps {
 
 type NativeProps = RasterSourceProps;
 
+const RCTMLNRasterSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
 /**
  * RasterSource is a map content source that supplies raster image tiles to be shown on the map.
  * The location of and metadata about the tiles are defined either by an option dictionary
  * or by an external file that conforms to the TileJSON specification.
  */
-class RasterSource extends AbstractSource<RasterSourceProps, NativeProps> {
-  static defaultProps = {
-    id: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  constructor(props: RasterSourceProps) {
-    super(props);
-    if (isTileTemplateUrl(props.url)) {
+const RasterSource: React.FC<RasterSourceProps> = ({
+  id = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: RasterSourceProps) => {
+  useOnce(() => {
+    if (props.url && props.tileUrlTemplates) {
       console.warn(
         `RasterSource 'url' property contains a Tile URL Template, but is intended for a StyleJSON URL. Please migrate your VectorSource to use: \`tileUrlTemplates=["${props.url}"]\` instead.`,
       );
     }
-  }
+  });
 
-  render(): ReactElement {
-    let {url} = this.props;
-    let {tileUrlTemplates} = this.props;
+  const { setNativeRef } = useAbstractSource<NativeProps>();
 
-    // Swapping url for tileUrlTemplates to provide backward compatiblity
-    // when RasterSource supported only tile url as url prop
-    if (isTileTemplateUrl(url)) {
-      tileUrlTemplates = [url];
-      url = undefined;
-    }
+  let { url, tileUrlTemplates } = props;
 
-    const props = {
-      ...this.props,
-      id: this.props.id,
-      url,
-      tileUrlTemplates,
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      tileSize: this.props.tileSize,
-      tms: this.props.tms,
-      attribution: this.props.attribution,
-    };
-    return (
-      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMGLRasterSource>
-    );
+  // Swapping url for tileUrlTemplates to provide backward compatiblity
+  // when RasterSource supported only tile url as url prop
+  if (isTileTemplateUrl(url)) {
+    tileUrlTemplates = [url];
+    url = undefined;
   }
-}
+  const allProps = {
+    ...props,
+    id,
+    url,
+    tileUrlTemplates,
+    minZoomLevel: props.minZoomLevel,
+    maxZoomLevel: props.maxZoomLevel,
+    tileSize: props.tileSize,
+    tms: props.tms,
+    attribution: props.attribution,
+  };
 
-const RCTMGLRasterSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+  return (
+    <RCTMLNRasterSource ref={setNativeRef} {...allProps}>
+      {cloneReactChildrenWithProps(props.children, {
+        sourceID: id,
+      })}
+    </RCTMLNRasterSource>
+  );
+};
 
 export default RasterSource;