@rnmapbox/maps 10.0.0-beta.76 → 10.0.0-beta.78

package/plugin/src/withMapbox.ts

@@ -33,96 +33,22 @@ type InstallerBlockName = 'pre' | 'post';
 
 export type MapboxPlugProps = {
   RNMapboxMapsImpl?: string;
-  RNMapboxMapsDownloadToken?: string;
-};
-
-/**
- * Dangerously adds the custom installer hooks to the Podfile.
- * In the future this should be removed in favor of some custom hooks provided by Expo autolinking.
- *
- * https://github.com/rnmapbox/maps/blob/main/ios/install.md#react-native--0600
- * @param config
- * @returns
- */
-const withCocoaPodsInstallerBlocks: ConfigPlugin<MapboxPlugProps> = (
-  c,
-  { RNMapboxMapsImpl, RNMapboxMapsDownloadToken },
-) => {
-  return withDangerousMod(c, [
-    'ios',
-    async (config) => {
-      const file = path.join(config.modRequest.platformProjectRoot, 'Podfile');
 
-      const contents = await promises.readFile(file, 'utf8');
+  /**
+   * @platform ios
+   */
+  RNMapboxMapsVersion?: string;
 
-      await promises.writeFile(
-        file,
-        applyCocoaPodsModifications(contents, {
-          RNMapboxMapsImpl,
-          RNMapboxMapsDownloadToken,
-        }),
-        'utf-8',
-      );
-      return config;
-    },
-  ]);
+  RNMapboxMapsDownloadToken?: string;
 };
 
-// Only the preinstaller block is required, the post installer block is
-// used for spm (swift package manager) which Expo doesn't currently support.
-export function applyCocoaPodsModifications(
-  contents: string,
-  { RNMapboxMapsImpl, RNMapboxMapsDownloadToken }: MapboxPlugProps,
-): string {
-  // Ensure installer blocks exist
-  let src = addConstantBlock(
-    contents,
-    RNMapboxMapsImpl,
-    RNMapboxMapsDownloadToken,
-  );
-  src = addInstallerBlock(src, 'pre');
-  src = addInstallerBlock(src, 'post');
-  src = addMapboxInstallerBlock(src, 'pre');
-  src = addMapboxInstallerBlock(src, 'post');
-  return src;
-}
-
-export function addConstantBlock(
-  src: string,
-  RNMapboxMapsImpl?: string,
-  RNMapboxMapsDownloadToken?: string,
-): string {
-  const tag = `@rnmapbox/maps-rnmapboxmapsimpl`;
-
-  if (RNMapboxMapsImpl == null) {
-    const modified = removeGeneratedContents(src, tag);
-    if (!modified) {
-      return src;
-    } else {
-      return modified;
-    }
-  }
-
-  return mergeContents({
-    tag,
-    src,
-    newSrc: [
-      `$RNMapboxMapsImpl = '${RNMapboxMapsImpl}'`,
-      `$RNMapboxMapsDownloadToken = '${RNMapboxMapsDownloadToken}'`,
-    ].join('\n'),
-    anchor: /target .+ do/,
-    // We can't go after the use_react_native block because it might have parameters, causing it to be multi-line (see react-native template).
-    offset: 0,
-    comment: '#',
-  }).contents;
-}
-
-export function addInstallerBlock(
+export const addInstallerBlock = (
   src: string,
   blockName: InstallerBlockName,
-): string {
+): string => {
   const matchBlock = new RegExp(`${blockName}_install do \\|installer\\|`);
   const tag = `${blockName}_installer`;
+
   for (const line of src.split('\n')) {
     const contents = line.trim();
     // Ignore comments
@@ -148,13 +74,76 @@ export function addInstallerBlock(
     offset: 0,
     comment: '#',
   }).contents;
-}
+};
 
-export function addMapboxInstallerBlock(
+export const addConstantBlock = (
   src: string,
-  blockName: InstallerBlockName,
-): string {
+  {
+    RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
+    RNMapboxMapsDownloadToken,
+  }: MapboxPlugProps,
+): string => {
+  const tag = `@rnmapbox/maps-rnmapboxmapsimpl`;
+
+  if (RNMapboxMapsImpl == null) {
+    const modified = removeGeneratedContents(src, tag);
+    if (!modified) {
+      return src;
+    } else {
+      return modified;
+    }
+  }
+
+  const newSrc = [
+    `$RNMapboxMapsImpl = '${RNMapboxMapsImpl}'`,
+    `$RNMapboxMapsDownloadToken = '${RNMapboxMapsDownloadToken}'`,
+  ];
+
+  if (RNMapboxMapsVersion) {
+    newSrc.push(`$RNMapboxMapsVersion = '${RNMapboxMapsVersion}'`);
+  }
+
   return mergeContents({
+    tag,
+    src,
+    newSrc: newSrc.join('\n'),
+    anchor: /target .+ do/,
+    // We can't go after the use_react_native block because it might have parameters, causing it to be multi-line (see react-native template).
+    offset: 0,
+    comment: '#',
+  }).contents;
+};
+
+// Only the preinstaller block is required, the post installer block is
+// used for spm (swift package manager) which Expo doesn't currently support.
+export const applyCocoaPodsModifications = (
+  contents: string,
+  {
+    RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
+    RNMapboxMapsDownloadToken,
+  }: MapboxPlugProps,
+): string => {
+  // Ensure installer blocks exist
+  let src = addConstantBlock(contents, {
+    RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
+    RNMapboxMapsDownloadToken,
+  });
+  src = addInstallerBlock(src, 'pre');
+  src = addInstallerBlock(src, 'post');
+  src = addMapboxInstallerBlock(src, 'pre');
+  src = addMapboxInstallerBlock(src, 'post');
+
+  return src;
+};
+
+export const addMapboxInstallerBlock = (
+  src: string,
+  blockName: InstallerBlockName,
+): string =>
+  mergeContents({
     tag: `@rnmapbox/maps-${blockName}_installer`,
     src,
     newSrc: `    $RNMapboxMaps.${blockName}_install(installer)`,
@@ -162,16 +151,49 @@ export function addMapboxInstallerBlock(
     offset: 1,
     comment: '#',
   }).contents;
-}
+
+/**
+ * Dangerously adds the custom installer hooks to the Podfile.
+ * In the future this should be removed in favor of some custom hooks provided by Expo autolinking.
+ *
+ * https://github.com/rnmapbox/maps/blob/main/ios/install.md#react-native--0600
+ */
+const withCocoaPodsInstallerBlocks: ConfigPlugin<MapboxPlugProps> = (
+  config,
+  { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken },
+) =>
+  withDangerousMod(config, [
+    'ios',
+    async (exportedConfig) => {
+      const file = path.join(
+        exportedConfig.modRequest.platformProjectRoot,
+        'Podfile',
+      );
+
+      const contents = await promises.readFile(file, 'utf8');
+      await promises.writeFile(
+        file,
+        applyCocoaPodsModifications(contents, {
+          RNMapboxMapsImpl,
+          RNMapboxMapsVersion,
+          RNMapboxMapsDownloadToken,
+        }),
+        'utf-8',
+      );
+
+      return exportedConfig;
+    },
+  ]);
 
 /**
  * Exclude building for arm64 on simulator devices in the pbxproj project.
  * Without this, production builds targeting simulators will fail.
  */
-export function setExcludedArchitectures(project: XcodeProject): XcodeProject {
-  const configurations = project.pbxXCBuildConfigurationSection();
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
+export const setExcludedArchitectures: (
+  project: XcodeProject,
+) => XcodeProject = (project: XcodeProject): XcodeProject => {
+  const configurations: { buildSettings: Record<string, string> }[] =
+    project.pbxXCBuildConfigurationSection();
   for (const { buildSettings } of Object.values(configurations || {})) {
     // Guessing that this is the best way to emulate Xcode.
     // Using `project.addToBuildSettings` modifies too many targets.
@@ -181,39 +203,39 @@ export function setExcludedArchitectures(project: XcodeProject): XcodeProject {
   }
 
   return project;
-}
+};
+
+const withExcludedSimulatorArchitectures: ConfigPlugin = (config) =>
+  withXcodeProject(config, (exportedConfig) => {
+    exportedConfig.modResults = setExcludedArchitectures(
+      exportedConfig.modResults,
+    );
 
-const withExcludedSimulatorArchitectures: ConfigPlugin = (c) => {
-  return withXcodeProject(c, (config) => {
-    config.modResults = setExcludedArchitectures(config.modResults);
-    return config;
+    return exportedConfig;
   });
-};
 
 const withAndroidPropertiesDownloadToken: ConfigPlugin<MapboxPlugProps> = (
   config,
   { RNMapboxMapsDownloadToken },
 ) => {
   const key = 'MAPBOX_DOWNLOADS_TOKEN';
+
   if (RNMapboxMapsDownloadToken) {
-    return withGradleProperties(config, (config) => {
-      config.modResults = config.modResults.filter((item) => {
-        if (item.type === 'property' && item.key === key) {
-          return false;
-        }
-        return true;
-      });
-      config.modResults.push({
+    return withGradleProperties(config, (exportedConfig) => {
+      exportedConfig.modResults = exportedConfig.modResults.filter(
+        (item) => !(item.type === 'property' && item.key === key),
+      );
+      exportedConfig.modResults.push({
         type: 'property',
         key,
         value: RNMapboxMapsDownloadToken,
       });
 
-      return config;
+      return exportedConfig;
     });
-  } else {
-    return config;
   }
+
+  return config;
 };
 
 const withAndroidPropertiesImpl2: ConfigPlugin<MapboxPlugProps> = (
@@ -221,25 +243,23 @@ const withAndroidPropertiesImpl2: ConfigPlugin<MapboxPlugProps> = (
   { RNMapboxMapsImpl },
 ) => {
   const key = 'expoRNMapboxMapsImpl';
+
   if (RNMapboxMapsImpl) {
-    return withGradleProperties(config, (config) => {
-      config.modResults = config.modResults.filter((item) => {
-        if (item.type === 'property' && item.key === key) {
-          return false;
-        }
-        return true;
-      });
-      config.modResults.push({
+    return withGradleProperties(config, (exportedConfig) => {
+      exportedConfig.modResults = exportedConfig.modResults.filter(
+        (item) => !(item.type === 'property' && item.key === key),
+      );
+      exportedConfig.modResults.push({
         type: 'property',
         key: key,
         value: RNMapboxMapsImpl,
       });
 
-      return config;
+      return exportedConfig;
     });
-  } else {
-    return config;
   }
+
+  return config;
 };
 
 const withAndroidProperties: ConfigPlugin<MapboxPlugProps> = (
@@ -249,13 +269,18 @@ const withAndroidProperties: ConfigPlugin<MapboxPlugProps> = (
   config = withAndroidPropertiesDownloadToken(config, {
     RNMapboxMapsDownloadToken,
   });
-  config = withAndroidPropertiesImpl2(config, { RNMapboxMapsImpl });
+  config = withAndroidPropertiesImpl2(config, {
+    RNMapboxMapsImpl,
+  });
+
   return config;
 };
 
 const addLibCppFilter = (appBuildGradle: string): string => {
-  if (appBuildGradle.includes("pickFirst 'lib/x86/libc++_shared.so'"))
+  if (appBuildGradle.includes("pickFirst 'lib/x86/libc++_shared.so'")) {
     return appBuildGradle;
+  }
+
   return mergeContents({
     tag: `@rnmapbox/maps-libcpp`,
     src: appBuildGradle,
@@ -290,7 +315,7 @@ allprojects {
 `;
 
 // Fork of config-plugins mergeContents, but appends the contents to the end of the file.
-function appendContents({
+const appendContents = ({
   src,
   newSrc,
   tag,
@@ -300,8 +325,9 @@ function appendContents({
   newSrc: string;
   tag: string;
   comment: string;
-}): MergeResults {
+}): MergeResults => {
   const header = createGeneratedHeaderComment(newSrc, tag, comment);
+
   if (!src.includes(header)) {
     // Ensure the old generated contents are removed.
     const sanitizedTarget = removeGeneratedContents(src, tag);
@@ -320,47 +346,49 @@ function appendContents({
       didClear: !!sanitizedTarget,
     };
   }
+
   return { contents: src, didClear: false, didMerge: false };
-}
+};
 
-export function addMapboxMavenRepo(src: string): string {
-  return appendContents({
+export const addMapboxMavenRepo = (src: string): string =>
+  appendContents({
     tag: '@rnmapbox/maps-v2-maven',
     src,
     newSrc: gradleMaven,
     comment: '//',
   }).contents;
-}
 
-const withAndroidAppGradle: ConfigPlugin<MapboxPlugProps> = (config) => {
-  return withAppBuildGradle(config, ({ modResults, ...config }) => {
+const withAndroidAppGradle: ConfigPlugin<MapboxPlugProps> = (config) =>
+  withAppBuildGradle(config, ({ modResults, ...exportedConfig }) => {
     if (modResults.language !== 'groovy') {
       WarningAggregator.addWarningAndroid(
         'withMapbox',
         `Cannot automatically configure app build.gradle if it's not groovy`,
       );
-      return { modResults, ...config };
+
+      return { modResults, ...exportedConfig };
     }
 
     modResults.contents = addLibCppFilter(modResults.contents);
-    return { modResults, ...config };
+
+    return { modResults, ...exportedConfig };
   });
-};
 
-const withAndroidProjectGradle: ConfigPlugin<MapboxPlugProps> = (config) => {
-  return withProjectBuildGradle(config, ({ modResults, ...config }) => {
+const withAndroidProjectGradle: ConfigPlugin<MapboxPlugProps> = (config) =>
+  withProjectBuildGradle(config, ({ modResults, ...exportedConfig }) => {
     if (modResults.language !== 'groovy') {
       WarningAggregator.addWarningAndroid(
         'withMapbox',
         `Cannot automatically configure app build.gradle if it's not groovy`,
       );
-      return { modResults, ...config };
+
+      return { modResults, ...exportedConfig };
     }
 
     modResults.contents = addMapboxMavenRepo(modResults.contents);
-    return { modResults, ...config };
+
+    return { modResults, ...exportedConfig };
   });
-};
 
 const withMapboxAndroid: ConfigPlugin<MapboxPlugProps> = (
   config,
@@ -372,22 +400,27 @@ const withMapboxAndroid: ConfigPlugin<MapboxPlugProps> = (
   });
   config = withAndroidProjectGradle(config, { RNMapboxMapsImpl });
   config = withAndroidAppGradle(config, { RNMapboxMapsImpl });
+
   return config;
 };
 
 const withMapbox: ConfigPlugin<MapboxPlugProps> = (
   config,
-  { RNMapboxMapsImpl, RNMapboxMapsDownloadToken },
+  { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken },
 ) => {
   config = withExcludedSimulatorArchitectures(config);
   config = withMapboxAndroid(config, {
     RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
     RNMapboxMapsDownloadToken,
   });
-  return withCocoaPodsInstallerBlocks(config, {
+  config = withCocoaPodsInstallerBlocks(config, {
     RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
     RNMapboxMapsDownloadToken,
   });
+
+  return config;
 };
 
 export default createRunOncePlugin(withMapbox, pkg.name, pkg.version);

package/{javascript → src}/Mapbox.ts

@@ -12,7 +12,10 @@ export { default as Light } from './components/Light';
 export { default as PointAnnotation } from './components/PointAnnotation';
 export { default as Annotation } from './components/Annotation';
 export { default as Callout } from './components/Callout';
-export { default as UserLocation } from './components/UserLocation';
+export {
+  default as UserLocation,
+  UserLocationRenderMode,
+} from './components/UserLocation';
 export { default as VectorSource } from './components/VectorSource';
 export { ShapeSource } from './components/ShapeSource';
 export { default as RasterSource } from './components/RasterSource';

package/{javascript → src}/components/AbstractLayer.tsx

@@ -1,4 +1,3 @@
-/* eslint react/prop-types:0  */
 import React from 'react';
 import { NativeMethods, processColor } from 'react-native';
 
@@ -9,6 +8,7 @@ import type { BaseProps } from '../types/BaseProps';
 
 type PropsBase = BaseProps & {
   id: string;
+  existing?: boolean;
   sourceID?: string;
   minZoomLevel?: number;
   maxZoomLevel?: number;
@@ -27,6 +27,7 @@ class AbstractLayer<
     return {
       ...this.props,
       id: this.props.id,
+      existing: this.props.existing,
       sourceID: this.props.sourceID,
       reactStyle: this.getStyle(this.props.style),
       minZoomLevel: this.props.minZoomLevel,

package/{javascript → src}/components/BackgroundLayer.tsx

@@ -13,10 +13,15 @@ const MapboxGL = NativeModules.MGLModule;
 
 export type Props = {
   /**
-   * A string that uniquely identifies the source in the style to which it is added.
+   * A string that uniquely identifies the layer in the style to which it is added.
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * 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.

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

@@ -1,15 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import {
   View,
   Text,
   Animated,
   requireNativeComponent,
   StyleSheet,
+  ViewStyle,
+  ViewProps,
+  StyleProp,
 } from 'react-native';
 
-import { viewPropTypes } from '../utils';
-
 export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
 
 const styles = StyleSheet.create({
@@ -48,60 +48,68 @@ const styles = StyleSheet.create({
   },
 });
 
+type NativeProps = {
+  children: ReactNode;
+  style: StyleProp<ViewStyle>;
+};
+
+type Props = Omit<ViewProps, 'style'> & {
+  /**
+   * String that gets 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;
+};
+
 /**
  *  Callout that displays information about a selected annotation near the annotation.
  */
-class Callout extends React.PureComponent {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * String that gets 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,
-  };
-
+class Callout extends React.PureComponent<Props> {
   get _containerStyle() {
-    return [
+    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() {
     return React.Children.count(this.props.children) > 0;
   }
 
-  _renderDefaultCallout() {
+  _renderDefaultCallout(): ReactNode {
     return (
       <Animated.View style={[styles.container, this.props.style]}>
         <View style={[styles.content, this.props.contentStyle]}>
@@ -114,7 +122,7 @@ class Callout extends React.PureComponent {
     );
   }
 
-  _renderCustomCallout() {
+  _renderCustomCallout(): ReactNode {
     return (
       <Animated.View {...this.props} style={this.props.style}>
         {this.props.children}
@@ -134,6 +142,6 @@ class Callout extends React.PureComponent {
   }
 }
 
-const RCTMGLCallout = requireNativeComponent(NATIVE_MODULE_NAME, Callout);
+const RCTMGLCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Callout;

package/{javascript → src}/components/Camera.tsx

@@ -1,4 +1,3 @@
-import { Position } from '@turf/helpers';
 import React, {
   forwardRef,
   memo,
@@ -15,6 +14,8 @@ import { type NativeRefType } from '../utils/nativeRef';
 
 const NativeModule = NativeModules.MGLModule;
 
+type Position = number[] | [number, number];
+
 export enum UserTrackingMode {
   Follow = 'normal',
   FollowWithHeading = 'compass',

package/{javascript → src}/components/CircleLayer.tsx

@@ -18,6 +18,11 @@ export type Props = {
    */
   id: string;
 
+  /**
+   * The id refers to en existing layer in the style. Does not create a new layer.
+   */
+  existing?: boolean;
+
   /**
    * 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.