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

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 {
   /**
@@ -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,36 @@ 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 = (props: MarkerViewProps): ReactElement => {
+  const coordinate = props.coordinate
+    ? toJSONString(makePoint(props.coordinate))
+    : undefined;
 
-  static lastId = 0;
-  __idForPointAnnotation?: string;
-
-  _idForPointAnnotation(): string {
-    if (this.__idForPointAnnotation === undefined) {
-      MarkerView.lastId = MarkerView.lastId + 1;
-      this.__idForPointAnnotation = `MV-${MarkerView.lastId}`;
-    }
-    return this.__idForPointAnnotation;
-  }
+  const idForPointAnnotation = useMemo(() => {
+    MarkerView.lastId = MarkerView.lastId + 1;
+    return `MV-${MarkerView.lastId}`;
+  }, []);
 
-  _getCoordinate(): string | undefined {
-    if (!this.props.coordinate) {
-      return undefined;
-    }
-    return toJSONString(makePoint(this.props.coordinate));
+  if (Platform.OS === "ios") {
+    return <PointAnnotation id={idForPointAnnotation} {...props} />;
   }
 
-  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>
-    );
-  }
-}
+MarkerView.lastId = 0;
+MarkerView.defaultProps = {
+  anchor: { x: 0.5, y: 0.5 },
+  allowOverlap: false,
+  isSelected: false,
+};
 
-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,7 +13,7 @@ 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.
    *
@@ -22,12 +22,10 @@ interface NativeUserLocationProps {
   iosShowsUserHeadingIndicator?: boolean;
 }
 
-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;