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

package/javascript/components/MapView.tsx

@@ -1,13 +1,16 @@
-import {FilterExpression} from '../utils/MaplibreStyles';
-import {Location} from '../modules/location/locationManager';
-import {isFunction, isAndroid} from '../utils';
-import {getFilter} from '../utils/filterUtils';
-import Logger from '../utils/Logger';
-import BaseProps from '../types/BaseProps';
-
-import NativeBridgeComponent from './NativeBridgeComponent';
-
-import React, {Component, ReactElement, ReactNode} from 'react';
+import debounce from "debounce";
+import React, {
+  Component,
+  memo,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   View,
   StyleSheet,
@@ -15,24 +18,31 @@ import {
   requireNativeComponent,
   ViewProps,
   NativeMethods,
-  LayoutChangeEvent,
   NativeSyntheticEvent,
-} from 'react-native';
-import {debounce} from 'debounce';
-
-const MapLibreGL = NativeModules.MGLModule;
+} from "react-native";
+
+import useNativeBridge from "../hooks/useNativeBridge";
+import useOnce from "../hooks/useOnce";
+import { Location } from "../modules/location/locationManager";
+import BaseProps from "../types/BaseProps";
+import { isFunction, isAndroid } from "../utils";
+import Logger from "../utils/Logger";
+import { FilterExpression } from "../utils/MaplibreStyles";
+import { getFilter } from "../utils/filterUtils";
+
+const MapLibreGL = NativeModules.MLNModule;
 if (MapLibreGL == null) {
   console.error(
-    'Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.',
+    "Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.",
   );
 }
 
-export const NATIVE_MODULE_NAME = 'RCTMGLMapView';
+export const NATIVE_MODULE_NAME = "RCTMLNMapView";
 
-export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = 'RCTMGLAndroidTextureMapView';
+export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = "RCTMLNAndroidTextureMapView";
 
 const styles = StyleSheet.create({
-  matchParent: {flex: 1},
+  matchParent: { flex: 1 },
 });
 
 const defaultStyleURL = MapLibreGL.StyleURL.Street;
@@ -42,14 +52,11 @@ export interface RegionPayload {
   heading: number;
   animated: boolean;
   isUserInteraction: boolean;
-  visibleBounds: GeoJSON.Position[];
+  visibleBounds: VisibleBounds;
   pitch: number;
 }
 
-interface Bounds {
-  ne: GeoJSON.Position;
-  sw: GeoJSON.Position;
-}
+type VisibleBounds = [northEast: GeoJSON.Position, southWest: GeoJSON.Position];
 
 interface MapViewProps extends BaseProps {
   /**
@@ -59,7 +66,7 @@ interface MapViewProps extends BaseProps {
   /**
    * Style for wrapping React Native View
    */
-  style?: ViewProps['style'];
+  style?: ViewProps["style"];
   /**
    * Style URL for map - notice, if non is set it _will_ default to `MapLibreGL.StyleURL.Default`
    */
@@ -70,7 +77,7 @@ interface MapViewProps extends BaseProps {
   styleJSON?: string;
   /**
    * iOS: The preferred frame rate at which the map view is rendered.
-   * The default value for this property is MGLMapViewPreferredFramesPerSecondDefault,
+   * The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,
    * which will adaptively set the preferred frame rate based on the capability of
    * the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.
    *
@@ -110,22 +117,10 @@ interface MapViewProps extends BaseProps {
    * Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map
    */
   attributionPosition?:
-    | {
-        top?: number;
-        left?: number;
-      }
-    | {
-        top?: number;
-        right?: number;
-      }
-    | {
-        bottom?: number;
-        left?: number;
-      }
-    | {
-        bottom?: number;
-        right?: number;
-      };
+    | { top?: number; left?: number }
+    | { top?: number; right?: number }
+    | { bottom?: number; left?: number }
+    | { bottom?: number; right?: number };
   /**
    * MapView's tintColor
    */
@@ -138,22 +133,10 @@ interface MapViewProps extends BaseProps {
    * Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map
    */
   logoPosition?:
-    | {
-        top?: number;
-        left?: number;
-      }
-    | {
-        top?: number;
-        right?: number;
-      }
-    | {
-        bottom?: number;
-        left?: number;
-      }
-    | {
-        bottom?: number;
-        right?: number;
-      };
+    | { top?: number; left?: number }
+    | { top?: number; right?: number }
+    | { bottom?: number; left?: number }
+    | { bottom?: number; right?: number };
   /**
    * Enable/Disable the compass from appearing on the map
    */
@@ -265,560 +248,632 @@ type CallableProps = {
     : never;
 }[keyof MapViewProps];
 
-interface NativeProps extends Omit<MapViewProps, 'onPress' | 'onLongPress'> {
-  onPress(event: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void;
-  onLongPress(event: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void;
+interface NativeProps extends Omit<MapViewProps, "onPress" | "onLongPress"> {
+  onPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
+  onLongPress(event: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>): void;
 }
 
-export interface MapViewState {
-  isReady: boolean;
-  width: number;
-  height: number;
-  region: RegionPayload | null;
-  isUserInteraction: boolean;
+export interface MapViewRef {
+  getPointInView: (coordinate: GeoJSON.Position) => Promise<GeoJSON.Point>;
+  getCoordinateFromView: (point: number[]) => Promise<GeoJSON.Position>;
+  getVisibleBounds: () => Promise<VisibleBounds>;
+  queryRenderedFeaturesAtPoint: (
+    point: [screenPointX: number, screenPointY: number],
+    filter: FilterExpression | undefined,
+    layerIDs: string[],
+  ) => Promise<GeoJSON.FeatureCollection>;
+  queryRenderedFeaturesInRect: (
+    bbox: GeoJSON.BBox,
+    filter: FilterExpression | undefined,
+    layerIDs: string[],
+  ) => Promise<GeoJSON.FeatureCollection>;
+  setCamera: () => void;
+  takeSnap: (writeToDisk?: boolean) => Promise<string>;
+  getZoom: () => Promise<number>;
+  getCenter: () => Promise<GeoJSON.Position>;
+  setSourceVisibility: (
+    visible: boolean,
+    sourceId: string,
+    sourceLayerId?: string | null,
+  ) => void;
+  showAttribution: () => Promise<void>;
+  setNativeProps: (props: NativeProps) => void;
 }
 
 /**
  * MapView backed by MapLibre GL Native
  */
-class MapView extends NativeBridgeComponent(
-  React.Component<MapViewProps, MapViewState>,
-  NATIVE_MODULE_NAME,
-) {
-  static defaultProps = {
-    localizeLabels: false,
-    scrollEnabled: true,
-    pitchEnabled: true,
-    rotateEnabled: true,
-    attributionEnabled: true,
-    logoEnabled: false,
-    surfaceView: false,
-    regionWillChangeDebounceTime: 10,
-    regionDidChangeDebounceTime: 500,
-  };
-
-  logger: Logger;
-  _nativeRef?: RCTMGLMapViewRefType;
-  _onDebouncedRegionWillChange: ReturnType<typeof debounce>;
-  _onDebouncedRegionDidChange: ReturnType<typeof debounce>;
-
-  constructor(props: MapViewProps) {
-    super(props);
-
-    this.logger = Logger.sharedInstance();
-    this.logger.start();
-
-    this.state = {
-      isReady: false,
-      region: null,
-      width: 0,
-      height: 0,
-      isUserInteraction: false,
-    };
-
-    this._onPress = this._onPress.bind(this);
-    this._onLongPress = this._onLongPress.bind(this);
-    this._onChange = this._onChange.bind(this);
-    this._onLayout = this._onLayout.bind(this);
-
-    // debounced map change methods
-    this._onDebouncedRegionWillChange = debounce(
-      this._onRegionWillChange.bind(this),
-      props.regionWillChangeDebounceTime,
-      true,
-    );
-
-    this._onDebouncedRegionDidChange = debounce(
-      this._onRegionDidChange.bind(this),
-      props.regionDidChangeDebounceTime,
-    );
-  }
-
-  componentDidMount(): void {
-    this._setHandledMapChangedEvents(this.props);
-  }
-
-  componentWillUnmount(): void {
-    this._onDebouncedRegionWillChange.clear();
-    this._onDebouncedRegionDidChange.clear();
-    this.logger.stop();
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: MapViewProps): void {
-    this._setHandledMapChangedEvents(nextProps);
-  }
-
-  _setHandledMapChangedEvents(props: MapViewProps): void {
-    if (isAndroid()) {
-      const events = [];
-
-      if (props.onRegionWillChange) {
-        events.push(MapLibreGL.EventTypes.RegionWillChange);
-      }
-      if (props.onRegionIsChanging) {
-        events.push(MapLibreGL.EventTypes.RegionIsChanging);
-      }
-      if (props.onRegionDidChange) {
-        events.push(MapLibreGL.EventTypes.RegionDidChange);
-      }
-      if (props.onUserLocationUpdate) {
-        events.push(MapLibreGL.EventTypes.UserLocationUpdated);
-      }
-      if (props.onWillStartLoadingMap) {
-        events.push(MapLibreGL.EventTypes.WillStartLoadingMap);
-      }
-      if (props.onDidFinishLoadingMap) {
-        events.push(MapLibreGL.EventTypes.DidFinishLoadingMap);
-      }
-      if (props.onDidFailLoadingMap) {
-        events.push(MapLibreGL.EventTypes.DidFailLoadingMap);
-      }
-      if (props.onWillStartRenderingFrame) {
-        events.push(MapLibreGL.EventTypes.WillStartRenderingFrame);
-      }
-      if (props.onDidFinishRenderingFrame) {
-        events.push(MapLibreGL.EventTypes.DidFinishRenderingFrame);
-      }
-      if (props.onDidFinishRenderingFrameFully) {
-        events.push(MapLibreGL.EventTypes.DidFinishRenderingFrameFully);
-      }
-      if (props.onWillStartRenderingMap) {
-        events.push(MapLibreGL.EventTypes.WillStartRenderingMap);
-      }
-      if (props.onDidFinishRenderingMap) {
-        events.push(MapLibreGL.EventTypes.DidFinishRenderingMap);
-      }
-      if (props.onDidFinishRenderingMapFully) {
-        events.push(MapLibreGL.EventTypes.DidFinishRenderingMapFully);
-      }
-      if (props.onDidFinishLoadingStyle) {
-        events.push(MapLibreGL.EventTypes.DidFinishLoadingStyle);
-      }
 
-      this._runNativeCommand(
-        'setHandledMapChangedEvents',
-        this._nativeRef,
-        events,
+const MapView = memo(
+  React.forwardRef<MapViewRef, MapViewProps>(
+    (
+      {
+        localizeLabels = false,
+        scrollEnabled = true,
+        pitchEnabled = true,
+        rotateEnabled = true,
+        attributionEnabled = true,
+        logoEnabled = false,
+        surfaceView = false,
+        regionWillChangeDebounceTime = 10,
+        regionDidChangeDebounceTime = 500,
+        ...props
+      }: MapViewProps,
+      ref,
+    ) => {
+      // * exposes the methods of the function component so we don't break projects that depend on calling this methods
+      useImperativeHandle(
+        ref,
+        (): MapViewRef => ({
+          /**
+           * Converts a geographic coordinate to a point in the given view’s coordinate system.
+           *
+           * @example
+           * const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);
+           *
+           * @param {Array<Number>} coordinate - A point expressed in the map view's coordinate system.
+           * @return {Array}
+           */
+          getPointInView,
+          /**
+           * Converts a point in the given view’s coordinate system to a geographic coordinate.
+           *
+           * @example
+           * const coordinate = await this._map.getCoordinateFromView([100, 100]);
+           *
+           * @param {Array<Number>} point - A point expressed in the given view’s coordinate system.
+           * @return {Array}
+           */
+          getCoordinateFromView,
+          /**
+           * The coordinate bounds(ne, sw) visible in the users’s viewport.
+           *
+           * @example
+           * const visibleBounds = await this._map.getVisibleBounds();
+           *
+           * @return {Array}
+           */
+          getVisibleBounds,
+          /**
+           * Returns an array of rendered map features that intersect with a given point.
+           *
+           * @example
+           * this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])
+           *
+           * @param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.
+           * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
+           * @param  {Array=} layerIDs - A array of layer id's to filter the features by
+           * @return {GeoJSON.FeatureCollection}
+           */
+          queryRenderedFeaturesAtPoint,
+          /**
+           * Returns an array of rendered map features that intersect with the given rectangle,
+           * restricted to the given style layers and filtered by the given predicate.
+           *
+           * @example
+           * this._map.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2'])
+           *
+           * @param  {Array<Number>} bbox - A rectangle expressed in the map view’s coordinate system.
+           * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
+           * @param  {Array=} layerIDs -  A array of layer id's to filter the features by
+           * @return {GeoJSON.FeatureCollection}
+           */
+          queryRenderedFeaturesInRect,
+          /**
+           * Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.
+           */
+          setCamera,
+          /**
+           * Takes snapshot of map with current tiles and returns a URI to the image
+           * @param  {Boolean} writeToDisk If true will create a temp file, otherwise it is in base64
+           * @return {String}
+           */
+          takeSnap,
+          /**
+           * Returns the current zoom of the map view.
+           *
+           * @example
+           * const zoom = await this._map.getZoom();
+           *
+           * @return {Number}
+           */
+          getZoom,
+          /**
+           * Returns the map's geographical centerpoint
+           *
+           * @example
+           * const center = await this._map.getCenter();
+           *
+           * @return {Array<Number>} Coordinates
+           */
+          getCenter,
+          /**
+           * Sets the visibility of all the layers referencing the specified `sourceLayerId` and/or `sourceId`
+           *
+           * @example
+           * await this._map.setSourceVisibility(false, 'composite', 'building')
+           *
+           * @param {boolean} visible - Visibility of the layers
+           * @param {String} sourceId - Identifier of the target source (e.g. 'composite')
+           * @param {String=} sourceLayerId - Identifier of the target source-layer (e.g. 'building')
+           */
+          setSourceVisibility,
+          /**
+           * Show the attribution and telemetry action sheet.
+           * If you implement a custom attribution button, you should add this action to the button.
+           */
+          showAttribution,
+          setNativeProps,
+        }),
       );
-    }
-  }
 
-  /**
-   * Converts a geographic coordinate to a point in the given view’s coordinate system.
-   *
-   * @example
-   * const pointInView = await this._map.getPointInView([-37.817070, 144.949901]);
-   *
-   * @param {Array<Number>} coordinate - A point expressed in the map view's coordinate system.
-   * @return {Array}
-   */
-  async getPointInView(coordinate: GeoJSON.Position): Promise<GeoJSON.Point> {
-    const res: {pointInView: GeoJSON.Point} = await this._runNativeCommand(
-      'getPointInView',
-      this._nativeRef,
-      [coordinate],
-    );
-    return res.pointInView;
-  }
+      const {
+        _runNativeCommand,
+        _runPendingNativeCommands,
+        _onAndroidCallback,
+      } = useNativeBridge(NATIVE_MODULE_NAME);
+      const logger = useRef<Logger>(Logger.sharedInstance());
+      // * start the logger before anyuseEffect
+      useOnce(() => {
+        logger.current.start();
+      });
+      const _nativeRef = useRef<RCTMLNMapViewRefType>();
+      const [isReady, setIsReady] = useState(false);
+
+      // Cleanups on unmount
+      useEffect(() => {
+        const currentLogger = logger.current;
+
+        return (): void => {
+          _onDebouncedRegionWillChange.clear();
+          _onDebouncedRegionDidChange.clear();
+          currentLogger.stop();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      // This will run on every render
+      // so similar to componentDidMount and UNSAFE_componentWillReceiveProps
+      useEffect(() => {
+        _setHandledMapChangedEvents(props);
+      }, [props]);
+
+      const _setHandledMapChangedEvents = (props: MapViewProps): void => {
+        if (isAndroid()) {
+          const events = [];
+
+          if (props.onRegionWillChange) {
+            events.push(MapLibreGL.EventTypes.RegionWillChange);
+          }
+          if (props.onRegionIsChanging) {
+            events.push(MapLibreGL.EventTypes.RegionIsChanging);
+          }
+          if (props.onRegionDidChange) {
+            events.push(MapLibreGL.EventTypes.RegionDidChange);
+          }
+          if (props.onUserLocationUpdate) {
+            events.push(MapLibreGL.EventTypes.UserLocationUpdated);
+          }
+          if (props.onWillStartLoadingMap) {
+            events.push(MapLibreGL.EventTypes.WillStartLoadingMap);
+          }
+          if (props.onDidFinishLoadingMap) {
+            events.push(MapLibreGL.EventTypes.DidFinishLoadingMap);
+          }
+          if (props.onDidFailLoadingMap) {
+            events.push(MapLibreGL.EventTypes.DidFailLoadingMap);
+          }
+          if (props.onWillStartRenderingFrame) {
+            events.push(MapLibreGL.EventTypes.WillStartRenderingFrame);
+          }
+          if (props.onDidFinishRenderingFrame) {
+            events.push(MapLibreGL.EventTypes.DidFinishRenderingFrame);
+          }
+          if (props.onDidFinishRenderingFrameFully) {
+            events.push(MapLibreGL.EventTypes.DidFinishRenderingFrameFully);
+          }
+          if (props.onWillStartRenderingMap) {
+            events.push(MapLibreGL.EventTypes.WillStartRenderingMap);
+          }
+          if (props.onDidFinishRenderingMap) {
+            events.push(MapLibreGL.EventTypes.DidFinishRenderingMap);
+          }
+          if (props.onDidFinishRenderingMapFully) {
+            events.push(MapLibreGL.EventTypes.DidFinishRenderingMapFully);
+          }
+          if (props.onDidFinishLoadingStyle) {
+            events.push(MapLibreGL.EventTypes.DidFinishLoadingStyle);
+          }
+
+          _runNativeCommand(
+            "setHandledMapChangedEvents",
+            _nativeRef.current,
+            events,
+          );
+        }
+      };
 
-  /**
-   * Converts a point in the given view’s coordinate system to a geographic coordinate.
-   *
-   * @example
-   * const coordinate = await this._map.getCoordinateFromView([100, 100]);
-   *
-   * @param {Array<Number>} point - A point expressed in the given view’s coordinate system.
-   * @return {Array}
-   */
-  async getCoordinateFromView(point: number[]): Promise<GeoJSON.Position> {
-    const res: {coordinateFromView: GeoJSON.Position} =
-      await this._runNativeCommand('getCoordinateFromView', this._nativeRef, [
-        point,
-      ]);
-    return res.coordinateFromView;
-  }
+      const getPointInView = async (
+        coordinate: GeoJSON.Position,
+      ): Promise<GeoJSON.Point> => {
+        const res: { pointInView: GeoJSON.Point } = await _runNativeCommand(
+          "getPointInView",
+          _nativeRef.current,
+          [coordinate],
+        );
+        return res.pointInView;
+      };
 
-  /**
-   * The coordinate bounds(ne, sw) visible in the users’s viewport.
-   *
-   * @example
-   * const visibleBounds = await this._map.getVisibleBounds();
-   *
-   * @return {Array}
-   */
-  async getVisibleBounds(): Promise<Bounds> {
-    const res: {visibleBounds: Bounds} = await this._runNativeCommand(
-      'getVisibleBounds',
-      this._nativeRef,
-    );
-    return res.visibleBounds;
-  }
+      const getCoordinateFromView = async (
+        point: number[],
+      ): Promise<GeoJSON.Position> => {
+        const res: { coordinateFromView: GeoJSON.Position } =
+          await _runNativeCommand("getCoordinateFromView", _nativeRef.current, [
+            point,
+          ]);
+        return res.coordinateFromView;
+      };
 
-  /**
-   * Returns an array of rendered map features that intersect with a given point.
-   *
-   * @example
-   * this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])
-   *
-   * @param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.
-   * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
-   * @param  {Array=} layerIDs - A array of layer id's to filter the features by
-   * @return {GeoJSON.FeatureCollection}
-   */
-  async queryRenderedFeaturesAtPoint(
-    coordinate: GeoJSON.Position,
-    filter?: FilterExpression,
-    layerIDs = [],
-  ): Promise<GeoJSON.FeatureCollection> {
-    if (!coordinate || coordinate.length < 2) {
-      throw new Error('Must pass in valid coordinate[lng, lat]');
-    }
-
-    const res: {data: string | GeoJSON.FeatureCollection} =
-      await this._runNativeCommand(
-        'queryRenderedFeaturesAtPoint',
-        this._nativeRef,
-        [coordinate, getFilter(filter), layerIDs],
-      );
+      const getVisibleBounds = async (): Promise<VisibleBounds> => {
+        const res: { visibleBounds: VisibleBounds } = await _runNativeCommand(
+          "getVisibleBounds",
+          _nativeRef.current,
+        );
+        return res.visibleBounds;
+      };
 
-    if (isAndroid()) {
-      return JSON.parse(res.data as string);
-    }
+      const queryRenderedFeaturesAtPoint = async (
+        point: [screenPointX: number, screenPointY: number],
+        filter?: FilterExpression,
+        layerIDs: string[] = [],
+      ): Promise<GeoJSON.FeatureCollection> => {
+        if (!point || point.length < 2) {
+          throw new Error(
+            "Must pass in valid point in the map view's cooridnate system[x, y]",
+          );
+        }
 
-    return res.data as GeoJSON.FeatureCollection;
-  }
+        const res: { data: string | GeoJSON.FeatureCollection } =
+          await _runNativeCommand(
+            "queryRenderedFeaturesAtPoint",
+            _nativeRef.current,
+            [point, getFilter(filter), layerIDs],
+          );
 
-  /**
-   * Returns an array of rendered map features that intersect with the given rectangle,
-   * restricted to the given style layers and filtered by the given predicate.
-   *
-   * @example
-   * this._map.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2'])
-   *
-   * @param  {Array<Number>} bbox - A rectangle expressed in the map view’s coordinate system.
-   * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
-   * @param  {Array=} layerIDs -  A array of layer id's to filter the features by
-   * @return {GeoJSON.FeatureCollection}
-   */
-  async queryRenderedFeaturesInRect(
-    bbox: GeoJSON.BBox,
-    filter?: FilterExpression,
-    layerIDs = [],
-  ): Promise<GeoJSON.FeatureCollection> {
-    if (!bbox || bbox.length !== 4) {
-      throw new Error(
-        'Must pass in a valid bounding box[top, right, bottom, left]',
+        if (isAndroid()) {
+          return JSON.parse(res.data as string);
+        }
+
+        return res.data as GeoJSON.FeatureCollection;
+      };
+
+      const queryRenderedFeaturesInRect = async (
+        bbox: GeoJSON.BBox,
+        filter?: FilterExpression,
+        layerIDs: string[] = [],
+      ): Promise<GeoJSON.FeatureCollection> => {
+        if (!bbox || bbox.length !== 4) {
+          throw new Error(
+            "Must pass in a valid bounding box[top, right, bottom, left]",
+          );
+        }
+        const res: { data: string | GeoJSON.FeatureCollection } =
+          await _runNativeCommand(
+            "queryRenderedFeaturesInRect",
+            _nativeRef.current,
+            [bbox, getFilter(filter), layerIDs],
+          );
+
+        if (isAndroid()) {
+          return JSON.parse(res.data as string);
+        }
+
+        return res.data as GeoJSON.FeatureCollection;
+      };
+
+      const setCamera = (): void => {
+        console.warn(
+          "MapView.setCamera is deprecated - please use Camera#setCamera",
+        );
+      };
+
+      const takeSnap = async (writeToDisk = false): Promise<string> => {
+        const res: { uri: string } = await _runNativeCommand(
+          "takeSnap",
+          _nativeRef.current,
+          [writeToDisk],
+        );
+        return res.uri;
+      };
+
+      const getZoom = async (): Promise<number> => {
+        const res: { zoom: number } = await _runNativeCommand(
+          "getZoom",
+          _nativeRef.current,
+        );
+        return res.zoom;
+      };
+
+      const getCenter = async (): Promise<GeoJSON.Position> => {
+        const res: { center: GeoJSON.Position } = await _runNativeCommand(
+          "getCenter",
+          _nativeRef.current,
+        );
+        return res.center;
+      };
+
+      const setSourceVisibility = (
+        visible: boolean,
+        sourceId: string,
+        sourceLayerId: string | null = null,
+      ): void => {
+        _runNativeCommand("setSourceVisibility", _nativeRef.current, [
+          visible,
+          sourceId,
+          sourceLayerId,
+        ]);
+      };
+
+      const showAttribution = async (): Promise<void> => {
+        _runNativeCommand("showAttribution", _nativeRef.current);
+      };
+
+      const _onPress = (
+        e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>,
+      ): void => {
+        if (isFunction(props.onPress)) {
+          props.onPress(e.nativeEvent.payload);
+        }
+      };
+
+      const _onLongPress = (
+        e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>,
+      ): void => {
+        if (isFunction(props.onLongPress)) {
+          props.onLongPress(e.nativeEvent.payload);
+        }
+      };
+
+      const _onRegionWillChange = (
+        payload: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+      ): void => {
+        if (isFunction(props.onRegionWillChange)) {
+          props.onRegionWillChange(payload);
+        }
+      };
+
+      const _onRegionDidChange = (
+        payload: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+      ): void => {
+        if (isFunction(props.onRegionDidChange)) {
+          props.onRegionDidChange(payload);
+        }
+      };
+
+      const _onDebouncedRegionWillChange = useCallback(
+        debounce(_onRegionWillChange, regionWillChangeDebounceTime, {
+          immediate: true,
+        }),
+        [_onRegionWillChange],
       );
-    }
-    const res: {data: string | GeoJSON.FeatureCollection} =
-      await this._runNativeCommand(
-        'queryRenderedFeaturesInRect',
-        this._nativeRef,
-        [bbox, getFilter(filter), layerIDs],
+
+      const _onDebouncedRegionDidChange = useCallback(
+        debounce(_onRegionDidChange, regionDidChangeDebounceTime),
+        [_onRegionDidChange],
       );
 
-    if (isAndroid()) {
-      return JSON.parse(res.data as string);
-    }
+      const _onChange = (
+        e: NativeSyntheticEvent<{
+          type: string;
+          payload?: GeoJSON.Feature | Location;
+        }>,
+      ): void => {
+        const { type, payload } = e.nativeEvent;
+        let propName: CallableProps | undefined;
+
+        switch (type) {
+          case MapLibreGL.EventTypes.RegionWillChange:
+            if (
+              regionWillChangeDebounceTime &&
+              regionWillChangeDebounceTime > 0
+            ) {
+              if (payload) {
+                _onDebouncedRegionWillChange(
+                  payload as GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+                );
+              }
+            } else {
+              propName = "onRegionWillChange";
+            }
+            break;
+          case MapLibreGL.EventTypes.RegionIsChanging:
+            propName = "onRegionIsChanging";
+            break;
+          case MapLibreGL.EventTypes.RegionDidChange:
+            if (
+              regionDidChangeDebounceTime &&
+              regionDidChangeDebounceTime > 0
+            ) {
+              if (payload) {
+                _onDebouncedRegionDidChange(
+                  payload as GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
+                );
+              }
+            } else {
+              propName = "onRegionDidChange";
+            }
+            break;
+          case MapLibreGL.EventTypes.UserLocationUpdated:
+            propName = "onUserLocationUpdate";
+            break;
+          case MapLibreGL.EventTypes.WillStartLoadingMap:
+            propName = "onWillStartLoadingMap";
+            break;
+          case MapLibreGL.EventTypes.DidFinishLoadingMap:
+            propName = "onDidFinishLoadingMap";
+            break;
+          case MapLibreGL.EventTypes.DidFailLoadingMap:
+            propName = "onDidFailLoadingMap";
+            break;
+          case MapLibreGL.EventTypes.WillStartRenderingFrame:
+            propName = "onWillStartRenderingFrame";
+            break;
+          case MapLibreGL.EventTypes.DidFinishRenderingFrame:
+            propName = "onDidFinishRenderingFrame";
+            break;
+          case MapLibreGL.EventTypes.DidFinishRenderingFrameFully:
+            propName = "onDidFinishRenderingFrameFully";
+            break;
+          case MapLibreGL.EventTypes.WillStartRenderingMap:
+            propName = "onWillStartRenderingMap";
+            break;
+          case MapLibreGL.EventTypes.DidFinishRenderingMap:
+            propName = "onDidFinishRenderingMap";
+            break;
+          case MapLibreGL.EventTypes.DidFinishRenderingMapFully:
+            propName = "onDidFinishRenderingMapFully";
+            break;
+          case MapLibreGL.EventTypes.DidFinishLoadingStyle:
+            propName = "onDidFinishLoadingStyle";
+            break;
+          default:
+            console.warn("Unhandled event callback type", type);
+        }
 
-    return res.data as GeoJSON.FeatureCollection;
-  }
+        if (propName) {
+          _handleOnChange(propName, payload);
+        }
+      };
 
-  /**
-   * Map camera will perform updates based on provided config. Deprecated use Camera#setCamera.
-   */
-  setCamera(): void {
-    console.warn(
-      'MapView.setCamera is deprecated - please use Camera#setCamera',
-    );
-  }
+      const _onLayout = (): void => {
+        setIsReady(true);
+      };
 
-  /**
-   * Takes snapshot of map with current tiles and returns a URI to the image
-   * @param  {Boolean} writeToDisk If true will create a temp file, otherwise it is in base64
-   * @return {String}
-   */
-  async takeSnap(writeToDisk = false): Promise<string> {
-    const res: {uri: string} = await this._runNativeCommand(
-      'takeSnap',
-      this._nativeRef,
-      [writeToDisk],
-    );
-    return res.uri;
-  }
+      const _handleOnChange = <T extends CallableProps>(
+        propName: T,
+        payload?: object,
+      ): void => {
+        const callable = props[propName] as (payload?: object) => void;
+        if (callable && isFunction(callable)) {
+          callable(payload);
+        }
+      };
 
-  /**
-   * Returns the current zoom of the map view.
-   *
-   * @example
-   * const zoom = await this._map.getZoom();
-   *
-   * @return {Number}
-   */
+      const contentInsetValue = useMemo(() => {
+        if (!props.contentInset) {
+          return;
+        }
 
-  async getZoom(): Promise<number> {
-    const res: {zoom: number} = await this._runNativeCommand(
-      'getZoom',
-      this._nativeRef,
-    );
-    return res.zoom;
-  }
+        if (!Array.isArray(props.contentInset)) {
+          return [props.contentInset];
+        }
 
-  /**
-   * Returns the map's geographical centerpoint
-   *
-   * @example
-   * const center = await this._map.getCenter();
-   *
-   * @return {Array<Number>} Coordinates
-   */
-  async getCenter(): Promise<GeoJSON.Position> {
-    const res: {center: GeoJSON.Position} = await this._runNativeCommand(
-      'getCenter',
-      this._nativeRef,
-    );
-    return res.center;
-  }
+        return props.contentInset;
+      }, [props.contentInset]);
 
-  /**
-   * Sets the visibility of all the layers referencing the specified `sourceLayerId` and/or `sourceId`
-   *
-   * @example
-   * await this._map.setSourceVisibility(false, 'composite', 'building')
-   *
-   * @param {boolean} visible - Visibility of the layers
-   * @param {String} sourceId - Identifier of the target source (e.g. 'composite')
-   * @param {String=} sourceLayerId - Identifier of the target source-layer (e.g. 'building')
-   */
-  setSourceVisibility(
-    visible: boolean,
-    sourceId: string,
-    sourceLayerId: string | null = null,
-  ): void {
-    this._runNativeCommand('setSourceVisibility', this._nativeRef, [
-      visible,
-      sourceId,
-      sourceLayerId,
-    ]);
-  }
-
-  /**
-   * Show the attribution and telemetry action sheet.
-   * If you implement a custom attribution button, you should add this action to the button.
-   */
-  async showAttribution(): Promise<void> {
-    this._runNativeCommand('showAttribution', this._nativeRef);
-  }
-
-  _onPress(e: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void {
-    if (isFunction(this.props.onPress)) {
-      this.props.onPress(e.nativeEvent.payload);
-    }
-  }
-
-  _onLongPress(e: NativeSyntheticEvent<{payload: GeoJSON.Feature}>): void {
-    if (isFunction(this.props.onLongPress)) {
-      this.props.onLongPress(e.nativeEvent.payload);
-    }
-  }
-
-  _onRegionWillChange(
-    payload: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ): void {
-    if (isFunction(this.props.onRegionWillChange)) {
-      this.props.onRegionWillChange(payload);
-    }
-    this.setState({isUserInteraction: payload.properties.isUserInteraction});
-  }
-
-  _onRegionDidChange(
-    payload: GeoJSON.Feature<GeoJSON.Point, RegionPayload>,
-  ): void {
-    if (isFunction(this.props.onRegionDidChange)) {
-      this.props.onRegionDidChange(payload);
-    }
-    this.setState({region: payload});
-  }
-
-  _onChange(
-    e: NativeSyntheticEvent<{
-      type: string;
-      payload?: GeoJSON.Feature | Location;
-    }>,
-  ): void {
-    const {regionWillChangeDebounceTime, regionDidChangeDebounceTime} =
-      this.props;
-    const {type, payload} = e.nativeEvent;
-    let propName: CallableProps | undefined;
-
-    switch (type) {
-      case MapLibreGL.EventTypes.RegionWillChange:
-        if (regionWillChangeDebounceTime && regionWillChangeDebounceTime > 0) {
-          this._onDebouncedRegionWillChange(payload);
-        } else {
-          propName = 'onRegionWillChange';
+      const _setNativeRef = (nativeRef: RCTMLNMapViewRefType): void => {
+        _nativeRef.current = nativeRef;
+        _runPendingNativeCommands(nativeRef);
+      };
+
+      const setNativeProps = (props: NativeProps): void => {
+        if (_nativeRef.current) {
+          _nativeRef.current.setNativeProps(props);
         }
-        break;
-      case MapLibreGL.EventTypes.RegionIsChanging:
-        propName = 'onRegionIsChanging';
-        break;
-      case MapLibreGL.EventTypes.RegionDidChange:
-        if (regionDidChangeDebounceTime && regionDidChangeDebounceTime > 0) {
-          this._onDebouncedRegionDidChange(payload);
-        } else {
-          propName = 'onRegionDidChange';
+      };
+
+      const _setStyleURL = (props: MapViewProps): void => {
+        // user set a styleURL, no need to alter props
+        if (props.styleURL) {
+          return;
         }
-        break;
-      case MapLibreGL.EventTypes.UserLocationUpdated:
-        propName = 'onUserLocationUpdate';
-        break;
-      case MapLibreGL.EventTypes.WillStartLoadingMap:
-        propName = 'onWillStartLoadingMap';
-        break;
-      case MapLibreGL.EventTypes.DidFinishLoadingMap:
-        propName = 'onDidFinishLoadingMap';
-        break;
-      case MapLibreGL.EventTypes.DidFailLoadingMap:
-        propName = 'onDidFailLoadingMap';
-        break;
-      case MapLibreGL.EventTypes.WillStartRenderingFrame:
-        propName = 'onWillStartRenderingFrame';
-        break;
-      case MapLibreGL.EventTypes.DidFinishRenderingFrame:
-        propName = 'onDidFinishRenderingFrame';
-        break;
-      case MapLibreGL.EventTypes.DidFinishRenderingFrameFully:
-        propName = 'onDidFinishRenderingFrameFully';
-        break;
-      case MapLibreGL.EventTypes.WillStartRenderingMap:
-        propName = 'onWillStartRenderingMap';
-        break;
-      case MapLibreGL.EventTypes.DidFinishRenderingMap:
-        propName = 'onDidFinishRenderingMap';
-        break;
-      case MapLibreGL.EventTypes.DidFinishRenderingMapFully:
-        propName = 'onDidFinishRenderingMapFully';
-        break;
-      case MapLibreGL.EventTypes.DidFinishLoadingStyle:
-        propName = 'onDidFinishLoadingStyle';
-        break;
-      default:
-        console.warn('Unhandled event callback type', type);
-    }
-
-    if (propName) {
-      this._handleOnChange(propName, payload);
-    }
-  }
-
-  _onLayout(e: LayoutChangeEvent): void {
-    this.setState({
-      isReady: true,
-      width: e.nativeEvent.layout.width,
-      height: e.nativeEvent.layout.height,
-    });
-  }
-
-  _handleOnChange<T extends CallableProps>(
-    propName: T,
-    payload?: object,
-  ): void {
-    const callable = this.props[propName] as (payload?: object) => void;
-    if (callable && isFunction(callable)) {
-      callable(payload);
-    }
-  }
-
-  _getContentInset(): number[] | undefined {
-    if (!this.props.contentInset) {
-      return;
-    }
-
-    if (!Array.isArray(this.props.contentInset)) {
-      return [this.props.contentInset];
-    }
-
-    return this.props.contentInset;
-  }
-
-  _setNativeRef(nativeRef: RCTMGLMapViewRefType): void {
-    this._nativeRef = nativeRef;
-    super._runPendingNativeCommands(nativeRef);
-  }
-
-  setNativeProps(props: NativeProps): void {
-    if (this._nativeRef) {
-      this._nativeRef.setNativeProps(props);
-    }
-  }
-
-  _setStyleURL(props: MapViewProps): void {
-    // user set a styleURL, no need to alter props
-    if (props.styleURL) {
-      return;
-    }
-
-    // user set styleJSON pass it to styleURL
-    if (props.styleJSON && !props.styleURL) {
-      props.styleURL = props.styleJSON;
-    }
-
-    // user neither set styleJSON nor styleURL
-    // set defaultStyleUrl
-    if (!props.styleJSON || !props.styleURL) {
-      props.styleURL = defaultStyleURL;
-    }
-  }
-
-  render(): ReactElement {
-    const props = {
-      ...this.props,
-      contentInset: this._getContentInset(),
-      style: styles.matchParent,
-    };
-
-    this._setStyleURL(props);
-
-    const callbacks = {
-      ref: (ref: RCTMGLMapViewRefType) => this._setNativeRef(ref),
-      onPress: this._onPress,
-      onLongPress: this._onLongPress,
-      onMapChange: this._onChange,
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
-    };
-
-    let mapView: ReactElement | null = null;
-    if (isAndroid() && !this.props.surfaceView && this.state.isReady) {
-      mapView = (
-        <RCTMGLAndroidTextureMapView {...props} {...callbacks}>
-          {this.props.children}
-        </RCTMGLAndroidTextureMapView>
-      );
-    } else if (this.state.isReady) {
-      mapView = (
-        <RCTMGLMapView {...props} {...callbacks}>
-          {this.props.children}
-        </RCTMGLMapView>
+
+        // user set styleJSON pass it to styleURL
+        if (props.styleJSON && !props.styleURL) {
+          props.styleURL = props.styleJSON;
+        }
+
+        // user neither set styleJSON nor styleURL
+        // set defaultStyleUrl
+        if (!props.styleJSON || !props.styleURL) {
+          props.styleURL = defaultStyleURL;
+        }
+      };
+
+      const nativeProps = useMemo(() => {
+        return {
+          ...props,
+          localizeLabels,
+          scrollEnabled,
+          pitchEnabled,
+          rotateEnabled,
+          attributionEnabled,
+          logoEnabled,
+          surfaceView,
+          regionWillChangeDebounceTime,
+          regionDidChangeDebounceTime,
+          contentInsetValue,
+          style: styles.matchParent,
+        };
+      }, [
+        localizeLabels,
+        scrollEnabled,
+        pitchEnabled,
+        rotateEnabled,
+        attributionEnabled,
+        logoEnabled,
+        surfaceView,
+        regionWillChangeDebounceTime,
+        regionDidChangeDebounceTime,
+        contentInsetValue,
+        props,
+        contentInsetValue,
+      ]);
+
+      _setStyleURL(nativeProps);
+
+      const callbacks = {
+        ref: (ref: RCTMLNMapViewRefType): void => _setNativeRef(ref),
+        onPress: _onPress,
+        onLongPress: _onLongPress,
+        onMapChange: _onChange,
+        onAndroidCallback: isAndroid() ? _onAndroidCallback : undefined,
+      };
+
+      let mapView: ReactElement | null = null;
+      if (isAndroid() && !surfaceView && isReady) {
+        mapView = (
+          <RCTMLNAndroidTextureMapView {...nativeProps} {...callbacks}>
+            {props.children}
+          </RCTMLNAndroidTextureMapView>
+        );
+      } else if (isReady) {
+        mapView = (
+          <RCTMLNMapView {...nativeProps} {...callbacks}>
+            {props.children}
+          </RCTMLNMapView>
+        );
+      }
+
+      return (
+        <View
+          onLayout={_onLayout}
+          style={props.style}
+          testID={mapView ? undefined : props.testID}
+        >
+          {mapView}
+        </View>
       );
-    }
-
-    return (
-      <View
-        onLayout={this._onLayout}
-        style={this.props.style}
-        testID={mapView ? undefined : this.props.testID}>
-        {mapView}
-      </View>
-    );
-  }
-}
+    },
+  ),
+);
 
-type RCTMGLMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
-const RCTMGLMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+type RCTMLNMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
+const RCTMLNMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
-let RCTMGLAndroidTextureMapView: typeof RCTMGLMapView;
+let RCTMLNAndroidTextureMapView: typeof RCTMLNMapView;
 if (isAndroid()) {
-  RCTMGLAndroidTextureMapView = requireNativeComponent<NativeProps>(
+  RCTMLNAndroidTextureMapView = requireNativeComponent<NativeProps>(
     ANDROID_TEXTURE_NATIVE_MODULE_NAME,
   );
 }