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

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.5.4` 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.5.4`.
 If you want to install a different version, you can override as follows in
 your `Podfile`:
 
 ```ruby
-$RNMBGL_Use_SPM = {
+$RCTMLN_SPM_Spec = {
   url: "https://github.com/maplibre/maplibre-gl-native-distribution",
   requirement: {
     kind: "upToNextMajorVersion",
-    minimumVersion: "5.13.0"
+    minimumVersion: "6.5.4"
   },
-  product_name: "Mapbox"
+  product_name: "MapLibre"
 }
 ```

package/javascript/{MGLModule.ts → MLNModule.ts}

@@ -1,6 +1,6 @@
-import {NativeModules} from 'react-native';
+import { NativeModules } from "react-native";
 
-interface IMGLModule {
+interface IMLNModule {
   StyleURL: {
     Default: URL;
   };
@@ -24,7 +24,7 @@ interface IMGLModule {
   setConnected(connected: boolean): void;
 }
 
-const MGLModule: IMGLModule = {...NativeModules.MGLModule};
+const MLNModule: IMLNModule = { ...NativeModules.MLNModule };
 
 export const {
   StyleURL,
@@ -34,4 +34,4 @@ export const {
   setAccessToken,
   getAccessToken,
   setConnected,
-} = MGLModule;
+} = MLNModule;

package/javascript/Maplibre.ts

@@ -1,46 +1,58 @@
-export * from './MGLModule';
+import { UserTrackingMode } from "./components/Camera";
+
+export * from "./MLNModule";
 export {
   default as Camera,
   UserTrackingMode,
   type CameraPadding,
   type CameraAnimationMode,
   type CameraBounds,
-} from './components/Camera';
-export {default as MapView, type MapViewState} from './components/MapView';
-export {default as Light} from './components/Light';
-export {default as PointAnnotation} from './components/PointAnnotation';
-export {default as Annotation} from './components/annotations/Annotation';
-export {default as Callout} from './components/Callout';
-export {requestAndroidLocationPermissions} from './requestAndroidLocationPermissions';
+  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 {default as VectorSource} from './components/VectorSource';
-export {default as ShapeSource} 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';
+} 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';
+} from "./modules/location/locationManager";
+export { default as offlineManager } from "./modules/offline/offlineManager";
+export type {
+  OfflineProgressStatus,
+  OfflinePackError,
+} from "./modules/offline/offlineManager";
+export type { OfflinePackStatus } from "./modules/offline/OfflinePack";
+export { default as OfflinePack } from "./modules/offline/OfflinePack";
+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,
@@ -52,14 +64,7 @@ export type {
   HillshadeLayerStyleProps as HillshadeLayerStyle,
   BackgroundLayerStyleProps as BackgroundLayerStyle,
   LightLayerStyleProps as LightLayerStyle,
-} from './utils/MaplibreStyles';
-
-import {UserTrackingMode} from './components/Camera';
-
-// types:
-export enum StyleURL {
-  Default = 'https://demotiles.maplibre.org/style.json',
-}
+} from "./utils/MaplibreStyles";
 
 /** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
 export const UserTrackingModes = UserTrackingMode;

package/javascript/components/BackgroundLayer.tsx

@@ -1,16 +1,18 @@
-import {BackgroundLayerStyleProps} 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 { BackgroundLayerStyleProps } from "../utils/MaplibreStyles";
 
-import React, {ReactNode} from 'react';
-import {NativeModules, requireNativeComponent} from 'react-native';
+const MapLibreGL = NativeModules.MLNModule;
 
-const MapLibreGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = "RCTMLNBackgroundLayer";
 
-export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
-
-interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
+export interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
   /**
    * Customizable style attributes
    */
@@ -18,26 +20,31 @@ interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
 }
 
 interface NativeProps
-  extends Omit<BackgroundLayerProps, 'style'>,
+  extends Omit<BackgroundLayerProps, "style">,
     NativeBaseProps {}
 
-class BackgroundLayer extends AbstractLayer<BackgroundLayerProps, NativeProps> {
-  static defaultProps = {
-    sourceID: MapLibreGL.StyleSource.DefaultSourceID,
-  };
-
-  render(): ReactNode {
-    return (
-      <RCTMGLBackgroundLayer
-        testID="rctmglBackgroundLayer"
-        ref={this.setNativeLayer}
-        {...this.baseProps}
-      />
-    );
-  }
-}
-
-const RCTMGLBackgroundLayer =
+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

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