@maplibre/maplibre-react-native 10.0.0-alpha.5 → 10.0.0-alpha.7

package/javascript/components/MarkerView.tsx

@@ -3,7 +3,7 @@ import {makePoint} from '../utils/geoUtils';
 
 import PointAnnotation from './PointAnnotation';
 
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useMemo} from 'react';
 import {Platform, requireNativeComponent, ViewProps} from 'react-native';
 
 export const NATIVE_MODULE_NAME = 'RCTMLNMarkerView';
@@ -54,49 +54,34 @@ 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,
-  };
-
-  static lastId = 0;
-  __idForPointAnnotation?: string;
+const MarkerView = (props: MarkerViewProps): ReactElement => {
+  const coordinate = props.coordinate
+    ? toJSONString(makePoint(props.coordinate))
+    : undefined;
 
-  _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 (
-      <RCTMLNMarkerView {...props}>{this.props.children}</RCTMLNMarkerView>
-    );
-  }
-}
+MarkerView.lastId = 0;
+MarkerView.defaultProps = {
+  anchor: {x: 0.5, y: 0.5},
+  allowOverlap: false,
+  isSelected: false,
+};
 
 const RCTMLNMarkerView =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/javascript/components/NativeUserLocation.tsx

@@ -22,11 +22,9 @@ interface NativeUserLocationProps {
   iosShowsUserHeadingIndicator?: boolean;
 }
 
-class NativeUserLocation extends React.Component<NativeUserLocationProps> {
-  render(): ReactElement {
-    return <RCTMLNNativeUserLocation {...this.props} />;
-  }
-}
+const NativeUserLocation = (props: NativeUserLocationProps): ReactElement => {
+  return <RCTMLNNativeUserLocation {...props} />;
+};
 
 const RCTMLNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
 

package/javascript/components/PointAnnotation.tsx

@@ -1,14 +1,20 @@
-import {toJSONString, isFunction} from '../utils';
+import useNativeBridge, {RNMLEvent} from '../hooks/useNativeBridge';
+import {isFunction, toJSONString} 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,
+  requireNativeComponent,
 } from 'react-native';
 
 export const NATIVE_MODULE_NAME = 'RCTMLNPointAnnotation';
@@ -29,7 +35,7 @@ type FeaturePayload = GeoJSON.Feature<
   }
 >;
 
-interface PointAnnotationProps {
+export interface PointAnnotationProps {
   /**
    * A string that uniquely identifies the annotation
    */
@@ -101,6 +107,14 @@ interface PointAnnotationProps {
   style?: ViewProps['style'];
 }
 
+interface NativeProps extends Omit<PointAnnotationProps, 'coordinate'> {
+  coordinate?: string;
+}
+
+export interface PointAnnotationRef {
+  refresh(): void;
+}
+
 /**
  * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
  *
@@ -111,109 +125,119 @@ 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 (
-      <RCTMLNPointAnnotation {...props}>
-        {this.props.children}
+      <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 RCTMLNPointAnnotation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/javascript/components/RasterLayer.tsx

@@ -1,16 +1,18 @@
 import {RasterLayerStyleProps} from '../utils/MaplibreStyles';
 import BaseProps from '../types/BaseProps';
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from '../hooks/useAbstractLayer';
 
-import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
-
-import React, {ReactElement} from 'react';
+import React from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
 const MapLibreGL = NativeModules.MLNModule;
 
 export const NATIVE_MODULE_NAME = 'RCTMLNRasterLayer';
 
-interface RasterLayerProps extends BaseProps, BaseLayerProps {
+export interface RasterLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -21,21 +23,22 @@ interface NativeProps
   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 <RCTMLNRasterLayer ref={this.setNativeLayer} {...props} />;
-  }
-}
-
 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,10 +1,10 @@
 import {cloneReactChildrenWithProps} from '../utils';
 import BaseProps from '../types/BaseProps';
-
-import AbstractSource from './AbstractSource';
+import useAbstractSource from '../hooks/useAbstractSource';
+import useOnce from '../hooks/useOnce';
 
 import {NativeModules, requireNativeComponent} from 'react-native';
-import React, {ReactElement} from 'react';
+import React from 'react';
 
 const MapLibreGL = NativeModules.MLNModule;
 
@@ -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 (
-      <RCTMLNRasterSource ref={this.setNativeRef} {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMLNRasterSource>
-    );
+  // 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 RCTMLNRasterSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+  return (
+    <RCTMLNRasterSource ref={setNativeRef} {...allProps}>
+      {cloneReactChildrenWithProps(props.children, {
+        sourceID: id,
+      })}
+    </RCTMLNRasterSource>
+  );
+};
 
 export default RasterSource;