@rnmapbox/maps 10.1.0-beta.4 → 10.1.0-beta.6

package/lib/typescript/utils/nativeRef.d.ts

@@ -3,19 +3,19 @@ import { type NativeMethods, type HostComponent } from 'react-native';
 /**
  * Helper for useRef and requireNativeComponent:
  * @example
- * RCTMGLCamera = requireNativeComponent<NativeProps>('RCTMGLCamera');
- * const ref = useRef<typeof RCTMGLCamera)(null) as NativeRefType<NativeProps>;
+ * RNMBXCamera = requireNativeComponent<NativeProps>('RNMBXCamera');
+ * const ref = useRef<typeof RNMBXCamera)(null) as NativeRefType<NativeProps>;
  * ...
- * <RCTMGLCamera ref={ref} ... />
+ * <RNMBXCamera ref={ref} ... />
  */
 export declare type NativeRefType<P> = MutableRefObject<(Component<P> & Readonly<NativeMethods>) | null>;
 /**
  * Helper for useRef and requireNativeComponent:
  * @example
- * RCTMGLCamera = requireNativeComponent<NativeProps>('RCTMGLCamera');
- * const ref = nativeRef(useRef<typeof RCTMGLCamera)(null));
+ * RNMBXCamera = requireNativeComponent<NativeProps>('RNMBXCamera');
+ * const ref = nativeRef(useRef<typeof RNMBXCamera)(null));
  * ...
- * <RCTMGLCamera ref={ref} ... />
+ * <RNMBXCamera ref={ref} ... />
  */
 export default function nativeRef<P>(c: RefObject<HostComponent<P> | null>): MutableRefObject<(Component<P> & Readonly<NativeMethods>) | null>;
 //# sourceMappingURL=nativeRef.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.1.0-beta.4",
+  "version": "10.1.0-beta.6",
   "publishConfig": {
     "access": "public"
   },
@@ -82,7 +82,7 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/runtime": "7.19.0",
-    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/eslint-config": "^0.72.2",
     "@sinonjs/fake-timers": "^8.0.1",
     "@testing-library/react-native": "^11.0.0",
     "@types/debounce": "^1.2.1",
@@ -121,7 +121,7 @@
     "type": "all",
     "jsSrcsDir": "src/specs",
     "android": {
-      "javaPackageName": "com.mapbox.rctmgl"
+      "javaPackageName": "com.rnmapbox.rnmbx"
     }
   },
   "jest": {

package/rnmapbox-maps.podspec

@@ -218,7 +218,7 @@ Pod::Spec.new do |s|
   s.subspec 'DynamicLibrary' do |sp|
     case $RNMapboxMapsImpl
     when 'mapbox'
-      sp.source_files = "ios/RCTMGL-v10/**/*.{h,m,mm,swift}"
+      sp.source_files = "ios/RNMBX/**/*.{h,m,mm,swift}"
 
       if new_arch_enabled
         install_modules_dependencies(sp)

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,19 +108,19 @@ 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.MBXMapViewModule = {
+NativeModules.RNMBXMapViewModule = {
   takeSnap: jest.fn(),
   queryTerrainElevation: jest.fn(),
   setSourceVisibility: jest.fn(),

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/{MGLModule.ts → RNMBXModule.ts}

@@ -1,6 +1,6 @@
 import { NativeModules } from 'react-native';
 
-interface MGLModule {
+interface RNMBXModule {
   StyleURL: {
     Street: URL;
     Outdoors: URL;
@@ -36,7 +36,7 @@ interface MGLModule {
   setConnected(connected: boolean): void;
 }
 
-const MGLModule: MGLModule = { ...NativeModules.MGLModule };
+const RNMBXModule: RNMBXModule = { ...NativeModules.RNMBXModule };
 
 export const {
   StyleURL,
@@ -51,4 +51,4 @@ export const {
   getAccessToken,
   setTelemetryEnabled,
   setConnected,
-} = MGLModule;
+} = RNMBXModule;

package/src/components/Atmosphere.tsx

@@ -5,7 +5,7 @@ import type { AtmosphereLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue, transformStyle } from '../utils/StyleValue';
 import type { BaseProps } from '../types/BaseProps';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLAtmosphere';
+export const NATIVE_MODULE_NAME = 'RNMBXAtmosphere';
 
 type Props = BaseProps & {
   style: AtmosphereLayerStyleProps;
@@ -20,7 +20,7 @@ export const Atmosphere = memo((props: Props) => {
     };
   }, [props]);
 
-  return <RCTMGLAtmosphere {...baseProps} />;
+  return <RNMBXAtmosphere {...baseProps} />;
 });
 
 type NativeProps = {
@@ -28,5 +28,4 @@ type NativeProps = {
   style?: undefined;
 };
 
-const RCTMGLAtmosphere =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXAtmosphere = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/BackgroundLayer.tsx

@@ -9,7 +9,7 @@ import { StyleValue } from '../utils/StyleValue';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -70,7 +70,7 @@ export type Props = {
   style?: BackgroundLayerStyleProps;
 } & React.ComponentProps<typeof AbstractLayer>;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
+export const NATIVE_MODULE_NAME = 'RNMBXBackgroundLayer';
 
 type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
@@ -86,11 +86,11 @@ class BackgroundLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLBackgroundLayer ref={this.setNativeLayer} {...props} />;
+    return <RNMBXBackgroundLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLBackgroundLayer =
+const RNMBXBackgroundLayer =
   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

@@ -12,7 +12,7 @@ import { MapboxGLEvent } from '../types';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
 import { type NativeRefType } from '../utils/nativeRef';
 
-const NativeModule = NativeModules.MGLModule;
+const NativeModule = NativeModules.RNMBXModule;
 
 type Position = number[] | [number, number];
 
@@ -56,7 +56,7 @@ const nativeAnimationMode = (
   }
 };
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
+export const NATIVE_MODULE_NAME = 'RNMBXCamera';
 
 // Native module types.
 
@@ -242,7 +242,7 @@ export const Camera = memo(
         onUserTrackingModeChange,
       } = props;
 
-      const nativeCamera = useRef<typeof RCTMGLCamera>(
+      const nativeCamera = useRef<typeof RNMBXCamera>(
         null,
       ) as NativeRefType<NativeCameraProps>;
 
@@ -538,7 +538,7 @@ export const Camera = memo(
       }));
 
       return (
-        <RCTMGLCamera
+        <RNMBXCamera
           testID={'Camera'}
           ref={nativeCamera}
           stop={nativeStop}
@@ -561,7 +561,7 @@ export const Camera = memo(
   ),
 );
 
-const RCTMGLCamera =
+const RNMBXCamera =
   requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
 
 export type Camera = CameraRef;

package/src/components/CircleLayer.tsx

@@ -10,7 +10,7 @@ import { StyleValue } from '../utils/StyleValue';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -72,7 +72,7 @@ export type Props = {
   style?: CircleLayerStyleProps;
 } & React.ComponentProps<typeof AbstractLayer>;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
+export const NATIVE_MODULE_NAME = 'RNMBXCircleLayer';
 
 type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
@@ -92,11 +92,11 @@ class CircleLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLCircleLayer ref={this.setNativeLayer} {...props} />;
+    return <RNMBXCircleLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLCircleLayer: HostComponent<Props> =
+const RNMBXCircleLayer: HostComponent<Props> =
   requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
 
 export default CircleLayer;

package/src/components/FillExtrusionLayer.tsx

@@ -9,9 +9,9 @@ import { StyleValue } from '../utils/StyleValue';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
+export const NATIVE_MODULE_NAME = 'RNMBXFillExtrusionLayer';
 
 export type Props = {
   /**
@@ -90,11 +90,11 @@ class FillExtrusionLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
+    return <RNMBXFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLFillExtrusionLayer =
+const RNMBXFillExtrusionLayer =
   requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
 
 export default FillExtrusionLayer;

package/src/components/FillLayer.tsx

@@ -6,9 +6,9 @@ import { StyleValue } from '../utils/StyleValue';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
+export const NATIVE_MODULE_NAME = 'RNMBXFillLayer';
 
 export type Props = {
   /**
@@ -86,11 +86,11 @@ class FillLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
+    return <RNMBXFillLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLFillLayer =
+const RNMBXFillLayer =
   requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
 
 export default FillLayer;

package/src/components/HeatmapLayer.tsx

@@ -9,9 +9,9 @@ import { StyleValue } from '../utils/StyleValue';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
+export const NATIVE_MODULE_NAME = 'RNMBXHeatmapLayer';
 
 export type Props = {
   /**
@@ -91,11 +91,11 @@ class HeatmapLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
+    return <RNMBXHeatmapLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLHeatmapLayer =
+const RNMBXHeatmapLayer =
   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

@@ -6,9 +6,9 @@ import { StyleValue } from '../utils/StyleValue';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
+export const NATIVE_MODULE_NAME = 'RNMBXLineLayer';
 
 export type Props = {
   /**
@@ -86,11 +86,11 @@ class LineLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLLineLayer ref={this.setNativeLayer} {...props} />;
+    return <RNMBXLineLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLLineLayer =
+const RNMBXLineLayer =
   requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
 
 export default LineLayer;