@maplibre/maplibre-react-native 11.0.0-beta.2 → 11.0.0-beta.21

package/src/components/map/Map.tsx

@@ -6,10 +6,9 @@ import type {
 import {
   Component,
   type ComponentProps,
-  forwardRef,
   memo,
   type ReactElement,
-  type ReactNode,
+  type Ref,
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
@@ -17,9 +16,9 @@ import {
   useState,
 } from "react";
 import {
-  type NativeMethods,
   type NativeSyntheticEvent,
   Platform,
+  type ReactNativeElement,
   StyleSheet,
   View,
   type ViewProps,
@@ -29,7 +28,6 @@ import AndroidTextureMapViewNativeComponent from "./AndroidTextureMapViewNativeC
 import MapViewNativeComponent from "./MapViewNativeComponent";
 import NativeMapViewModule from "./NativeMapViewModule";
 import { LogManager } from "../../modules/log/LogManager";
-import { type BaseProps } from "../../types/BaseProps";
 import type { LngLat } from "../../types/LngLat";
 import type { LngLatBounds } from "../../types/LngLatBounds";
 import type { PixelPoint } from "../../types/PixelPoint";
@@ -142,18 +140,18 @@ export interface MapRef {
    * Converts geographic coordinates to pixel point of the view
    *
    * @example
-   * await mapRef.current?.getPointInView([-37.817070, 144.949901]);
+   * await mapRef.current?.project([13.04214014753952, 47.80554907882145]);
    *
-   * @param coordinates Geographic coordinate
+   * @param lngLat Geographic coordinate
    * @return Pixel point
    */
-  project(coordinates: LngLat): Promise<PixelPoint>;
+  project(lngLat: LngLat): Promise<PixelPoint>;
 
   /**
    * Converts a pixel point of the view to geographic coordinates.
    *
    * @example
-   * await mapRef.current?.getCoordinateFromView([280, 640]);
+   * await mapRef.current?.unproject([280, 640]);
    *
    * @param point Pixel point
    * @return Geographic coordinate
@@ -248,9 +246,7 @@ export interface MapRef {
   showAttribution(): Promise<void>;
 }
 
-export interface MapProps extends BaseProps {
-  children?: ReactNode;
-
+export interface MapProps extends ViewProps {
   /**
    * Style for wrapping React Native View
    *
@@ -369,6 +365,19 @@ export interface MapProps extends BaseProps {
    */
   compassHiddenFacingNorth?: boolean;
 
+  /**
+   * Toggle the scale bar on the map
+   */
+  scaleBar?: boolean;
+
+  /**
+   * Positions the scale bar. Android only supports top-left corner.
+   *
+   * @example Position in the bottom-left corner
+   * { bottom: 8, left: 8 }
+   */
+  scaleBarPosition?: OrnamentViewPosition;
+
   /**
    * Android only: Switch between TextureView (default) and GLSurfaceView for
    * rendering the map
@@ -465,166 +474,159 @@ export interface MapProps extends BaseProps {
    * Triggered when a style has finished loading
    */
   onDidFinishLoadingStyle?: (event: NativeSyntheticEvent<null>) => void;
+
+  /**
+   * Ref to access Map methods.
+   */
+  ref?: Ref<MapRef>;
 }
 
 /**
  * MapLibre Native Map
  */
 export const Map = memo(
-  forwardRef<MapRef, MapProps>(
-    ({ androidView = "surface", style, ...props }, ref) => {
-      const [isReady, setIsReady] = useState(false);
-
-      const nativeRef = useRef<
-        Component<ComponentProps<typeof MapViewNativeComponent>> &
-          Readonly<NativeMethods>
-      >(null);
-
-      useImperativeHandle(ref, () => ({
-        getCenter: () =>
-          NativeMapViewModule.getCenter(findNodeHandle(nativeRef.current)),
-
-        getZoom: () =>
-          NativeMapViewModule.getZoom(findNodeHandle(nativeRef.current)),
-
-        getBearing: () =>
-          NativeMapViewModule.getBearing(findNodeHandle(nativeRef.current)),
-
-        getPitch: () =>
-          NativeMapViewModule.getPitch(findNodeHandle(nativeRef.current)),
-
-        getBounds: () =>
-          NativeMapViewModule.getBounds(findNodeHandle(nativeRef.current)),
-
-        getViewState: () =>
-          NativeMapViewModule.getViewState(
-            findNodeHandle(nativeRef.current),
-          ) as Promise<ViewState>,
-
-        project: (lngLat) =>
-          NativeMapViewModule.project(
-            findNodeHandle(nativeRef.current),
-            lngLat,
-          ),
-
-        unproject: (point) =>
-          NativeMapViewModule.unproject(
+  ({ androidView = "surface", style, ref, ...props }: MapProps) => {
+    const [isReady, setIsReady] = useState(false);
+
+    const nativeRef = useRef<
+      Component<ComponentProps<typeof MapViewNativeComponent>> &
+        ReactNativeElement
+    >(null);
+
+    useImperativeHandle(ref, () => ({
+      getCenter: () =>
+        NativeMapViewModule.getCenter(findNodeHandle(nativeRef.current)),
+
+      getZoom: () =>
+        NativeMapViewModule.getZoom(findNodeHandle(nativeRef.current)),
+
+      getBearing: () =>
+        NativeMapViewModule.getBearing(findNodeHandle(nativeRef.current)),
+
+      getPitch: () =>
+        NativeMapViewModule.getPitch(findNodeHandle(nativeRef.current)),
+
+      getBounds: () =>
+        NativeMapViewModule.getBounds(findNodeHandle(nativeRef.current)),
+
+      getViewState: () =>
+        NativeMapViewModule.getViewState(
+          findNodeHandle(nativeRef.current),
+        ) as Promise<ViewState>,
+
+      project: (lngLat) =>
+        NativeMapViewModule.project(findNodeHandle(nativeRef.current), lngLat),
+
+      unproject: (point) =>
+        NativeMapViewModule.unproject(findNodeHandle(nativeRef.current), point),
+
+      queryRenderedFeatures: async (
+        pixelPointOrPixelPointBoundsOrOptions?:
+          | PixelPoint
+          | PixelPointBounds
+          | QueryRenderedFeaturesOptions,
+        options?: QueryRenderedFeaturesOptions,
+      ) => {
+        if (
+          pixelPointOrPixelPointBoundsOrOptions &&
+          Array.isArray(pixelPointOrPixelPointBoundsOrOptions) &&
+          ((value: PixelPoint | PixelPointBounds): value is PixelPoint =>
+            typeof value[0] === "number" && typeof value[1] === "number")(
+            pixelPointOrPixelPointBoundsOrOptions,
+          )
+        ) {
+          return await NativeMapViewModule.queryRenderedFeaturesWithPoint(
             findNodeHandle(nativeRef.current),
-            point,
-          ),
-
-        queryRenderedFeatures: async (
-          pixelPointOrPixelPointBoundsOrOptions?:
-            | PixelPoint
-            | PixelPointBounds
-            | QueryRenderedFeaturesOptions,
-          options?: QueryRenderedFeaturesOptions,
-        ) => {
-          if (
-            pixelPointOrPixelPointBoundsOrOptions &&
-            Array.isArray(pixelPointOrPixelPointBoundsOrOptions) &&
-            ((value: PixelPoint | PixelPointBounds): value is PixelPoint =>
-              typeof value[0] === "number" && typeof value[1] === "number")(
-              pixelPointOrPixelPointBoundsOrOptions,
-            )
-          ) {
-            return await NativeMapViewModule.queryRenderedFeaturesWithPoint(
-              findNodeHandle(nativeRef.current),
-              pixelPointOrPixelPointBoundsOrOptions,
-              options?.layers ?? [],
-              getNativeFilter(options?.filter) as string[],
-            );
-          } else if (
-            pixelPointOrPixelPointBoundsOrOptions &&
-            Array.isArray(pixelPointOrPixelPointBoundsOrOptions) &&
-            ((
-              value: PixelPoint | PixelPointBounds,
-            ): value is PixelPointBounds =>
-              Array.isArray(value[0]) && Array.isArray(value[1]))(
-              pixelPointOrPixelPointBoundsOrOptions,
-            )
-          ) {
-            return await NativeMapViewModule.queryRenderedFeaturesWithBounds(
-              findNodeHandle(nativeRef.current),
-              pixelPointOrPixelPointBoundsOrOptions,
-              options?.layers ?? [],
-              getNativeFilter(options?.filter) as string[],
-            );
-          } else {
-            return await NativeMapViewModule.queryRenderedFeaturesWithBounds(
-              findNodeHandle(nativeRef.current),
-              null,
-              pixelPointOrPixelPointBoundsOrOptions?.layers ?? [],
-              getNativeFilter(
-                pixelPointOrPixelPointBoundsOrOptions?.filter,
-              ) as string[],
-            );
-          }
-        },
-
-        createStaticMapImage: (options) =>
-          NativeMapViewModule.createStaticMapImage(
+            pixelPointOrPixelPointBoundsOrOptions,
+            options?.layers ?? [],
+            getNativeFilter(options?.filter) as string[],
+          );
+        } else if (
+          pixelPointOrPixelPointBoundsOrOptions &&
+          Array.isArray(pixelPointOrPixelPointBoundsOrOptions) &&
+          ((value: PixelPoint | PixelPointBounds): value is PixelPointBounds =>
+            Array.isArray(value[0]) && Array.isArray(value[1]))(
+            pixelPointOrPixelPointBoundsOrOptions,
+          )
+        ) {
+          return await NativeMapViewModule.queryRenderedFeaturesWithBounds(
             findNodeHandle(nativeRef.current),
-            options.output,
-          ),
-
-        setSourceVisibility: (visible, source, sourceLayer) =>
-          NativeMapViewModule.setSourceVisibility(
-            findNodeHandle(nativeRef.current),
-            visible,
-            source,
-            sourceLayer ?? null,
-          ),
-
-        showAttribution: () =>
-          NativeMapViewModule.showAttribution(
+            pixelPointOrPixelPointBoundsOrOptions,
+            options?.layers ?? [],
+            getNativeFilter(options?.filter) as string[],
+          );
+        } else {
+          return await NativeMapViewModule.queryRenderedFeaturesWithBounds(
             findNodeHandle(nativeRef.current),
-          ),
-      }));
-
-      // Start before rendering
-      useLayoutEffect(() => {
-        LogManager.start();
-
-        return () => {
-          LogManager.stop();
-        };
-      }, []);
-
-      const nativeProps = useMemo(() => {
-        const { mapStyle, light, ...otherProps } = props;
-
-        return {
-          ...otherProps,
-          ref: nativeRef,
-          style: styles.flex1,
-          mapStyle:
-            typeof mapStyle === "object" ? JSON.stringify(mapStyle) : mapStyle,
-          light: props.light
-            ? transformStyle(convertToInternalStyle(props.light))
-            : undefined,
-        };
-      }, [props]);
-
-      let map: ReactElement | null = null;
-      if (isReady) {
-        const NativeMapView =
-          Platform.OS === "android" && androidView === "texture"
-            ? AndroidTextureMapViewNativeComponent
-            : MapViewNativeComponent;
-
-        map = <NativeMapView {...nativeProps} />;
-      }
-
-      return (
-        <View
-          onLayout={() => setIsReady(true)}
-          style={style ?? styles.flex1}
-          testID={nativeProps.testID ? `${nativeProps.testID}-view` : undefined}
-        >
-          {map}
-        </View>
-      );
-    },
-  ),
+            null,
+            pixelPointOrPixelPointBoundsOrOptions?.layers ?? [],
+            getNativeFilter(
+              pixelPointOrPixelPointBoundsOrOptions?.filter,
+            ) as string[],
+          );
+        }
+      },
+
+      createStaticMapImage: (options) =>
+        NativeMapViewModule.createStaticMapImage(
+          findNodeHandle(nativeRef.current),
+          options.output,
+        ),
+
+      setSourceVisibility: (visible, source, sourceLayer) =>
+        NativeMapViewModule.setSourceVisibility(
+          findNodeHandle(nativeRef.current),
+          visible,
+          source,
+          sourceLayer ?? null,
+        ),
+
+      showAttribution: () =>
+        NativeMapViewModule.showAttribution(findNodeHandle(nativeRef.current)),
+    }));
+
+    // Start before rendering
+    useLayoutEffect(() => {
+      LogManager.start();
+
+      return () => {
+        LogManager.stop();
+      };
+    }, []);
+
+    const nativeProps = useMemo(() => {
+      const { mapStyle, light, ...otherProps } = props;
+
+      return {
+        ...otherProps,
+        ref: nativeRef,
+        style: styles.flex1,
+        mapStyle:
+          typeof mapStyle === "object" ? JSON.stringify(mapStyle) : mapStyle,
+        light: props.light
+          ? transformStyle(convertToInternalStyle(props.light))
+          : undefined,
+      };
+    }, [props]);
+
+    let map: ReactElement | null = null;
+    if (isReady) {
+      const NativeMapView =
+        Platform.OS === "android" && androidView === "texture"
+          ? AndroidTextureMapViewNativeComponent
+          : MapViewNativeComponent;
+
+      map = <NativeMapView {...nativeProps} />;
+    }
+
+    return (
+      <View
+        onLayout={() => setIsReady(true)}
+        style={style ?? styles.flex1}
+        testID={nativeProps.testID ? `${nativeProps.testID}-view` : undefined}
+      >
+        {map}
+      </View>
+    );
+  },
 );

package/src/components/map/MapViewNativeComponent.ts

@@ -73,6 +73,9 @@ export interface NativeProps extends ViewProps {
   compassPosition?: NativeOrnamentViewPosition;
   compassHiddenFacingNorth?: CodegenTypes.WithDefault<boolean, true>;
 
+  scaleBar?: CodegenTypes.WithDefault<boolean, false>;
+  scaleBarPosition?: NativeOrnamentViewPosition;
+
   onPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
   onLongPress?: CodegenTypes.BubblingEventHandler<NativePressEvent>;
 

package/src/components/sources/geojson-source/GeoJSONSource.tsx

@@ -5,13 +5,13 @@ import type {
 import {
   Component,
   type ComponentProps,
-  forwardRef,
   memo,
   type ReactNode,
+  type Ref,
   useImperativeHandle,
   useRef,
 } from "react";
-import { type NativeMethods } from "react-native";
+import { type ReactNativeElement } from "react-native";
 
 import GeoJSONSourceNativeComponent from "./GeoJSONSourceNativeComponent";
 import NativeGeoJSONSourceModule from "./NativeGeoJSONSourceModule";
@@ -155,6 +155,11 @@ export interface GeoJSONSourceProps extends BaseProps, PressableSourceProps {
   lineMetrics?: boolean;
 
   children?: ReactNode;
+
+  /**
+   * Ref to access GeoJSONSource methods.
+   */
+  ref?: Ref<GeoJSONSourceRef>;
 }
 
 /**
@@ -162,64 +167,62 @@ export interface GeoJSONSourceProps extends BaseProps, PressableSourceProps {
  * The data may be provided as an url or a GeoJSON object.
  */
 export const GeoJSONSource = memo(
-  forwardRef<GeoJSONSourceRef, GeoJSONSourceProps>(
-    ({ id, data, ...props }, ref) => {
-      const nativeRef = useRef<
-        Component<ComponentProps<typeof GeoJSONSourceNativeComponent>> &
-          Readonly<NativeMethods>
-      >(null);
-
-      const frozenId = useFrozenId(id);
-
-      useImperativeHandle(ref, () => ({
-        getData: async (filter) => {
-          return NativeGeoJSONSourceModule.getData(
-            findNodeHandle(nativeRef.current),
-            getNativeFilter(filter),
-          );
-        },
-
-        getClusterExpansionZoom: async (clusterId) => {
-          return NativeGeoJSONSourceModule.getClusterExpansionZoom(
-            findNodeHandle(nativeRef.current),
-            clusterId,
-          );
-        },
-
-        getClusterLeaves: async (
-          clusterId: number,
-          limit: number,
-          offset: number,
-        ) => {
-          return NativeGeoJSONSourceModule.getClusterLeaves(
-            findNodeHandle(nativeRef.current),
-            clusterId,
-            limit,
-            offset,
-          );
-        },
-
-        getClusterChildren: async (clusterId: number) => {
-          return NativeGeoJSONSourceModule.getClusterChildren(
-            findNodeHandle(nativeRef.current),
-            clusterId,
-          );
-        },
-      }));
-
-      return (
-        <GeoJSONSourceNativeComponent
-          ref={nativeRef}
-          id={frozenId}
-          data={typeof data === "string" ? data : JSON.stringify(data)}
-          hasOnPress={!!props.onPress}
-          {...props}
-        >
-          {cloneReactChildrenWithProps(props.children, {
-            source: frozenId,
-          })}
-        </GeoJSONSourceNativeComponent>
-      );
-    },
-  ),
+  ({ id, data, ref, ...props }: GeoJSONSourceProps) => {
+    const nativeRef = useRef<
+      Component<ComponentProps<typeof GeoJSONSourceNativeComponent>> &
+        ReactNativeElement
+    >(null);
+
+    const frozenId = useFrozenId(id);
+
+    useImperativeHandle(ref, () => ({
+      getData: async (filter) => {
+        return NativeGeoJSONSourceModule.getData(
+          findNodeHandle(nativeRef.current),
+          getNativeFilter(filter),
+        );
+      },
+
+      getClusterExpansionZoom: async (clusterId) => {
+        return NativeGeoJSONSourceModule.getClusterExpansionZoom(
+          findNodeHandle(nativeRef.current),
+          clusterId,
+        );
+      },
+
+      getClusterLeaves: async (
+        clusterId: number,
+        limit: number,
+        offset: number,
+      ) => {
+        return NativeGeoJSONSourceModule.getClusterLeaves(
+          findNodeHandle(nativeRef.current),
+          clusterId,
+          limit,
+          offset,
+        );
+      },
+
+      getClusterChildren: async (clusterId: number) => {
+        return NativeGeoJSONSourceModule.getClusterChildren(
+          findNodeHandle(nativeRef.current),
+          clusterId,
+        );
+      },
+    }));
+
+    return (
+      <GeoJSONSourceNativeComponent
+        ref={nativeRef}
+        id={frozenId}
+        data={typeof data === "string" ? data : JSON.stringify(data)}
+        hasOnPress={!!props.onPress}
+        {...props}
+      >
+        {cloneReactChildrenWithProps(props.children, {
+          source: frozenId,
+        })}
+      </GeoJSONSourceNativeComponent>
+    );
+  },
 );

package/src/components/sources/vector-source/VectorSource.tsx

@@ -2,13 +2,13 @@ import type { FilterSpecification } from "@maplibre/maplibre-gl-style-spec";
 import {
   Component,
   type ComponentProps,
-  forwardRef,
   memo,
   type ReactNode,
+  type Ref,
   useImperativeHandle,
   useRef,
 } from "react";
-import { type NativeMethods } from "react-native";
+import { type ReactNativeElement } from "react-native";
 
 import NativeVectorSourceModule from "./NativeVectorSourceModule";
 import VectorSourceNativeComponent from "./VectorSourceNativeComponent";
@@ -82,48 +82,51 @@ export interface VectorSourceProps extends BaseProps, PressableSourceProps {
   attribution?: string;
 
   children?: ReactNode;
+
+  /**
+   * Ref to access VectorSource methods.
+   */
+  ref?: Ref<VectorSourceRef>;
 }
 
 /**
  * VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format 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.
  */
-export const VectorSource = memo(
-  forwardRef<VectorSourceRef, VectorSourceProps>(({ id, ...props }, ref) => {
-    const nativeRef = useRef<
-      Component<ComponentProps<typeof VectorSourceNativeComponent>> &
-        Readonly<NativeMethods>
-    >(null);
+export const VectorSource = memo(({ id, ref, ...props }: VectorSourceProps) => {
+  const nativeRef = useRef<
+    Component<ComponentProps<typeof VectorSourceNativeComponent>> &
+      ReactNativeElement
+  >(null);
 
-    const frozenId = useFrozenId(id);
+  const frozenId = useFrozenId(id);
 
-    useImperativeHandle(ref, () => ({
-      querySourceFeatures: async ({
+  useImperativeHandle(ref, () => ({
+    querySourceFeatures: async ({
+      sourceLayer,
+      filter,
+    }: {
+      sourceLayer: string;
+      filter?: FilterSpecification;
+    }): Promise<GeoJSON.Feature[]> => {
+      return NativeVectorSourceModule.querySourceFeatures(
+        findNodeHandle(nativeRef.current),
         sourceLayer,
-        filter,
-      }: {
-        sourceLayer: string;
-        filter?: FilterSpecification;
-      }): Promise<GeoJSON.Feature[]> => {
-        return NativeVectorSourceModule.querySourceFeatures(
-          findNodeHandle(nativeRef.current),
-          sourceLayer,
-          getNativeFilter(filter) as string[],
-        );
-      },
-    }));
+        getNativeFilter(filter) as string[],
+      );
+    },
+  }));
 
-    return (
-      <VectorSourceNativeComponent
-        ref={nativeRef}
-        id={frozenId}
-        hasOnPress={!!props.onPress}
-        {...props}
-      >
-        {cloneReactChildrenWithProps(props.children, {
-          source: frozenId,
-        })}
-      </VectorSourceNativeComponent>
-    );
-  }),
-);
+  return (
+    <VectorSourceNativeComponent
+      ref={nativeRef}
+      id={frozenId}
+      hasOnPress={!!props.onPress}
+      {...props}
+    >
+      {cloneReactChildrenWithProps(props.children, {
+        source: frozenId,
+      })}
+    </VectorSourceNativeComponent>
+  );
+});