@rnmapbox/maps 10.0.15 → 10.1.0-beta.10

package/setup-jest.js

@@ -7,7 +7,7 @@ function keyMirror(keys) {
 }
 
 // Mock of what the native code puts on the JS object
-NativeModules.MGLModule = {
+NativeModules.RNMBXModule = {
   // constants
   UserTrackingModes: keyMirror([
     'None',
@@ -86,9 +86,11 @@ NativeModules.MGLModule = {
   getAccessToken: () => Promise.resolve('test-token'),
   setTelemetryEnabled: jest.fn(),
   setConnected: jest.fn(),
+
+  MapboxV10: true,
 };
 
-NativeModules.MGLOfflineModule = {
+NativeModules.RNMBXOfflineModule = {
   createPack: (packOptions) => {
     return Promise.resolve({
       bounds: packOptions.bounds,
@@ -106,18 +108,34 @@ NativeModules.MGLOfflineModule = {
   setProgressEventThrottle: jest.fn(),
 };
 
-NativeModules.MGLSnapshotModule = {
+NativeModules.RNMBXSnapshotModule = {
   takeSnap: () => {
     return Promise.resolve('file://test.png');
   },
 };
 
-NativeModules.MGLLocationModule = {
+NativeModules.RNMBXLocationModule = {
   getLastKnownLocation: jest.fn(),
   start: jest.fn(),
   pause: jest.fn(),
 };
 
+NativeModules.RNMBXMapViewModule = {
+  takeSnap: jest.fn(),
+  queryTerrainElevation: jest.fn(),
+  setSourceVisibility: jest.fn(),
+  getCenter: jest.fn(),
+  getCoordinateFromView: jest.fn(),
+  getPointInView: jest.fn(),
+  getZoom: jest.fn(),
+  getVisibleBounds: jest.fn(),
+  queryRenderedFeaturesAtPoint: jest.fn(),
+  queryRenderedFeaturesInRect: jest.fn(),
+  setHandledMapChangedEvents: jest.fn(),
+  clearData: jest.fn(),
+  querySourceFeatures: jest.fn(),
+};
+
 // Mock for global AbortController
 global.AbortController = class {
   signal = 'test-signal';

package/src/Mapbox.ts

@@ -1,4 +1,4 @@
-export * from './MGLModule';
+export * from './RNMBXModule';
 export {
   Camera,
   UserTrackingMode,
@@ -12,6 +12,7 @@ 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 StyleImport } from './components/StyleImport';
 export {
   default as UserLocation,
   UserLocationRenderMode,

package/src/RNMBXModule.ts

@@ -0,0 +1,54 @@
+import { NativeModules } from 'react-native';
+
+interface RNMBXModule {
+  StyleURL: {
+    Street: URL;
+    Outdoors: URL;
+    Light: URL;
+    Dark: URL;
+    Satellite: URL;
+    SatelliteStreet: 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;
+  };
+  TileServers: {
+    Mapbox: string;
+  };
+
+  removeCustomHeader(headerName: string): void;
+  addCustomHeader(headerName: string, headerValue: string): void;
+  setAccessToken(accessToken: string | null): Promise<string | null>;
+  setWellKnownTileServer(tileServer: string): void;
+  getAccessToken(): Promise<string>;
+  setTelemetryEnabled(telemetryEnabled: boolean): void;
+  setConnected(connected: boolean): void;
+}
+
+const RNMBXModule: RNMBXModule = { ...NativeModules.RNMBXModule };
+
+export const {
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  TileServers,
+  removeCustomHeader,
+  addCustomHeader,
+  setAccessToken,
+  setWellKnownTileServer,
+  getAccessToken,
+  setTelemetryEnabled,
+  setConnected,
+} = RNMBXModule;

package/src/components/Atmosphere.tsx

@@ -1,11 +1,9 @@
 import React, { memo, useMemo } from 'react';
-import { requireNativeComponent } from 'react-native';
 
 import type { AtmosphereLayerStyleProps } from '../utils/MapboxStyles';
-import { StyleValue, transformStyle } from '../utils/StyleValue';
+import { transformStyle } from '../utils/StyleValue';
 import type { BaseProps } from '../types/BaseProps';
-
-export const NATIVE_MODULE_NAME = 'RCTMGLAtmosphere';
+import RNMBXAtmosphereNativeComponent from '../specs/RNMBXAtmosphereNativeComponent';
 
 type Props = BaseProps & {
   style: AtmosphereLayerStyleProps;
@@ -20,13 +18,5 @@ export const Atmosphere = memo((props: Props) => {
     };
   }, [props]);
 
-  return <RCTMGLAtmosphere {...baseProps} />;
+  return <RNMBXAtmosphereNativeComponent {...baseProps} />;
 });
-
-type NativeProps = {
-  reactStyle?: { [key: string]: StyleValue };
-  style?: undefined;
-};
-
-const RCTMGLAtmosphere =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/BackgroundLayer.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import {
   FilterExpression,
   BackgroundLayerStyleProps,
 } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXBackgroundLayerNativeComponent from '../specs/RNMBXBackgroundLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -70,8 +71,6 @@ export type Props = {
   style?: BackgroundLayerStyleProps;
 } & React.ComponentProps<typeof AbstractLayer>;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
-
 type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
 };
@@ -86,11 +85,14 @@ class BackgroundLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLBackgroundLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      <RNMBXBackgroundLayerNativeComponent
+        // @ts-expect-error just codegen stuff
+        ref={this.setNativeLayer}
+        {...props}
+      />
+    );
   }
 }
 
-const RCTMGLBackgroundLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default BackgroundLayer;

package/src/components/Callout.tsx

@@ -10,7 +10,7 @@ import {
   StyleProp,
 } from 'react-native';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
+export const NATIVE_MODULE_NAME = 'RNMBXCallout';
 
 const styles = StyleSheet.create({
   container: {
@@ -65,7 +65,7 @@ type Props = Omit<ViewProps, 'style'> & {
   style?: ViewStyle;
 
   /**
-   * Style property for the native RCTMGLCallout container, set at your own risk.
+   * Style property for the native RNMBXCallout container, set at your own risk.
    */
   containerStyle?: ViewStyle;
 
@@ -135,13 +135,11 @@ class Callout extends React.PureComponent<Props> {
       ? this._renderCustomCallout()
       : this._renderDefaultCallout();
     return (
-      <RCTMGLCallout style={this._containerStyle}>
-        {calloutContent}
-      </RCTMGLCallout>
+      <RNMBXCallout style={this._containerStyle}>{calloutContent}</RNMBXCallout>
     );
   }
 }
 
-const RCTMGLCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Callout;

package/src/components/Camera.tsx

@@ -6,13 +6,14 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { MapboxGLEvent } from '../types';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
 import { type NativeRefType } from '../utils/nativeRef';
+import NativeCameraView from '../specs/RNMBXCameraNativeComponent';
 
-const NativeModule = NativeModules.MGLModule;
+const NativeModule = NativeModules.RNMBXModule;
 
 type Position = number[] | [number, number];
 
@@ -56,8 +57,6 @@ const nativeAnimationMode = (
   }
 };
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
-
 // Native module types.
 
 type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
@@ -242,7 +241,7 @@ export const Camera = memo(
         onUserTrackingModeChange,
       } = props;
 
-      const nativeCamera = useRef<typeof RCTMGLCamera>(
+      const nativeCamera = useRef<typeof NativeCameraView>(
         null,
       ) as NativeRefType<NativeCameraProps>;
 
@@ -310,6 +309,29 @@ export const Camera = memo(
         [props.followUserLocation],
       );
 
+      // since codegen uses `payload` name in cpp code for creating payload for event,
+      // we rename it to `payloadRenamed` to avoid name collision there on new arch
+      const _onUserTrackingModeChange = useCallback(
+        (
+          event: MapboxGLEvent<
+            'usertrackingmodechange',
+            {
+              followUserLocation: boolean;
+              followUserMode: UserTrackingMode | null;
+            }
+          >,
+        ) => {
+          if (onUserTrackingModeChange) {
+            if (!event.nativeEvent.payload) {
+              // @ts-expect-error see the comment above
+              event.nativeEvent.payload = event.nativeEvent.payloadRenamed;
+            }
+            onUserTrackingModeChange(event);
+          }
+        },
+        [onUserTrackingModeChange],
+      );
+
       const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
         if (!defaultSettings) {
           return null;
@@ -538,8 +560,9 @@ export const Camera = memo(
       }));
 
       return (
-        <RCTMGLCamera
+        <RNMBXCamera
           testID={'Camera'}
+          // @ts-expect-error just codegen stuff
           ref={nativeCamera}
           stop={nativeStop}
           animationDuration={animationDuration}
@@ -554,14 +577,14 @@ export const Camera = memo(
           minZoomLevel={minZoomLevel}
           maxZoomLevel={maxZoomLevel}
           maxBounds={nativeMaxBounds}
-          onUserTrackingModeChange={onUserTrackingModeChange}
+          // @ts-expect-error just codegen stuff
+          onUserTrackingModeChange={_onUserTrackingModeChange}
         />
       );
     },
   ),
 );
 
-const RCTMGLCamera =
-  requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
+const RNMBXCamera = NativeCameraView;
 
 export type Camera = CameraRef;

package/src/components/CircleLayer.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
-import {
-  HostComponent,
-  NativeModules,
-  requireNativeComponent,
-} from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, CircleLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXCircleLayerNativeComponent from '../specs/RNMBXCircleLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -72,8 +69,6 @@ export type Props = {
   style?: CircleLayerStyleProps;
 } & React.ComponentProps<typeof AbstractLayer>;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
-
 type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
 };
@@ -92,11 +87,11 @@ class CircleLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLCircleLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXCircleLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RCTMGLCircleLayer: HostComponent<Props> =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default CircleLayer;

package/src/components/FillExtrusionLayer.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import {
   FilterExpression,
   FillExtrusionLayerStyleProps,
 } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXFillExtrusionLayerNativeComponent from '../specs/RNMBXFillExtrusionLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -90,11 +89,14 @@ class FillExtrusionLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      <RNMBXFillExtrusionLayerNativeComponent
+        // @ts-expect-error just codegen stuff
+        ref={this.setNativeLayer}
+        {...props}
+      />
+    );
   }
 }
 
-const RCTMGLFillExtrusionLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default FillExtrusionLayer;

package/src/components/FillLayer.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, FillLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXFillLayerNativeComponent from '../specs/RNMBXFillLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -86,11 +85,11 @@ class FillLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXFillLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RCTMGLFillLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default FillLayer;

package/src/components/HeatmapLayer.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import {
   FilterExpression,
   HeatmapLayerStyleProps,
 } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXHeatmapLayerNativeComponent from '../specs/RNMBXHeatmapLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -91,11 +90,11 @@ class HeatmapLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXHeatmapLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RCTMGLHeatmapLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default HeatmapLayer;

package/src/components/Image.tsx

@@ -42,7 +42,7 @@ const Image = memo(
       stretchY,
       children,
     };
-    return <RCTMGLImage {...nativeProps} />;
+    return <RNMBXImage {...nativeProps} />;
   }),
 );
 
@@ -54,9 +54,9 @@ interface NativeProps {
   stretchY?: [number, number][];
 }
 
-export const NATIVE_MODULE_NAME = 'RCTMGLImage';
+export const NATIVE_MODULE_NAME = 'RNMBXImage';
 
-const RCTMGLImage = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXImage = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 Image.displayName = 'Image';
 

package/src/components/ImageSource.tsx

@@ -10,7 +10,7 @@ import { BaseProps } from '../types/BaseProps';
 
 import AbstractSource from './AbstractSource';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLImageSource';
+export const NATIVE_MODULE_NAME = 'RNMBXImageSource';
 
 type Position = [number, number];
 
@@ -71,16 +71,16 @@ class ImageSource extends AbstractSource<Props, NativeProps> {
     };
 
     return (
-      <RCTMGLImageSource ref={this.setNativeRef} {...props}>
+      <RNMBXImageSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLImageSource>
+      </RNMBXImageSource>
     );
   }
 }
 
-const RCTMGLImageSource =
+const RNMBXImageSource =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default ImageSource;

package/src/components/Images.tsx

@@ -9,7 +9,7 @@ import { ImageSourcePropType, ImageResolvedAssetSource } from 'react-native';
 import { ShapeSource } from './ShapeSource';
 import Image from './Image';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLImages';
+export const NATIVE_MODULE_NAME = 'RNMBXImages';
 
 export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   payload: PayloadType;
@@ -190,7 +190,7 @@ class Images extends React.PureComponent<Props> {
       ...this._getImages(),
     };
 
-    return <RCTMGLImages {...props}>{this.props.children}</RCTMGLImages>;
+    return <RNMBXImages {...props}>{this.props.children}</RNMBXImages>;
   }
 }
 
@@ -203,6 +203,6 @@ type NativeProps = {
   nativeImages?: NativeImage[];
 };
 
-const RCTMGLImages = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXImages = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Images;

package/src/components/Light.tsx

@@ -7,7 +7,7 @@ import { type BaseProps } from '../types/BaseProps';
 import { transformStyle } from '../utils/StyleValue';
 import nativeRef from '../utils/nativeRef';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLLight';
+export const NATIVE_MODULE_NAME = 'RNMBXLight';
 
 type Props = BaseProps & {
   /**
@@ -30,7 +30,7 @@ interface LightMethods {
 function Light(props: Props, ref: React.ForwardedRef<LightMethods>) {
   const { style, ...propWithoutStyle } = props;
 
-  const nativeLightRef = nativeRef(useRef<typeof RCTMGLLight>(null));
+  const nativeLightRef = nativeRef(useRef<typeof RNMBXLight>(null));
 
   useImperativeHandle(ref, () => ({
     setNativeProps(_props: { [key: string]: unknown }) {
@@ -46,15 +46,15 @@ function Light(props: Props, ref: React.ForwardedRef<LightMethods>) {
   }));
 
   return (
-    <RCTMGLLight
+    <RNMBXLight
       ref={nativeLightRef}
-      testID="rctmglLight"
+      testID="RNMBXLight"
       {...propWithoutStyle}
       reactStyle={transformStyle(style)}
     />
   );
 }
 
-const RCTMGLLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default memo(forwardRef(Light));

package/src/components/LineLayer.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, LineLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXLineLayerNativeComponent from '../specs/RNMBXLineLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -86,11 +85,11 @@ class LineLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLLineLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXLineLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RCTMGLLineLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default LineLayer;