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

package/docs/location.md

@@ -0,0 +1,6 @@
+<!-- This file was autogenerated from location.js do not modify -->
+## <MapLibreGL.location />
+### Location sent by locationManager
+
+
+

package/docs/snapshotManager.md

@@ -24,7 +24,7 @@ const uri = await MapLibreGL.snapshotManager.takeSnap({
   zoomLevel: 12,
   pitch: 30,
   heading: 20,
-  styleURL: MapLibreGL.StyleURL.Dark,
+  styleURL: MapLibreGL.StyleURL.Default,
   writeToDisk: true, // Create a temporary file
 });
 
@@ -36,7 +36,7 @@ const uri = await MapLibreGL.snapshotManager.takeSnap({
   zoomLevel: 12,
   pitch: 30,
   heading: 20,
-  styleURL: MapLibreGL.StyleURL.Dark,
+  styleURL: MapLibreGL.StyleURL.Default,
   withLogo: false, // Disable Mapbox logo (Android only)
 });
 
@@ -45,7 +45,7 @@ const uri = await MapLibreGL.snapshotManager.takeSnap({
   bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]],
   width: width,
   height: height,
-  styleURL: MapLibreGL.StyleURL.Dark,
+  styleURL: MapLibreGL.StyleURL.Default,
 });
 ```
 

package/javascript/@types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const content: number;
+  export default content;
+}

package/javascript/MGLModule.ts

@@ -0,0 +1,37 @@
+import {NativeModules} from 'react-native';
+
+interface IMGLModule {
+  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 MGLModule: IMGLModule = {...NativeModules.MGLModule};
+
+export const {
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  setAccessToken,
+  getAccessToken,
+  setConnected,
+} = MGLModule;

package/javascript/Maplibre.ts

@@ -0,0 +1,65 @@
+export * from './MGLModule';
+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';
+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';
+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';
+
+import {UserTrackingMode} from './components/Camera';
+
+// types:
+export enum StyleURL {
+  Default = 'https://demotiles.maplibre.org/style.json',
+}
+
+/** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
+export const UserTrackingModes = UserTrackingMode;

package/javascript/components/AbstractLayer.tsx

@@ -0,0 +1,107 @@
+/* eslint react/prop-types:0  */
+import {StyleValue, transformStyle} from '../utils/StyleValue';
+import {getFilter} from '../utils/filterUtils';
+import {AllLayerStyleProps, FilterExpression} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import React from 'react';
+import {processColor, NativeMethods} from 'react-native';
+
+export interface BaseLayerProps {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+  filter?: FilterExpression;
+  /**
+   * Customizable style attributes
+   */
+  style?: AllLayerStyleProps;
+}
+
+export interface NativeBaseProps {
+  reactStyle?: {[key: string]: StyleValue};
+}
+
+class AbstractLayer<
+  Props extends BaseProps,
+  NativeProps extends NativeBaseProps,
+> extends React.PureComponent<Props & BaseLayerProps> {
+  get baseProps(): Props {
+    return {
+      ...this.props,
+      id: this.props.id,
+      sourceID: this.props.sourceID,
+      reactStyle: this.getStyle(),
+      minZoomLevel: this.props.minZoomLevel,
+      maxZoomLevel: this.props.maxZoomLevel,
+      aboveLayerID: this.props.aboveLayerID,
+      belowLayerID: this.props.belowLayerID,
+      layerIndex: this.props.layerIndex,
+      filter: getFilter(this.props.filter),
+      style: undefined,
+    };
+  }
+
+  nativeLayer: (React.Component<NativeProps> & Readonly<NativeMethods>) | null =
+    null;
+
+  setNativeLayer = (
+    instance: (React.Component<NativeProps> & Readonly<NativeMethods>) | null,
+  ): void => {
+    this.nativeLayer = instance;
+  };
+
+  getStyleTypeFormatter(styleType: string): typeof processColor | undefined {
+    return styleType === 'color' ? processColor : undefined;
+  }
+
+  getStyle(): {[key: string]: StyleValue} | undefined {
+    return transformStyle(this.props.style);
+  }
+
+  setNativeProps(props: {[key: string]: unknown}): void {
+    if (this.nativeLayer) {
+      let propsToPass = props;
+      if (props.style) {
+        propsToPass = {...props, reactStyle: this.getStyle()};
+      }
+      this.nativeLayer.setNativeProps(propsToPass);
+    }
+  }
+}
+
+export default AbstractLayer;

package/javascript/components/AbstractSource.tsx

@@ -0,0 +1,27 @@
+import BaseProps from '../types/BaseProps';
+
+import React from 'react';
+import {NativeMethods} from 'react-native';
+
+class AbstractSource<
+  PropsType extends BaseProps,
+  NativePropsType extends object,
+> extends React.PureComponent<PropsType> {
+  _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
+
+  setNativeProps(props: NativePropsType): void {
+    if (this._nativeRef) {
+      this._nativeRef.setNativeProps(props);
+    }
+  }
+
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void = (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => {
+    this._nativeRef = instance;
+  };
+}
+
+export default AbstractSource;

package/javascript/components/BackgroundLayer.tsx

@@ -0,0 +1,43 @@
+import {BackgroundLayerStyleProps} from '../utils/MaplibreStyles';
+import BaseProps from '../types/BaseProps';
+
+import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
+
+import React, {ReactNode} from 'react';
+import {NativeModules, requireNativeComponent} from 'react-native';
+
+const MapLibreGL = NativeModules.MGLModule;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
+
+interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
+  /**
+   * Customizable style attributes
+   */
+  style?: BackgroundLayerStyleProps;
+}
+
+interface NativeProps
+  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 =
+  requireNativeComponent<BackgroundLayerProps>(NATIVE_MODULE_NAME);
+
+export default BackgroundLayer;

package/javascript/components/{Callout.js → Callout.tsx}

@@ -1,13 +1,13 @@
-import {viewPropTypes} from '../utils';
-
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {ReactElement} from 'react';
 import {
   View,
   Text,
   Animated,
   requireNativeComponent,
   StyleSheet,
+  ViewStyle,
+  ViewProps,
+  StyleProp,
 } from 'react-native';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
@@ -19,28 +19,28 @@ const styles = StyleSheet.create({
     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: {
-    zIndex: 1000,
-    marginTop: -2,
-    elevation: 0,
     backgroundColor: 'transparent',
-    borderTopWidth: 16,
-    borderRightWidth: 8,
+    borderBottomColor: 'transparent',
     borderBottomWidth: 0,
+    borderLeftColor: 'transparent',
     borderLeftWidth: 8,
-    borderTopColor: 'white',
     borderRightColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderLeftColor: 'transparent',
-  },
-  content: {
-    position: 'relative',
-    padding: 8,
-    flex: 1,
-    borderRadius: 3,
-    borderWidth: 1,
-    borderColor: 'rgba(0, 0, 0, 0.2)',
-    backgroundColor: 'white',
+    borderRightWidth: 8,
+    borderTopColor: 'white',
+    borderTopWidth: 16,
+    elevation: 0,
+    marginTop: -2,
+    zIndex: 1000,
   },
   title: {
     color: 'black',
@@ -48,60 +48,62 @@ const styles = StyleSheet.create({
   },
 });
 
+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 RCTMGLCallout 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.
  */
-class Callout extends React.PureComponent {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * String that get's displayed in the default callout.
-     */
-    title: PropTypes.string,
-
-    /**
-     * Style property for the Animated.View wrapper, apply animations to this
-     */
-    style: PropTypes.any,
-
-    /**
-     * Style property for the native RCTMGLCallout container, set at your own risk.
-     */
-    containerStyle: PropTypes.any,
-
-    /**
-     * Style property for the content bubble.
-     */
-    contentStyle: PropTypes.any,
-
-    /**
-     * Style property for the triangle tip under the content.
-     */
-    tipStyle: PropTypes.any,
-
-    /**
-     * Style property for the title in the content bubble.
-     */
-    textStyle: PropTypes.any,
-  };
-
-  get _containerStyle() {
-    return [
+class Callout extends React.PureComponent<CalloutProps> {
+  get _containerStyle(): ViewStyle[] {
+    const style = [
       {
         position: 'absolute',
         zIndex: 999,
         backgroundColor: 'transparent',
-      },
-      this.props.containerStyle,
+      } as ViewStyle,
     ];
+
+    if (this.props.containerStyle) {
+      style.push(this.props.containerStyle);
+    }
+
+    return style;
   }
 
-  get _hasChildren() {
+  get _hasChildren(): boolean {
     return React.Children.count(this.props.children) > 0;
   }
 
-  _renderDefaultCallout() {
+  _renderDefaultCallout(): ReactElement {
     return (
       <Animated.View style={[styles.container, this.props.style]}>
         <View style={[styles.content, this.props.contentStyle]}>
@@ -114,7 +116,7 @@ class Callout extends React.PureComponent {
     );
   }
 
-  _renderCustomCallout() {
+  _renderCustomCallout(): ReactElement {
     return (
       <Animated.View {...this.props} style={this.props.style}>
         {this.props.children}
@@ -122,7 +124,7 @@ class Callout extends React.PureComponent {
     );
   }
 
-  render() {
+  render(): ReactElement {
     const calloutContent = this._hasChildren
       ? this._renderCustomCallout()
       : this._renderDefaultCallout();
@@ -134,6 +136,6 @@ class Callout extends React.PureComponent {
   }
 }
 
-const RCTMGLCallout = requireNativeComponent(NATIVE_MODULE_NAME, Callout);
+const RCTMGLCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Callout;