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

package/ios/install.md

@@ -8,11 +8,11 @@ Add the following to your `ios/Podfile`:
 ```ruby
   post_install do |installer|
     ... other post install hooks
-    $RNMBGL.post_install(installer)
+    $RCTMLN.post_install(installer)
   end
 ```
 
-Running `pod install` will add version `5.13.0` of the MapLibre SDK.
+Running `pod install` will add version `6.4.0` of the MapLibre SDK.
 
 ```sh
 # Go to the ios directory
@@ -31,20 +31,19 @@ environments. The map either does not render at all or appears garbled when pann
 It is best to test on a real device if at all possible at this time
 until this is fixed upstream. iOS devs can open the workspace in Xcode and run from there.
 
-
 ## Installing a specific version
 
-The current default MapLibre version is `5.13.0`.
+The current default MapLibre version is `6.4.0`.
 If you want to install a different version, you can override as follows in
 your `Podfile`:
 
 ```ruby
-$RNMBGL_Use_SPM = {
+$RCTMLN_Use_SPM = {
   url: "https://github.com/maplibre/maplibre-gl-native-distribution",
   requirement: {
     kind: "upToNextMajorVersion",
-    minimumVersion: "5.13.0"
+    minimumVersion: "6.4.0"
   },
-  product_name: "Mapbox"
+  product_name: "MapLibre"
 }
 ```

package/javascript/MLNModule.ts

@@ -0,0 +1,37 @@
+import { NativeModules } from "react-native";
+
+interface IMLNModule {
+  StyleURL: {
+    Default: URL;
+  };
+  OfflinePackDownloadState: {
+    Inactive: string | number;
+    Active: string | number;
+    Complete: string | number;
+    Unknown?: string | number;
+  };
+  LineJoin: {
+    Bevel: string | number;
+    Round: string | number;
+    Miter: string | number;
+  };
+  StyleSource: {
+    DefaultSourceID: string;
+  };
+
+  setAccessToken(accessToken: string | null): Promise<string | null>;
+  getAccessToken(): Promise<string>;
+  setConnected(connected: boolean): void;
+}
+
+const MLNModule: IMLNModule = { ...NativeModules.MLNModule };
+
+export const {
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  setAccessToken,
+  getAccessToken,
+  setConnected,
+} = MLNModule;

package/javascript/Maplibre.ts

@@ -0,0 +1,64 @@
+import { UserTrackingMode } from "./components/Camera";
+
+export * from "./MLNModule";
+export {
+  default as Camera,
+  UserTrackingMode,
+  type CameraPadding,
+  type CameraAnimationMode,
+  type CameraBounds,
+  type CameraRef,
+} from "./components/Camera";
+export { default as MapView, type MapViewRef } from "./components/MapView";
+export { default as Light } from "./components/Light";
+export { default as PointAnnotation } from "./components/PointAnnotation";
+export type { PointAnnotationRef } from "./components/PointAnnotation";
+export { default as Annotation } from "./components/annotations/Annotation";
+export { default as Callout } from "./components/Callout";
+export { requestAndroidLocationPermissions } from "./requestAndroidLocationPermissions";
+export {
+  default as UserLocation,
+  UserLocationRenderMode,
+} from "./components/UserLocation";
+export type { UserLocationRef } from "./components/UserLocation";
+export { default as VectorSource } from "./components/VectorSource";
+export { default as ShapeSource } from "./components/ShapeSource";
+export type { ShapeSourceRef } from "./components/ShapeSource";
+export { default as RasterSource } from "./components/RasterSource";
+export { default as ImageSource } from "./components/ImageSource";
+export { default as Images } from "./components/Images";
+export { default as FillLayer } from "./components/FillLayer";
+export { default as FillExtrusionLayer } from "./components/FillExtrusionLayer";
+export { default as HeatmapLayer } from "./components/HeatmapLayer";
+export { default as LineLayer } from "./components/LineLayer";
+export { default as CircleLayer } from "./components/CircleLayer";
+export { default as SymbolLayer } from "./components/SymbolLayer";
+export { default as RasterLayer } from "./components/RasterLayer";
+export { default as BackgroundLayer } from "./components/BackgroundLayer";
+export {
+  default as locationManager,
+  type Location,
+} from "./modules/location/locationManager";
+export { default as offlineManager } from "./modules/offline/offlineManager";
+export { default as OfflineCreatePackOptions } from "./modules/offline/OfflineCreatePackOptions";
+export { default as snapshotManager } from "./modules/snapshot/snapshotManager";
+export type { SnapshotInputOptions } from "./modules/snapshot/SnapshotOptions";
+export { default as MarkerView } from "./components/MarkerView";
+export { default as Animated } from "./utils/animated/Animated";
+export { default as Style } from "./components/Style";
+export { default as Logger, type LogLevel } from "./utils/Logger";
+export type {
+  FillLayerStyleProps as FillLayerStyle,
+  LineLayerStyleProps as LineLayerStyle,
+  SymbolLayerStyleProps as SymbolLayerStyle,
+  CircleLayerStyleProps as CircleLayerStyle,
+  HeatmapLayerStyleProps as HeatmapLayerStyle,
+  FillExtrusionLayerStyleProps as FillExtrusionLayerStyle,
+  RasterLayerStyleProps as RasterLayerStyle,
+  HillshadeLayerStyleProps as HillshadeLayerStyle,
+  BackgroundLayerStyleProps as BackgroundLayerStyle,
+  LightLayerStyleProps as LightLayerStyle,
+} from "./utils/MaplibreStyles";
+
+/** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
+export const UserTrackingModes = UserTrackingMode;

package/javascript/components/BackgroundLayer.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { NativeModules, requireNativeComponent } from "react-native";
+
+import useAbstractLayer, {
+  BaseLayerProps,
+  NativeBaseProps,
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { BackgroundLayerStyleProps } from "../utils/MaplibreStyles";
+
+const MapLibreGL = NativeModules.MLNModule;
+
+export const NATIVE_MODULE_NAME = "RCTMLNBackgroundLayer";
+
+export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: BackgroundLayerStyleProps;
+}
+
+interface NativeProps
+  extends Omit<BackgroundLayerProps, "style">,
+    NativeBaseProps {}
+
+const RCTMLNBackgroundLayer =
+  requireNativeComponent<BackgroundLayerProps>(NATIVE_MODULE_NAME);
+
+const BackgroundLayer: React.FC<BackgroundLayerProps> = ({
+  sourceID = MapLibreGL.StyleSource.DefaultSourceID,
+  ...props
+}: BackgroundLayerProps) => {
+  const { baseProps, setNativeLayer } = useAbstractLayer<
+    BackgroundLayerProps,
+    NativeProps
+  >({
+    ...props,
+    sourceID,
+  });
+
+  return (
+    <RCTMLNBackgroundLayer
+      testID="rctmlnBackgroundLayer"
+      ref={setNativeLayer}
+      {...baseProps}
+    />
+  );
+};
+
+export default BackgroundLayer;

package/javascript/components/Callout.tsx

@@ -0,0 +1,141 @@
+import React, { ReactElement } from "react";
+import {
+  View,
+  Text,
+  Animated,
+  requireNativeComponent,
+  StyleSheet,
+  ViewStyle,
+  ViewProps,
+  StyleProp,
+} from "react-native";
+
+export const NATIVE_MODULE_NAME = "RCTMLNCallout";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 180,
+    zIndex: 9999999,
+  },
+  content: {
+    backgroundColor: "white",
+    borderColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: 3,
+    borderWidth: 1,
+    flex: 1,
+    padding: 8,
+    position: "relative",
+  },
+  tip: {
+    backgroundColor: "transparent",
+    borderBottomColor: "transparent",
+    borderBottomWidth: 0,
+    borderLeftColor: "transparent",
+    borderLeftWidth: 8,
+    borderRightColor: "transparent",
+    borderRightWidth: 8,
+    borderTopColor: "white",
+    borderTopWidth: 16,
+    elevation: 0,
+    marginTop: -2,
+    zIndex: 1000,
+  },
+  title: {
+    color: "black",
+    textAlign: "center",
+  },
+});
+
+interface CalloutProps extends Omit<ViewProps, "style"> {
+  /**
+   * String that get's displayed in the default callout.
+   */
+  title?: string;
+  /**
+   * Style property for the Animated.View wrapper, apply animations to this
+   */
+  style?: ViewStyle;
+  /**
+   * Style property for the native RCTMLNCallout container, set at your own risk.
+   */
+  containerStyle?: ViewStyle;
+  /**
+   * Style property for the content bubble.
+   */
+  contentStyle?: ViewStyle;
+  /**
+   * Style property for the triangle tip under the content.
+   */
+  tipStyle?: ViewStyle;
+  /**
+   * Style property for the title in the content bubble.
+   */
+  textStyle?: ViewStyle;
+}
+
+interface NativeProps extends Omit<CalloutProps, "style"> {
+  style: StyleProp<ViewStyle>;
+}
+
+/**
+ *  Callout that displays information about a selected annotation near the annotation.
+ */
+const Callout = (props: CalloutProps): ReactElement => {
+  const {
+    title,
+    style,
+    containerStyle,
+    contentStyle,
+    tipStyle,
+    textStyle,
+    children,
+  } = props;
+
+  const _containerStyle: ViewStyle[] = [
+    {
+      position: "absolute",
+      zIndex: 999,
+      backgroundColor: "transparent",
+      ...containerStyle,
+    } as ViewStyle,
+  ];
+
+  const _hasChildren = React.Children.count(children) > 0;
+
+  const _renderDefaultCallout = (): ReactElement => {
+    return (
+      <Animated.View testID="container" style={[styles.container, style]}>
+        <View testID="wrapper" style={[styles.content, contentStyle]}>
+          <Text testID="title" style={[styles.title, textStyle]}>
+            {title}
+          </Text>
+        </View>
+        <View testID="tip" style={[styles.tip, tipStyle]} />
+      </Animated.View>
+    );
+  };
+
+  const _renderCustomCallout = (): ReactElement => {
+    return (
+      <Animated.View testID="container" {...props} style={style}>
+        {children}
+      </Animated.View>
+    );
+  };
+
+  const calloutContent = _hasChildren
+    ? _renderCustomCallout()
+    : _renderDefaultCallout();
+
+  return (
+    <RCTMLNCallout testID="callout" style={_containerStyle}>
+      {calloutContent}
+    </RCTMLNCallout>
+  );
+};
+
+const RCTMLNCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default Callout;